vue 項目插入Echarts圖表

// 1. 導入 echarts
import echarts from 'echarts'

 <!-- 2. 為ECharts准備一個具備大小（寬高）的Dom -->
                <div id="main1" style="width: 100%;height:400px;"></div>

// 此時，頁面上的元素，已經被渲染完畢
  mounted () {
    // 3. 基於准備好的dom，初始化echarts實例
    var myChart1 = echarts.init(document.getElementById('main1'))
    var option1 = {
      // title: {
      //   text: '折線圖堆疊'
      // },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['提現人數'],
        align: 'left',
        left: 10
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2019-11-20', '2019-11-21', '2019-11-22', '2019-11-23', '2019-11-24', '2019-11-25', '2019-11-26', '2019-11-27', '2019-11-28', '2019-11-29', '2019-11-30', '2019-12-01', '2019-12-02', '2019-12-03', '2019-12-04', '2019-12-05', '2019-12-06', '2019-12-07', '2019-12-08', '2019-12-09', '2019-12-10', '2019-12-11', '2019-12-12', '2019-12-13', '2019-12-14', '2019-12-15', '2019-12-16', '2019-12-17', '2019-12-18', '2019-12-02'],
        // X軸數據隔一個顯示 通過設置 interval
        axisLabel: {
          interval: 1
        }
      },
      yAxis: {
        type: 'value',
        // 可以矯正Y軸數據和折線圖數據不匹配的問題
        min: 0,
        max: 18,
        data: [0, 3, 6, 9, 12, 15, 18]
      },
      color: ['#61a2ec'],
      smooth: true,
      series: [
        {
          name: '提現人數',
          smooth: false,
          type: 'line',
          data: [5, 0, 7, 2, 1, 5, 1, 2, 3, 4, 5, 0, 0, 16, 2, 5, 7, 3, 1, 5, 2, 7, 2, 5, 6, 0, 2, 5, 3, 3],
          lineStyle: {
            normal: {
              color: '#61a2ec',
              width: 2
            }
          }
        }
      ]
    }
    // 5. 展示數據
    myChart1.setOption(option1)