vue 使用echarts vue使用图表

vue 使用echarts vue使用图表

1、安装

npm install echarts --save

2、在vue中引入（全局引入）

// 引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、在vue中的使用

需要用到echart的地方先设置一个有id的div（vue中就是ref）、宽高

4、模板代码放在哪个位置

重点注意：其中const option = { }就是我们需要引进echart图表的代码

<template>
  <div class="-page">
    <div ref="chart" style="width: 50%; height: 376px"></div>
  </div>
</template>

<script>
export default {
  name: "userData",
  props: {},
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getEchartData();
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart;
      console.log(chart);
      console.log(this.$echarts);
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          title: {
            text: "ECharts 入门示例",
          },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script> 

<style lang="less" scoped>
</style>