vue 动态循环echart的series

默认已经引入echart , 直接上

vue:    
     <div>
        <div ref="myChartLine" style="height:350px; width:900px;"></div>
     </div>
javascript  中引入
	var echarts = require("echarts/lib/echarts");
	export default {
	data(){
        return { 
          myChart:{},
          nameLine:[],  //直线名称
          dateLine:[],  //直线日期
          seriesLine:[],  //直线数据
		}
	},
	methods:{
		drawLine(refName,series) {
	          this.myChart = echarts.init(this.$refs[refName]).clear();  //动态添加series时先清空画布在赋值
	          this.myChart = echarts.init(this.$refs[refName]);
	          this.myChart.setOption({
	              tooltip: {
	                  trigger: 'axis'
	              },
	              legend: {
	                  data: this.nameLine
	              },
	              grid: {
	                  left: '5%',
	                  bottom: '3%',
	                  containLabel: true
	              },
	              toolbox: {
	                  feature: {
	                      saveAsImage: {}
	                  }
	              },
	              xAxis: {
	                  type: 'category',
	                  boundaryGap: false,
	                  name:"日期",
	                  data:  this.dateLine
	              },
	              yAxis: {
	                  name:"元",
	                  type: 'value'
	              },
	              series: series
	          }),
	    // 获取接口并赋值
        searchList(){      
          this.$api.project.pledgeEchart(this.formInline).then(res => {
                if (res.status == 200) {
                  this.seriesLine = []
                  this.nameLine = res.data.nameList   //折线名称
                  this.dateLine=res.data.localDateList  //直线日期
                  this.seriesLine=res.data.data2  //直线数据
                  this.openEchert(this.nameLine,this.dateLine,this.seriesLine)   
                  console.log(this.seriesLine)
                } else {
                    this.$message({ message: res.statusText, type: "error" });
                }
            });
        },
	// 开启echart 数据处理
        openEchert(nameLine,dateLine,seriesLine){
          // 数据循环  折线名称:nameLine 直线日期: dateLine直线数据 : seriesLine
                let series = []
                console.log(seriesLine.length)
                for(let i = 0; i <seriesLine.length; i++){
                  series.push({
                      name: nameLine[i],
                      type: 'line',
                      stack: '总量',
                      data: seriesLine[i].data,
                      // markPoint: {
                      //   data: [
                      //     { type: "max", name: "最大值" },
                      //     { type: "min", name: "最小值" }
                      //   ]
                      // },
                  });
                }
            this.drawLine("myChartLine",series);
        },
	 },
	}
	
总结,很简单。 分为3个步鄹:1、从后台获取值  2、获取到值后数据处理循环一下。 3、赋值给echart

猜你喜欢

转载自blog.csdn.net/weixin_41760500/article/details/104053872