vue使用ECharts的折線圖

1.下載

npm install echarts --save

2.在main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.使用

<div id="map" style="width: 100%;height:326px;"></div>

 getMap() {
      var myChart = this.$echarts.init(document.getElementById('map'))
      let option = {
        xAxis: {
          type: 'category',
          // data: this.dataX,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          boundaryGap: false, //控制日期是否在中間顯示
          axisLabel: {
            show: true, //是否顯示日期
            interval: 0, //強制顯示全部 // rotate: 40,//傾斜的角度
            textStyle: {
              color: '#000', //日期的顏色
              fontSize: 12 //字體的大小
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ccc' // x軸的顏色
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#000' //數字的顏色
            },
            inside: false //控制數據是否在內側還是外側顯示
          },
          axisLine: {
            lineStyle: {
              color: '#ccc' // 折線的顏色
            }
          }
        },
        series: [
          {
            // data: this.dataY,
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            symbol: 'circle', //是否顯示實心的折線圓點
            smooth: true, //讓折線有弧度
            symbolSize: 7, //折線圓點的大小
            itemStyle: {
              normal: {
                color: '#efc883', //折線點的顏色
                lineStyle: {
                  color: '#efc883' //折線的顏色
                },
                label: { show: true } //是否在折線點上顯示數字
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }

4.效果圖