Vue中使用echarts，echarts 封装以及使用的事项

谁借莪１个温暖的怀抱￠ 2022-11-19 07:42 294阅读 0赞

### [https://blog.csdn.net/qq\_44182284/article/details/106050398][https_blog.csdn.net_qq_44182284_article_details_106050398]  echart封装 ###

### [https://dujian.blog.csdn.net/article/details/115935953][https_dujian.blog.csdn.net_article_details_115935953]   引用echarts报错Cannot read property 'init' of underfined ###

### 1.安装echarts依赖   npm install echarts --save ###

### 2.在main.js中全局中引用 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70][]

// import echarts from 'echarts'  报错init undefined
    
    import * as echarts from "echarts";
    Vue.prototype.$echarts = echarts

### 3.在你需要用到echart的地方先设置一个div的id、宽高， ###

例子：

然后我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中。

import * as echarts from "echarts"; //这样引入 必须！！！
    mounted(){
        this.getEchartData()  
    },
    
       methods: {
        getEchartData() {
          const chart = this.$refs.chart
          if (chart) {
            //var myChart = this.$echarts.init(chart); //这种写法打包报错init 
            var myChart = echarts.init(chart); //推荐
            const option = {...}
            myChart.setOption(option)
            window.addEventListener("resize", function() {
              myChart.resize()
            })
          }
           this.$on('hook:destroyed',()=>{
             window.removeEventListener("resize", function() {
              myChart.resize();
            });
            })
        }
      }

其中const option = \{ \}就是我们需要引进echart图表的代码，需要什么例子可以在官方例子[https://echarts.apache.org/examples/zh/index.html][https_echarts.apache.org_examples_zh_index.html]里面找。

注意！目前我遇到两个比较特殊的图表需要在main.js里面引入一下才能使用，一个是词云图，一个是盒须图。代码如下：

require('echarts-wordcloud')
    
    require('echarts/dist/extension/dataTool.js')

### Echarts常见的属性改变 ###

通常一个Echarts图表通常由title(标题)、legend(图例)、grid（网格）xAxis（x轴）、yAxis（y轴）、dataZoom（区域缩放）tooltip（提示框组件）、toolbox（工具栏）、series（系列列表。每个系列通过 type 决定自己的图表类型）组成。例子如下图所示：

![a07d6c9e5465f26e503b6895a34289ef.png][]

具体需要修改哪一项的属性可以再官方配置项里面查找 [https://echarts.apache.org/examples/zh/index.html\#chart-type-pie][https_echarts.apache.org_examples_zh_index.html_chart-type-pie]

### echart分装案例 ###

myChart.vue:(子组件)  图形修改options

<template>
      <div>
        <span>组件</span>
        <div :ref="refname" :style="{ width: width, height: height }"></div>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        refname: {
          type: String,
          default: "chartref"
        },
        width: {
          type: String,
          default: "100%"
        },
        height: {
          type: String,
          default: "100%"
        }
      },
      data() {
        return {
          chart: null,
          option: { //基础折线图
            xAxis: {
              type: "category",
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
            },
            yAxis: {
              type: "value"
            },
            series: [
              {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: "line"
              }
            ]
          }
        };
      },
      mounted() {
        console.log(this.refname);
        console.log(this.$refs);
        this.getEchartData();
      },
      beforeDestroy() {
        if (!this.chart) {
          return;
        }
        this.chart.dispose();
        this.chart = null;
      },
      methods: {
        getEchartData() {
          let refname = this.refname;
          const chart = this.$refs[refname];
          if (chart) {
            var myChart = this.$echarts.init(chart);
            const option = this.option;
            myChart.setOption(option);
            window.addEventListener("resize", function() {
              myChart.resize();
            });
          }
          this.$on("hook:destroyed", () => {
            window.removeEventListener("resize", function() {
              myChart.resize();
            });
          });
        }
      }
    };
    </script>

父调用：

//引入上面封装的组件
    import myChart from "./myChart.vue";
    
    
    <myChart refname="refnames" width="200px" height="200px"></myChart>
    
    components: {
        myChart //注册子组件
    },

[https_blog.csdn.net_qq_44182284_article_details_106050398]: https://blog.csdn.net/qq_44182284/article/details/106050398
[https_dujian.blog.csdn.net_article_details_115935953]: https://dujian.blog.csdn.net/article/details/115935953
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70]: /images/20221119/3a352c3a8acf4b0d919a1daa05854966.png
[https_echarts.apache.org_examples_zh_index.html]: https://echarts.apache.org/examples/zh/index.html
[a07d6c9e5465f26e503b6895a34289ef.png]: /images/20221119/ff93a37df1e74dad9642ead4e4153b77.png
[https_echarts.apache.org_examples_zh_index.html_chart-type-pie]: https://echarts.apache.org/examples/zh/index.html#chart-type-pie