成功vue使用曲线图

先安装：npm install echarts –save
<template>
  <div class="app-container">
    <div ref="Mychart" :style="{ width: '980px', height: '500px' }"></div>
  </div>
</template>
<script>
export default {
  name: "DataCount",
  data: () => ({
    msg: "曲线图例子",
  }),
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var echarts = require("echarts");
      let myChart = echarts.init(this.$refs.Mychart);
      // 绘制图表
      myChart.setOption({
        title: {
          text: "曲线图实例",
          subtext: "一个简单例子",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["最高", "最低"],
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}",
          },
        },
        series: [
          {
            name: "手机前7个月数据",
            type: "line",
            data: [12, 13, 25, 33, 42, 53, 90],
            markPoint: {
              data: [
                { type: "max", name: "最大值" }, //最大值标记
                { type: "min", name: "最小值" }, //最小值标记
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }], //平均值线
            },
          },
          {
            name: "电视机前7个月数据",
            type: "line",
            data: [31, 41, 15, 33, 42, 73, 80],
            markPoint: {
              data: [
                { type: "max", name: "最大值" }, //最大值标记
                { type: "min", name: "最小值" }, //最小值标记
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }], //平均值线
            },
          },
        ],
      });
    },
  },
};
</script>