Vue中使用echarts

Posted 2020-12-17 hahahakc

echarts官网：https://echarts.apache.org/

安装： npm install echarts --save

DOM：

<div id="bar_chart" class="order_area"></div>

Script：

<script>
import echarts from ‘echarts‘;
export default {
  data() {
    return {
      id: ‘bar_chart‘,
      myChart: null
    };
  },
  mounted() {
    this.loadChart();
  },
  methods: {
    loadChart() {
      this.$nextTick(() => {
        this.myChart = echarts.init(document.getElementById(this.id));
        this.myChart.setOption(this.initOption());
      });
    },
    initOption() {
      const option = {
        backgroundColor: ‘#fff‘,
        tooltip: {
          trigger: ‘axis‘
        },
        legend: {
          data: [‘访问量‘, ‘下载量‘]
        },
        xAxis: [
          {
            type: ‘category‘,
            data: [
              ‘1月‘,
              ‘2月‘,
              ‘3月‘,
              ‘4月‘,
              ‘5月‘,
              ‘6月‘,
              ‘7月‘,
              ‘8月‘,
              ‘9月‘,
              ‘10月‘,
              ‘11月‘,
              ‘12月‘
            ]
          }
        ],
        yAxis: [
          {
            type: ‘value‘
          }
        ],
        series: [
          {
            name: ‘访问量‘,
            type: ‘bar‘,
            color: [‘#516b91‘],
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3
            ],
            markPoint: {
              data: [
                { type: ‘max‘, name: ‘最大值‘ },
                { type: ‘min‘, name: ‘最小值‘ }
              ]
            }
          },
          {
            name: ‘下载量‘,
            type: ‘bar‘,
            color: [‘#59c4e6‘],
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3
            ],
            markPoint: {
              data: [
                { name: ‘年最高‘, value: 182.2, xAxis: 7, yAxis: 183 },
                { name: ‘年最低‘, value: 2.3, xAxis: 11, yAxis: 3 }
              ]
            }
          }
        ]
      };
      return option;
    }
  },
  beforeDestroy() {
    if (!this.myChart) {
      return false;
    }
    this.myChart.dispose();
    this.myChart = null;
  }
};
</script>

组件销毁之前：销毁echarts组件，并将myChart重新赋值为Null