vue使用echarts

1.下载

 

2.在所需页面

引用----import echarts from 'echarts'

使用----<div id="ldChart" class="chart" :style="{width: '300px', height: '300px'}"

></div>

将option = {下面的内容复制到return中

export default {
  name: "ContentEchartsTwo",
  data() {
    return {
      ldPie: {
         title: {
           text: '堆叠区域图',
           textStyle:{
             fontSize:10
           },
           left:'20px'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            // boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            // areaStyle: {},
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#fce9f2' // 0% 处的颜色
                }, {
                  offset: 1, color: '#e896bd' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
          }
        ]
      }
    }
  },
  methods: {
    drawLine() {
      let ldChart = echarts.init(document.getElementById('ldChart')); // 基于准备好的dom，初始化echarts实例
      ldChart.setOption(this.ldPie); // 绘制图表
    },
  },
  mounted() { // 注意，必须mounted后绘制
    this.drawLine()
  }
}