19.vue中封裝echarts組件
標簽： 前端
19.vue中封裝echarts組件
1.效果圖
2.echarts組件
npm install echarts
<template>
<div ref="echart" style="height:100%;">echarts組件</div>
</template>
<script>
import echarts from 'echarts'
export default {
props: {
chartData: {
type: Object,
default() {
return {
xData: [],
series: []
}
}
},
isAxisChart: {
type: Boolean,
default: true
}
},
watch: {
chartData: {
handler: function() {
this.initChart()
},
deep: true
},
isCollapse() {
setTimeout(() => {
this.resizeChart()
}, 300)
}
},
computed: {
options() {
return this.isAxisChart ? this.axisOption : this.normalOption
},
isCollapse() {
return this.$store.state.tab.isCollapse
}
},
data() {
return {
echart: null,
axisOption: {
legend: {
textStyle: {
color: '#333'
}
},
grid: {
left: '10%'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: [],
axisLine: {
lineStyle: {
color: '#17b3a3'
}
},
axisLabel: {
color: '#333'
}
},
color: ['#2ec7c9', '#b6a2de', '#5ablef'],
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#17b3a3'
}
}
},
series: []
},
normalOption: {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
data: []
}
]
}
}
},
methods: {
// 初始化圖表
initChart() {
this.initChartData()
if (this.echart) {
this.echart.setOption(this.options)
} else {
this.echart = echarts.init(this.$refs.echart)
this.echart.setOption(this.options)
}
},
initChartData() {
if (this.isAxisChart) {
console.log('有坐標軸')
this.axisOption.xAxis.data = this.chartData.xData
this.axisOption.series = this.chartData.series
} else {
this.normalOption.series = this.chartData.series
console.log(this.normalOption)
console.log('沒有坐標軸')
}
},
resizeChart() {
if (this.echart) {
this.echart.resize()
}
}
},
mounted() {
window.addEventListener('resize', this.resizeChart)
},
destroyed() {
window.removeEventListener('resize', this.resizeChart)
}
}
</script>
<style lang="scss" scoped></style>
3.使用組件
按照組件格式整理好數據格式
傳入組件
home.vue
<template>
<div>
<el-row :gutter="20">
<el-col :span="6"
><el-card>
<div class="top-card">
<div class="content-label">
<span class="content-label-title">{{ $t('lang.newMembers') }}</span>
<span class="content-label-num">20</span>
</div>
<div class="content-chart">
<el-progress type="circle" :percentage="25"></el-progress>
</div>
</div> </el-card
></el-col>
<el-col :span="6"
><el-card>
<div class="top-card">
<div class="content-label">
<span class="content-label-title">{{ $t('lang.getCoupons') }}</span>
<span class="content-label-num">20</span>
</div>
<div class="content-chart">
<el-progress type="circle" :percentage="100" status="success"></el-progress>
</div>
</div> </el-card
></el-col>
<el-col :span="6"
><el-card>
<div class="top-card">
<div class="content-label">
<span class="content-label-title">{{ $t('lang.memIntegral') }}</span>
<span class="content-label-num">20</span>
</div>
<div class="content-chart">
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6"
><el-card>
<div class="top-card">
<div class="content-label">
<span class="content-label-title">{{ $t('lang.registerUser') }}</span>
<span class="content-label-num">20</span>
</div>
<div class="content-chart">
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
</div>
</div> </el-card
></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-card class="table-card-table">
<common-table :tableData="memberList" :tableLabel="memberListLabel"></common-table>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="table-card">
<div class="chart-wrapper"><common-echarts :chartData="echartData.merberLine"></common-echarts></div>
</el-card>
<el-card class="table-card-tow">
<div class="table-card-tow-wrapper">
<div class="left"><common-echarts :chartData="echartData.merberBar"></common-echarts></div>
<div class="right">
<common-echarts :chartData="echartData.merberPie" :isAxisChart="false"></common-echarts>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import CommonTable from '@/components/table/CommonTable.vue'
import CommonEcharts from '@/components/echarts/CommonEcharts.vue'
export default {
components: {
CommonTable,
CommonEcharts
},
data() {
return {
// 表格數據
memberList: [],
echartData: {
merberLine: {
xData: [],
series: []
},
merberBar: {
xData: [],
series: []
},
merberPie: {
series: []
}
}
}
},
computed: {
// 表格label標簽
memberListLabel() {
return [
{
label: this.$t('lang.month'),
prop: 'month'
},
{
label: this.$t('lang.newMembers'),
prop: 'addMember'
},
{
label: this.$t('lang.memIntegral'),
prop: 'addIntegral'
},
{
label: this.$t('lang.getCoupons'),
prop: 'getCoupons'
},
{
label: this.$t('lang.registerUser'),
prop: 'registerUser'
}
]
}
},
created() {
console.log(this.memberListLabel)
this.getMembers()
},
methods: {
getMembers() {
this.$api.getHomeApi.getMembersList().then(res => {
console.log(res)
this.memberList = res.data.data
// 會員折線圖
const merberLine = res.data.data
const merberLineXdata = []
for (let i = 0; i < merberLine.length; i++) {
merberLineXdata[i] = merberLine[i].month
}
// 折線圖x軸
this.echartData.merberLine.xData = merberLineXdata
// 柱狀圖x軸
this.echartData.merberBar.xData = merberLineXdata
// 折線圖y軸數據
const obj1 = {
name: '新增會員',
data: [],
type: 'line'
}
for (let i = 0; i < merberLine.length; i++) {
obj1.data[i] = merberLine[i].addMember
}
this.echartData.merberLine.series.push(obj1)
const obj2 = {
name: '新增積分',
data: [],
type: 'line'
}
for (let i = 0; i < merberLine.length; i++) {
obj2.data[i] = merberLine[i].addIntegral
}
this.echartData.merberLine.series.push(obj2)
// 柱狀圖y軸數據
const obj3 = {
name: '新增會員',
data: [],
type: 'bar'
}
for (let i = 0; i < merberLine.length; i++) {
obj3.data[i] = merberLine[i].addMember
}
this.echartData.merberBar.series.push(obj3)
const obj4 = {
name: '新增積分',
data: [],
type: 'bar'
}
for (let i = 0; i < merberLine.length; i++) {
obj4.data[i] = merberLine[i].addIntegral
}
this.echartData.merberBar.series.push(obj4)
// 餅圖數據
const obj5 = {
name: '積分占比圖',
type: 'pie',
radius: ['30%', '70%'],
avoidLabelOverlap: false,
data: []
}
for (let i = 0; i < merberLine.length; i++) {
obj5.data[i] = merberLine[i].month
obj5.data[i] = merberLine[i].addIntegral
}
this.echartData.merberPie.series.push(obj5)
})
}
}
}
</script>
<style lang="scss" scoped>
.el-card {
height: 170px;
}
.top-card {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
}
.content-label {
display: flex;
flex-direction: column;
height: 100%;
width: 180px;
}
.content-label-title {
font-size: 25px;
}
.content-label-num {
margin-top: 30px;
font-size: 20px;
}
.content-chart {
height: 100%;
}
.table-card-table {
margin-top: 20px;
height: 520px;
}
.table-card {
margin-top: 20px;
height: 250px;
}
.chart-wrapper {
height: 250px;
width: 100%;
}
.table-card-tow {
margin-top: 20px;
height: 250px;
}
.table-card-tow-wrapper {
display: flex;
width: 100%;
height: 250px;
}
.left {
flex: 1;
width: 50%;
height: 250px;
}
.right {
flex: 1;
width: 50%;
height: 250px;
}
</style>
4.接口返回數據格式
// 導入mockjs 使用數據
// import Mock from 'mockjs'
export default {
getmembers: () => {
return {
code: 2000,
data: {
data: [
{ id: '001', month: '1月', addMember: 1, addIntegral: 2, getCoupons: 221, registerUser: 431 },
{ id: '002', month: '2月', addMember: 2, addIntegral: 4, getCoupons: 222, registerUser: 530 },
{ id: '003', month: '3月', addMember: 3, addIntegral: 6, getCoupons: 223, registerUser: 630 },
{ id: '004', month: '4月', addMember: 4, addIntegral: 3, getCoupons: 221, registerUser: 431 },
{ id: '005', month: '5月', addMember: 5, addIntegral: 2, getCoupons: 222, registerUser: 530 },
{ id: '006', month: '6月', addMember: 6, addIntegral: 1, getCoupons: 223, registerUser: 630 }
]
}
}
}
}
版權聲明：本文為weixin_38644630原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
智能推薦
在vue中封裝一個svg組件
在vue中封裝一個svg組件 第一步： 在vue腳手架生成的文件夾下的src/components創建一個Svg 在components->xx.vue 第二步： 在src目錄下創建icons文件下，文件夾下面有svg文件夾和index.js文...
freemarker + ItextRender 根據模板生成PDF文件
1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件 其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件； 還有一個問題至今沒有解決，就是關于生成PDF文件...
電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！
Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。 如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...
requests實現全自動PPT模板
http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載 訪問這個主頁，我們可以看到下面的樣式 點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址 點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包 那我們就開始做吧 首先，查看網頁的源代碼，我們可以看到每一...
猜你喜歡
Linux C系統編程-線程互斥鎖（四）
互斥鎖 互斥鎖也是屬于線程之間處理同步互斥方式，有上鎖/解鎖兩種狀態。 互斥鎖函數接口 1）初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...
統計學習方法 - 樸素貝葉斯
引入問題：一機器在良好狀態生產合格產品幾率是 90%，在故障狀態生產合格產品幾率是 30%，機器良好的概率是 75%。若一日第一件產品是合格品，那么此日機器良好的概率是多少。 貝葉斯模型 生成模型與判別模型 判別模型，即要判斷這個東西到底是哪一類，也就是要求y，那就用給定的x去預測。 生成模型，是要生成一個模型，那就是誰根據什么生成了模型，誰就是類別y，根據的內容就是x 以上述例子，判斷一個生產出...
styled-components —— React 中的 CSS 最佳實踐
https://zhuanlan.zhihu.com/p/29344146 Styled-components 是目前 React 樣式方案中最受關注的一種，它既具備了 css-in-js 的模塊化與參數化優點，又完全使用CSS的書寫習慣，不會引起額外的學習成本。本文是 styled-components 作者之一 Max Stoiber 所寫，首先總結了前端組件化樣式中的最佳實踐原則，然后在此基...
