echarts折线图的封装

父组件

 <chart-pie
    style="width: 100%"
    :interval="interval"
    :download="true"
    :xList="xList"
    :seriesList="seriesList"
    :legendList="legendList"
  ></chart-pie>


this.seriesList.push({
        name: item.name,
        type: "line",
        // stack: "总量",
        data: item.data,
      });
    });

注意 “stack: "总量" ” 要不他注掉，要不然鼠标移入显示的数据与都断返回的不符合, 注掉就解决问题了

子组件

props: {
 // X轴的数据
 xList: {
  type: Array,
  default() {
    return [];
  },
 },
 // Y轴数据的
 seriesList: {
  type: Array,
  default() {
    return [];
  },
 },
 // 图例名称
 legendList: {
  type: Array,
  default() {
    return [];
  },
 },
 download: {
  type: Boolean,
  default() {
    return false;
  },
 },
 number: {
  type: Number,
  default() {
    return 45;
  },
 },
  图例名称
 title: {
  type: String,
  default() {
    return "";
  },
 },
 bottom: {
  type: String,
  default() {
    return "0";
  },
},
 x轴相邻的两个数间隔多少个显示
 interval: {
  type: Number,
  default() {
    return 0;
  },
 },
 },

mounted加载

mounted() {
this.list = this.xList;
this.seriesData = this.seriesList;
},


var _this = this;
  var myChart = document.getElementById("myChart");
  // myChart.style.width = 100 + '%'
  // console.log(window.innerWidth)
  // chartObj=echarts.init(myChart);
  // chartObj.setOption(option);
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(document.getElementById("myChart"));
  // 绘制图表
  myChart.setOption({
    // 折线图距离图表元素上下左右的距离
    title: {
      text: _this.title,
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: _this.legendList,
      bottom: _this.bottom,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "10%",
      width: "auto",
      containLabel: true,
    },
    toolbox: {
      feature: {},
      right: "30",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: _this.xList,
      width: "100%",
      axisLabel: {
        interval: _this.interval,
        rotate: _this.xList.length > 15 ? this.number : 0, //角度顺时针计算的
      },
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: true,
      },
      axisLine: {
        show: true,
      },
    },
    series: _this.seriesData,
  });
  myChart.resize();