Vue + Element 中的Echart单线图

看图！！！

 

Echart表的引入使用看文档！ 

下面给代码

<!-- 第二部分柱形数据图 -->
        <div class="main-two-chart">
          <div class="integral-plate" id="main-two-chart" style="width:100%;height:200px;"></div>
        </div>


script中的methods方法：

// 第二部分的Echart图
    getMainTwoChart () {
      const myChart = this.$echarts.init(document.getElementById('main-two-chart'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          top: '4%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: {
          type: 'category',
          // 静态
          data: [124124]
          // data: this.secondLeftData
        },
        series: [
          {
            name: '2011年',
            type: 'bar',
            data: [0, 50],
            // barWidth: 设置宽度大小
            barWidth: 10
            // 设置颜色
            // itemStyle: {
            //   normal: {
            //     color: function (params) {
            //       // build a color map as your need.
            //       var colorList = [
            //         '#3aa1ff'
            //       ]
            //       return colorList[params.dataIndex]
            //     }
            //   }
            // }
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },

初始化调用
mounted () {
    // 两个动态数据图的初始化调用
    this.getMainTwoChart()
}