Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Echarts is known to be a powerful plug-in because of the need to visually manipulate data in a project, that is, to display it graphically. At first, WE wanted to find a vUE based package on the Internet. Sometimes we would use many Echarts charts on a page. If we wrote each chart separately, it would be time-consuming and laborious. Here are some of my experiences

<template> <div class="container"> <div v-for="(axis,index) in target" :key="index" style="width:100%; height:350px; margin-bottom:20px; overflow:hidden;" > <div class="roseChart" style="width:100%; height:100%;" ></div> </div> </div> </template> <script> export default {data(){return {target:[id:'1',name:' 1'}, {id: '2', name: 'line chart 2} {id:' 3 ', name: 'line chart 3} {id:' 4 ', name: 'line chart 4'} {id: '5', name: 'line chart 5}], seriesData: [],}}, created (){ let params={ siteId:'', startTime:this.time[0], endTime:this.time[1] } API.GetList(params).then(res=>{ if(res.code=="200"){ this.seriesData=res.data; this.$nextTick(()=> { this.drawRose() }) }else{ return false } }) }, methods:{ drawRose(){ var roseCharts = document.getElementsByClassName('roseChart'); for(var i = 0; i < roseCharts.length; I ++){var myChart = echarts.init(roseCharts[I]); var option={ color: ['#07cdbd', '#28bf7e', '#ed7c2f', '#f2a93b'], title: { text: "["+ this.seriesData[i].name+"]"+"-"+this.target[i].name, textStyle: { color: '#666', fontWeight: 'bold', fontSize: 16 } }, tooltip: { trigger:'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, toolbox: { show: true, feature: { magicType: { type: ['line', 'bar'] }, saveAsImage: {} } }, grid: { left: '1%', right: '1%', bottom: '1%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, axisTick: { show: False,}, splitLine: {show: false,}, axisLine: {show: true, lineStyle: {color: "rgba(0,0,0,.1)",},}, axisLabel: {//interval: 0, textStyle: {color: "rgba(0,0,0,.6)", fontWeight: "normal", fontSize: "12", }, }, data:this.seriesData[i].dateTime } ], yAxis: [ { type: 'value', axisTick: { show: false, }, splitLine: }, axisLine: {show: false,}, lineStyle: {color: "rgba(0,0,0,.1)",},}, axisLabel: {//interval: 0, textStyle: {color: "rgba(0,0,0,.6)", fontWeight: "normal", fontSize: "12",},},}], series: [{name: This.seriesdata [I].name, type: 'line', barWidth: 25, stack: 'total ', smooth: true, symbol: "circle", symbolSize: 5, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "Rgba (98, 201, 141, 0.5)"}, offset: 1, color: "rgba(98, 201, 141, 0.1)"}], "Rgba (0, 0, 0, 0.1)", shadowBlur: 6}}, data:this.seriesData[I].dataval,}]} myChart. SetOption (option,true); window.addEventListener("resize", () => { if(myChart){ myChart.resize(); }}); } }, }, } </script>Copy the code

Note: When using echarts loops, you need to pay attention to the array data format. The data format must be the same as the received data format of the Echarts series attribute so that the data can be rendered correctly.