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

 <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])
})
},

最后

以上就是等待自行车为你收集整理的echarts.js 动态生成多个图表 使用vue封装组件echarts.js 动态生成多个图表 使用vue封装组件的全部内容，希望文章能够帮你解决echarts.js 动态生成多个图表 使用vue封装组件echarts.js 动态生成多个图表 使用vue封装组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。