1、安装echarts模块

npm install echarts --save

2、新建vue文件， 示例程序主体来自echarts官网：https://echarts.apache.org/examples/zh/index.html#chart-type-line

<template>
  <div id="app">
    <!--为echarts准备一个具备大小的容器dom-->
    <div id="main" style="width: 1200px; height: 400px"></div>
  </div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
export default {
  name: '',
  data() {
    return {
      charts: '',
      opinionData: [['2000-06-05', 116], ['2000-06-06', 129], ['2000-06-07', 135], ['2000-06-08', 86], ['2000-06-09', 73], ['2000-06-10', 85], ['2000-06-11', 73], ['2014-06-17', 104], ['2014-06-18', 116], ['2014-06-19', 116], ['2014-06-20', 84], ['2014-06-21', 96], ['2014-06-22', 91], ['2014-06-23', 115], ['2014-06-24', 161], ['2014-06-25', 138], ['2014-06-26', 163], ['2014-06-27', 68], ['2014-06-28', 77], ['2014-06-29', 161], ['2014-06-30', 185], ['2014-07-01', 172], ['2014-07-02', 80], ['2014-07-03', 248], ['2014-07-04', 237], ['2014-07-05', 165], ['2014-07-06', 256], ['2014-07-07', 216], ['2014-07-08', 134], ['2014-07-09', 63], ['2014-07-10', 114], ['2014-07-11', 77], ['2014-07-12', 80], ['2014-07-13', 64], ['2014-07-14', 156], ['2014-07-15', 140], ['2014-07-16', 133], ['2014-07-17', 186], ['2014-07-18', 182], ['2014-07-19', 106], ['2014-07-20', 119], ['2014-07-21', 68], ['2014-07-22', 54], ['2014-07-23', 82], ['2014-07-24', 90], ['2014-07-25', 134], ['2014-07-26', 188], ['2014-07-27', 194], ['2014-07-28', 159], ['2014-07-29', 159], ['2014-07-30', 169], ['2014-07-31', 244], ['2014-08-01', 199], ['2014-08-02', 163], ['2014-08-03', 149], ['2014-08-05', 80], ['2014-08-06', 67], ['2014-08-07', 162], ['2014-08-08', 140], ['2014-08-09', 143], ['2014-08-10', 125], ['2014-08-11', 76], ['2014-08-12', 119], ['2014-08-13', 70], ['2014-08-14', 104], ['2014-08-15', 109], ['2014-08-16', 159], ['2014-08-17', 124], ['2014-08-18', 135], ['2014-08-19', 150], ['2014-08-20', 164], ['2014-08-21', 169], ['2014-08-22', 83], ['2014-08-23', 155], ['2014-08-24', 75], ['2014-08-25', 59], ['2014-08-26', 78], ['2014-08-27', 136], ['2014-08-28', 103], ['2014-08-29', 104], ['2014-08-30', 176], ['2014-08-31', 89], ['2014-09-01', 127], ['2014-09-03', 54], ['2014-09-04', 100], ['2014-09-05', 140], ['2014-09-06', 186], ['2014-09-07', 200], ['2014-09-08', 61], ['2014-09-09', 109], ['2014-09-10', 111], ['2014-09-11', 114], ['2014-09-12', 97], ['2014-09-13', 94], ['2014-09-14', 66], ['2014-09-15', 54], ['2014-09-16', 87], ['2014-09-17', 80], ['2014-09-18', 84], ['2014-09-19', 117], ['2014-09-20', 168], ['2014-09-21', 129], ['2014-09-22', 127], ['2014-09-23', 64], ['2014-09-24', 60], ['2014-09-25', 144], ['2014-09-26', 170], ['2014-09-27', 58], ['2014-09-28', 87], ['2014-09-29', 70], ['2014-09-30', 53], ['2014-10-01', 92], ['2014-10-02', 78], ['2014-10-03', 123], ['2014-10-04', 95], ['2014-10-05', 54], ['2014-10-06', 68], ['2014-10-07', 200], ['2014-10-08', 314], ['2014-10-09', 379], ['2014-10-10', 346], ['2014-10-11', 233], ['2014-10-14', 80], ['2014-10-15', 73], ['2014-10-16', 76], ['2014-10-17', 132], ['2014-10-18', 211], ['2014-10-19', 289], ['2014-10-20', 250], ['2014-10-21', 82], ['2014-10-22', 99], ['2014-10-23', 163], ['2014-10-24', 267], ['2014-10-25', 353], ['2014-10-26', 78], ['2014-10-27', 72], ['2014-10-28', 88], ['2014-10-29', 140], ['2014-10-30', 206], ['2014-10-31', 204], ['2014-11-01', 65], ['2014-11-03', 59], ['2014-11-04', 150], ['2014-11-05', 79], ['2014-11-07', 63], ['2014-11-08', 93], ['2014-11-09', 80], ['2014-11-10', 95], ['2014-11-11', 59], ['2014-11-13', 65], ['2014-11-14', 77], ['2014-11-15', 143], ['2014-11-16', 98], ['2014-11-17', 64], ['2014-11-18', 93], ['2014-11-19', 282], ['2014-11-23', 155], ['2014-11-24', 94], ['2014-11-25', 196], ['2014-11-26', 293], ['2014-11-27', 83], ['2014-11-28', 114], ['2014-11-29', 276], ['2014-12-01', 54], ['2014-12-02', 65], ['2014-12-03', 51], ['2014-12-05', 62], ['2014-12-06', 89], ['2014-12-07', 65], ['2014-12-08', 82], ['2014-12-09', 276], ['2014-12-10', 153], ['2014-12-11', 52], ['2014-12-13', 69], ['2014-12-14', 113], ['2014-12-15', 82], ['2014-12-17', 99], ['2014-12-19', 53], ['2014-12-22', 103], ['2014-12-23', 100], ['2014-12-25', 73], ['2014-12-26', 155], ['2014-12-27', 243], ['2014-12-28', 155], ['2014-12-29', 125], ['2014-12-30', 65], ['2015-01-01', 65], ['2015-01-02', 79], ['2015-01-03', 200], ['2015-01-04', 226], ['2015-01-05', 122], ['2015-01-06', 60], ['2015-01-07', 85], ['2015-01-08', 190], ['2015-01-09', 105], ['2015-01-10', 208], ['2015-01-11', 59], ['2015-01-12', 160], ['2015-01-13', 211], ['2015-01-14', 265], ['2015-01-15', 386], ['2015-01-16', 118], ['2015-01-17', 89], ['2015-01-18', 94], ['2015-01-19', 77], ['2015-01-20', 113], ['2015-01-22', 143], ['2015-01-23', 257], ['2015-01-24', 117], ['2015-01-25', 185], ['2015-01-26', 119], ['2015-01-28', 65], ['2015-01-29', 87], ['2015-01-31', 60], ['2015-02-01', 108], ['2015-02-02', 188], ['2015-02-03', 143], ['2015-02-05', 62], ['2015-02-06', 100], ['2015-02-09', 152], ['2015-02-10', 166], ['2015-02-11', 55], ['2015-02-12', 59], ['2015-02-13', 175], ['2015-02-14', 293], ['2015-02-15', 326], ['2015-02-16', 153], ['2015-02-18', 73], ['2015-02-19', 267], ['2015-02-20', 183], ['2015-02-21', 394], ['2015-02-22', 158], ['2015-02-23', 86], ['2015-02-24', 207]]
    }
  },
  methods: {
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        title: {
          text: 'Beijing AQI',
          left: '1%'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '5%',
          right: '15%',
          bottom: '10%'
        },
        xAxis: {
          data: this.opinionData.map(function (item) {
            return item[0]
          })
        },
        yAxis: {},
        toolbox: {
          right: 10,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            startValue: '2014-06-01'
          },
          {
            type: 'inside'
          }
        ],
        visualMap: {
          top: 50,
          right: 10,
          pieces: [
            {
              gt: 0,
              lte: 50,
              color: '#93CE07'
            },
            {
              gt: 50,
              lte: 100,
              color: '#FBDB0F'
            },
            {
              gt: 100,
              lte: 150,
              color: '#FC7D02'
            },
            {
              gt: 150,
              lte: 200,
              color: '#FD0100'
            },
            {
              gt: 200,
              lte: 300,
              color: '#AA069F'
            },
            {
              gt: 300,
              color: '#AC3B2A'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        series: {
          name: 'Beijing AQI',
          type: 'line',
          data: this.opinionData.map(function (item) {
            return item[1]
          }),
          markLine: {
            silent: true,
            lineStyle: {
              color: '#333'
            },
            data: [
              {
                yAxis: 50
              },
              {
                yAxis: 100
              },
              {
                yAxis: 150
              },
              {
                yAxis: 200
              },
              {
                yAxis: 300
              }
            ]
          }
        }
      })
    }
  },
  // 调用
  mounted() {
    this.$nextTick(function () {
      this.drawLine('main')
    })
  }
}
</script>
<style scoped>
</style>

3、启动

npm run serve

4、效果图

image.png