2021-08-05

vue项目中echarts插件的引入方式

当我们在项目中用到echarts时，我们要怎么引入和使用呢，
首先要下载依赖，然后我们在项目中引用。

npm install echarts --save

在单个组件中引入

在单个组件中使用的时候

import echarts from "echarts";
export default {
  name: "addEcharts",
  data() {
    return {
    };
  },
  created() {},
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        series: [
          {
            type: "gauge",
            progress: {
              show: true,
              width: 25,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              shwo: false,
              lineStyle: {
                width: 25,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              length: 15,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            axisLabel: {
              show: false,
              distance: 25,
              color: "#999",
              fontSize: 20,
            },
            anchor: {
              show: false,
              showAbove: true,
              size: 25,
              itemStyle: {
                borderWidth: 10,
              },
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              fontSize: 80,
              offsetCenter: [0, "10%"],
            },
            data: [
              {
                value: 70,
              },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
     this.drawChart();
  },
};

在main.js中引入

在main.js中引入后，我们一般会选择挂载到原型上在各个组件中调用，如下：

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

然后在用到的组件中这样使用

  let myChart = this.$echarts.init(document.getElementById("main"));

在main.js中引入store和router的时候我在思考，第三方插件可以在new Vue初始化时候注入然后在各个组件中用$来调用吗？然后我就尝试了一下

new Vue({
  router,
  store,
  echarts,
  render: h => h(App)
}).$mount('#app')

然后发现在别的组件中直接用$echarts是行不通的，打印了一下echarts和daolaecharts发现后者是undefined，最后解决的方法是在用到的组件中用this.$root.$options.echarts来调用

  let myChart = this.$root.$options.echarts.init(document.getElementById("main"));

通过root去拿到根组件，再去拿到根组件上的echarts属性来实现的，当然还是建议用挂载原型的方法。