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

2023-07-20 14:41:14 185

Vue.component('charts',{ template:'#charts', //传入对应的数值与动态index props:['options','index'], methods:{ initOption(){ varthat=this vararr1=[]//x轴刻度 vararr2=[]//y轴数据值 //取出需要的数据 this.options.forEach(element=>{ arr1.push(element.selectedTopic) arr2.push(element.peopleNum) }) //基于准备好的dom，初始化echarts实例 varmyChart=echarts.init( document.getElementById('charts'+this.index) ) //指定图表的配置项和数据 varoption={ color:['#3582F8'], tooltip:{ trigger:'axis', axisPointer:{ //坐标轴指示器，坐标轴触发有效 type:'shadow'//默认为直线，可选为：'line'|'shadow' } }, grid:{ left:'3%', right:'4%', bottom:'3%', containLabel:true }, xAxis:[ { type:'category', data:arr1,//X轴的刻度 axisTick:{ alignWithLabel:true } } ], yAxis:[ //y轴的刻度值自动调整 { type:'value' } ], series:{ name:'y轴数值', type:'bar', barWidth:'60%', data:arr2//具体选择数值 } } //使用刚指定的配置项和数据显示图表。 myChart.setOption(option) } }, mounted(){ this.initOption() }, created(){} })

methods:{ forId:function(index){ return"geo_"+index }, mapTree(){ this.$nextTick(function(){ for(vari=0;i{c}' }, series:[ { name:'工作电表数', type:'gauge', radius:'80%', min:0, max:Number(this.dataVal[i].sum), splitNumber:10, axisLine:{//坐标轴线 lineStyle:{//属性lineStyle控制线条样式 color:[[0.30,'#ff4500'],[0.80,'#1e90ff'],[1,'lime']], width:1, shadowColor:'#fff',//默认透明 } }, axisLabel:{//坐标轴小标记 color:'#fff', shadowColor:'#fff',//默认透明 shadowBlur:10 }, axisTick:{//坐标轴小标记 length:4,//属性length控制线长 lineStyle:{//属性lineStyle控制线条样式 color:'auto', shadowColor:'#fff',//默认透明 shadowBlur:10 } }, splitLine:{//分隔线 length:7,//属性length控制线长 lineStyle:{//属性lineStyle（详见lineStyle）控制线条样式 width:2, color:'#fff', shadowColor:'#fff',//默认透明 shadowBlur:10 } }, pointer:{//分隔线 width:4,//指针的宽度 length:"70%",//指针长度，按照半圆半径的百分比 shadowColor:'#fff',//默认透明 shadowBlur:5 }, title:{ textStyle:{//其余属性默认使用全局文本样式，详见TEXTSTYLE fontWeight:'bolder', fontSize:10, fontStyle:'italic', color:'#fff', shadowColor:'#fff',//默认透明 shadowBlur:10 } }, detail:{ fontSize:12, }, data:[{value:this.dataVal[i].normalSum,name:''}] }] }); } }) } }

以上这篇echarts.js动态生成多个图表使用vue封装组件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

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

热门推荐

随机推荐

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