vue中循环生成多个相同的echarts图表,但数据动态
一.需求需要循环展示多个相同结构样式的echarts,但是每个数据不同,需要根据后端统一返回的数据去填充图表的数据内容二.效果三.代码和注释如下<divv-for="(item,index) in indexList" :key="item.id"><div class="main3" style="height:360px;"></div>//模板里先定义个d
·
一.需求
需要循环展示多个相同结构样式的echarts,但是每个图表的数据动态,需要根据后端统一返回的数据去填充图表的数据内容
二.效果
三.代码和注释如下
<div v-for="(item,index) in indexList" :key="item.id">
<div class="main3" style="height:360px;"></div>
//模板里先定义个div盒子,放echarts,这里必须有设置宽或者高,要不然echarts不会展示
</div>
drawChart3(){
var echarts = require("echarts");
//先引入echarts
var roseCharts=document.getElementsByClassName('main3')
//通过getElementsByClassName获取到所有类名叫main3的div盒子节点
for (var i = 0; i < roseCharts.length; i++) {
//循环所有echarts节点
var myChart = echarts.init(roseCharts[i])
//初始化每一个图表
var option ={//echarts的配置
tooltip: { //点击环形图每个部分时展示的提示窗
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
//提示窗的提示内容
},
legend: {//图例的样式和内容
selectedMode:false,
bottom: '5%',//图例距离整个容器底部的距离
left: 'center',//图例距离整个容器左边
data: ['完成', '较好', '一般', '较差', '无进展'],//图例文字内容
itemHeight: 9,//图例图标的高度
itemWidth:9,//图例图标的宽度
itemGap: 25,//图例图标与文字间的间距
icon: "circle",//设置图例图标的形状为实心圆,这个不填,默认是矩形
textStyle: {
fontSize: 12,//图例文字字体大小
color: '#8A90A3'//图例文字颜色
},
},
color:["#5CA4FC","#7F5EF3","#FBCF36","#42D6CC","#D9DCE4"],
//环形图内容组成部分的颜色设置
series: [//数据
{
name: 'KR完成比例',//数据名称
type: 'pie',//饼状图
radius: ['30%', '50%'],//饼图的半径,一般写一个,若写成有2个半径的数组,则变成了环形图
label: {//饼状图展示的内容
formatter: '{per|{d}%} {ng|{c}}',//饼状图延伸线展示的内容
backgroundColor: '#fff',//背景色
rich: {//展示内容的样式控制,需要通过设置变量样式的方式
per: {
color: 'rgba(133, 138, 155, 1)',
padding: [2, 4],
borderRadius: 2
},
ng:{
color: 'rgba(92, 164, 252, 1)',
}
}
},
data: this.indexList[i].pies
//后端返回的数据,将每个数组循环填充进echarts的数据源,其中后端返回的每一个数组的数据形式应该约定好,例如:[{value: 12, name: '完成'},{value: 25, name: '较好'},{value: 40, name: '一般'},{value: 15, name: '较差'},{value: 8, name: '无进展'}]
}
]
}
myChart.setOption(option)
//将该echarts用之前配置好的option的配置项进行渲染
window.addEventListener("resize", function () {
//监听窗口变动实时渲染
myChart.resize();
});
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)