vue echarts 使用

作者: 菜鸟白泽 | 来源:发表于2021-02-26 13:38 被阅读0次

    一、如何引入并使用echarts

    第一种方法:直接引入echarts

    (1)安装echarts项目依赖

    npm install echarts --save
    //或者
    npm install echarts -S
    

    (2)我们安装完成之后,可以在 main.js 中全局引入 echarts

    import echarts from "echarts";
    Vue.prototype.$echarts = echarts;
    复制代码
    

    (3)创建图表

    <template>
      <div id="app">
        <div id="myChart" style="width: 600px;height:400px;"></div>
      </div>
    </template>
    <script>
    export default {
      name: "app",
      methods: {
        drawChart() {
          // 基于准备好的dom,初始化echarts实例【这里存在一个问题,请看到最后】
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 指定图表的配置项和数据
          let option = {
            title: {
              text: "ECharts 入门示例"
            },
            tooltip: {},
            legend: {
              data: ["销量"]
            },
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        }
      },
      mounted() {
        this.drawChart();
      }
    };
    </script>
    

    (4)为什么要在 mounted() 里执行?

    因为在 mounted 生命周期函数中实例化echarts对象,可以确保dom元素已经挂载到页面中

    image.png

    第二种方法,使用 Vue-ECharts 组件

    该方法没做验证,提供参考链接:https://juejin.cn/post/6844903735257202702

    二、在Vue中引入Echarts报错 Cannot read property ‘init‘ of undefined

    在运行的过程中,报了一下错误
    Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined”。

    打印了一下,调用 init 的 this.echarts,报 TypeError: Cannot read property 'echarts' of undefined 。可能是 this.charts 没导对。解决方法如下:

    在 let myChart = this.echarts.init(document.getElementById("myChart")); 之前导入 let echarts = require('echarts'); 并将 this.echarts 改成 echarts 。内容如下:

    let echarts = require("echarts");
         
     // 基于准备好的dom,初始化echarts实例
    let myChart = echarts.init(document.getElementById("myChart"));
    

    相关文章

      网友评论

        本文标题:vue echarts 使用

        本文链接:https://www.haomeiwen.com/subject/xmmmfltx.html