vue echarts折线图

数据格式 传参dataList

            dataLine:[
              {
                name:'line1',
                x:[1,2,3],
                y:[10,20,30]
              },
              {
                name:'line2',
                x:[1,2,3],
                y:[101,20,30]
              }
            ],

<template>
  <div class="chartOuter" v-loading="loading">
    <p v-if="!showEchart" class="no-data" style="text-align: center;position: absolute">暂无数据</p>
    <div v-if="showEchart"  class="chart" ref="chart"></div>
  </div>
</template>

<script>
  import {debounce} from "@/utils/utils";

  export default {
    name: "lines",
    props:{
      dataList:Array,
    },
    data() {
      return {
        loading:false,
        data:[],
        showEchart:false,
        num:1,
        timer:null
      }
    }, //图表实例
    watch:{
      async showEchart(newValue){
        this.showEchart = newValue
        if(newValue == true){
          await this.echartsInit()
        }
      },
      async dataList(newValue,oldValue){
        this.loading = true
        if(newValue.length != 0){
          this.showEchart = true
          this.data = [...newValue]
          await this.echartsInit()
        }else{
          this.loading = false
        }
      }
    },
    destroyed(){
      // 这一步的目的是移除监听
      window.removeEventListener("resize",this.listener)
    },
    async mounted() {
      window.addEventListener('resize', this.listener)
      this.data = [...this.dataList]
      if(this.data.length > 0){
        this.showEchart = true
      }
      try {
        // 在通过mounted调用即可
        await this.echartsInit()
      }catch (e) {
        console.log(e)
      }
    },
    methods: {
      listener() {
        //逻辑代码
        if(this.$refs.chart){
          let chart = this.$echarts.init(this.$refs.chart)
          chart.resize()
        }
      },
      echartsInit() {
        this.flag = true
        let timer = setInterval(() => {
          if(!this.flag){
            clearInterval(timer)
          }
          if(this.$refs.chart && this.flag){
            this.flag = false
            clearInterval(timer)
            var legendData = [];
            var series= [];
            var xdata = [];
            let _this = this
            const reach = this.$echarts.init(this.$refs.chart);
            reach.clear();
            var val = this.data
            var touchList = val
            console.log(touchList)
            if(touchList.length == 0) {
              // console.log("zml")
              reach.dispose();
            } else {
              xdata = touchList[0].x
              touchList.forEach((item,index) => {
                legendData.push({
                  name: item.name,
                })
                series.push({
                  name: item.name,
                  type:'line',
                  data: item.y,
                  symbolSize: 4,
                  smooth: 0.5,
                })
              })
            }
            reach.setOption({
              tooltip: {
                trigger: 'axis',
                textStyle:{
                  align:'left'
                },
                formatter: function (params) {
                  let htmlStr = ''
                  for(var i=0;i<params.length;i++){
                    var param = params[i];
                    var xName = param.axisValue;//x轴的名称
                    var seriesName = param.seriesName;//图例名称
                    var value = param.value;//y轴值
                    var color = param.color;//图例颜色
                    if(i===0){
                      htmlStr += xName + '<br/>';//x轴的名称
                    }
                    htmlStr +='<div>';
                    //为了保证和原来的效果一样，这里自己实现了一个点的效果
                    htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
                    //圆点后面显示的文本
                    htmlStr += seriesName + '：' + value;
                    htmlStr += '</div>';
                  }
                  return htmlStr;
                },
              },
              toolbox: {
                show: true,
                right: '15',
                top: '-5',
                feature: {
                  saveAsImage: {
                    iconStyle: {
                      borderColor: "#666"
                    },
                    emphasis: {
                      iconStyle: {
                        borderColor: "#666",
                        textFill: "#666"
                      },
                    }
                  },
                  dataView: { show: true, readOnly: false ,
                    optionToContent:  (opt) => {
                      let axisData = opt.xAxis[0].data; //坐标数据
                      let series = opt.series; //折线图数据
                      let tdHeads = '<td  style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333">时间</td>'; //表头
                      let tdBodys = ''; //数据
                      series.forEach(function (item) {
                        //组装表头
                        tdHeads += `<td style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333">${item.name}</td>`;
                      });
                      let table = `<table   border="1" style="width: 96%;margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center" class="dataViewTable"><tbody><tr>${tdHeads} </tr>`;

                      for (let i = 0, l = axisData.length; i < l; i++) {
                        for (let j = 0; j < series.length; j++) {
                          //组装表数据
                          tdBodys += `<td><input class="${j}x" type="text" value="${series[j].data[i]}" style="border: none;text-align: center;color: #444444"></td>`;
                        }
                        table += `<tr><td style="padding: 0 10px;text-align: center"><input type="text" value="${axisData[i]}" style="border: none;text-align: center;color: #444444"> </td>${tdBodys}</tr>`;
                        tdBodys = '';
                      }
                      table += '</tbody></table>';
                      return table;
                    },
                    contentToOption: (HTMLDomElement, opt) => {
                      if(document.getElementsByClassName('dataViewTable').length>1){
                        this.$message.error('有其他未关闭的数据视图，请关闭后重试');
                      }else{
                        for(let i = 0;i < opt.series.length;i++){
                          var name = 'dataX' + i;
                          window[name] = []
                          for (let j of document.getElementsByClassName(`${i}x`) ){
                            window[name].push(j.value)
                          }
                          opt.series[i].data = window[name]
                        }
                        return opt;
                      }
                    },
                  },

                  magicType: { show: true, type: ['line', 'bar'] },
                  restore: { show: true },
                },
              },
              grid: {
                left: '40',
                right: '40',
                bottom: '40',
                top: '40',
              },
              legend: {
                left: 'center',
                data: legendData,
                top: '20',
              },
              xAxis:  {
                type: 'category',
                boundaryGap: _this.isReach == 0 ? false : true,
                data: xdata,
                axisLine: {
                  lineStyle: {
                    color: "#666"
                  }
                },
                axisTick: {
                  lineStyle: {
                    color: "#12d4c9",
                  },
                  // interval: 0,
                },
                axisLabel: {
                  // interval:0,
                  color: '#333',
                  rotate: '-35'
                },
              },
              yAxis: {
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: "#666"
                  }
                },
                axisTick: {
                  show: false,
                },
                splitLine: {
                  show: false,
                },
                splitNumber: 5,
                minInterval: 1
              },
              series: series,
            },true);
            this.loading = false
          }
        })


      },
      eConsole(e){
        console.log(e)
      }
    }
  }
</script>

<style scoped lang="scss">
  .chartOuter{
    position: relative;
    height: 220px;
    width: 100%;
    .chart{
      height: 220px;
    }
  }
</style>