echarts.js 动态生成多个图表使用vue封装组件echarts.js 动态生成多个图表使用vue封装组件

101 阅读 0 评论 67 点赞

我是靠谱客的博主等待自行车，这篇文章主要介绍echarts.js 动态生成多个图表使用vue封装组件echarts.js 动态生成多个图表使用vue封装组件，现在分享给大家，希望可以做个参考。

echarts.js 动态生成多个图表使用vue封装组件

复制代码

1
2
3
4
 <div v-for="(item,index) in chartList" :key="index" style="width:33.15%;height:50%;color:white;border: 1px solid white;display:flex;">
<div :id="`chart${index}`" style="width:70%;height:100%;"></div>
</div>

复制代码

paintGraphChange(){
this.chartList.forEach((val, index) => {
const myChart = echarts.init( document.getElementById(`chart${index}`),'dark')
this.chartList[index] = {
title: {top:"3%",position:'center',left:'60%',text: this.chartList[index].skillGroupName,textStyle:{fontSize:'20',textBorderType: [5, 10],textBorderDashOffset: 5,textBorderType: 'solid',color:'#5b9bd5'}},
xAxis: {type: 'category',data: ['语文', '数学','英语', '化学','物理','生物','政治'],nameLocation:'end',splitArea:{show:false},splitLine:{show: false}},
yAxis: {type: 'value',splitArea:{show:false},splitLine:{show: false}},
series: [{data:this.chartList[index].list,type: 'bar',barWidth: '20%',color:'#5b9bd5',label:{show:true,position:'top'},//配置样式
itemStyle: {
//通常情况下：
normal:{
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params){
var colorList = ['#5b9bd5','rgb(255,0,0)','rgb(146,208,80)','rgb(255,255,0)','rgb(0,176,240)','rgb(0,176,80)','rgb(112,48,160)'];
return colorList[params.dataIndex];
}
},}}],
grid:{left:"10%",right:"0%",top:"15%"}
}
//注意this.chartList[index]这是我们后台拼好数据直接set就行了
myChart.setOption(this.chartList[index])
})
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
paintGraphChange(){
this.chartList.forEach((val, index) => {
const myChart = echarts.init( document.getElementById(`chart${index}`),'dark')
this.chartList[index] = {
title: {top:"3%",position:'center',left:'60%',text: this.chartList[index].skillGroupName,textStyle:{fontSize:'20',textBorderType: [5, 10],textBorderDashOffset: 5,textBorderType: 'solid',color:'#5b9bd5'}},
xAxis: {type: 'category',data: ['语文', '数学','英语', '化学','物理','生物','政治'],nameLocation:'end',splitArea:{show:false},splitLine:{show: false}},
yAxis: {type: 'value',splitArea:{show:false},splitLine:{show: false}},
series: [{data:this.chartList[index].list,type: 'bar',barWidth: '20%',color:'#5b9bd5',label:{show:true,position:'top'},//配置样式
itemStyle: {
//通常情况下：
normal:{
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params){
var colorList = ['#5b9bd5','rgb(255,0,0)','rgb(146,208,80)','rgb(255,255,0)','rgb(0,176,240)','rgb(0,176,80)','rgb(112,48,160)'];
return colorList[params.dataIndex];
}
},}}],
grid:{left:"10%",right:"0%",top:"15%"}
}
//注意this.chartList[index]这是我们后台拼好数据直接set就行了
myChart.setOption(this.chartList[index])
})
},