快捷導(dǎo)航

vue使用echarts基本原理以及報(bào)錯(cuò)提示undefined(reading?init)的解決過程

更新時(shí)間：2025年09月17日 09:01:21 作者：中芯12341

Vue2使用ECharts時(shí),因未全局注冊(cè)或錯(cuò)誤引入導(dǎo)致TypeError報(bào)錯(cuò),解決方法為全局注冊(cè),正確獲取DOM節(jié)點(diǎn)并設(shè)置寬高,通過生命周期或數(shù)據(jù)請(qǐng)求后調(diào)用getMain2方法初始化圖表,option對(duì)象需根據(jù)實(shí)際數(shù)據(jù)配置

vue使用echarts及報(bào)錯(cuò)提示undefined(reading init)

在通常使用vue去編輯echarts圖的時(shí)候，對(duì)于echarts初學(xué)者去論壇搜索echats操作實(shí)現(xiàn)柱狀圖、折線圖、餅狀圖有很多博客都是基于一直怎么去“注冊(cè)”echarts給出的邏輯代碼，所以我們并不能一勞永逸的直接去cv復(fù)制我們需要的echarts，有的甚至不理解究竟為什么這樣寫。

今天我按照vue2的邏輯和結(jié)構(gòu)給大家說一下echarts的使用以及報(bào)錯(cuò)的解決過程。

報(bào)錯(cuò)如下：

Error in mounted hook: "TypeError: Cannot read properties of undefined (reading init )"

1、全局注冊(cè)echarts

// echarts

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts

這樣注冊(cè)就可以解決

Error in mounted hook: "TypeError: Cannot read properties of undefined (reading init )" 的問題

原因是有些博客很老當(dāng)然使用的echarts的引入方式也根據(jù)版本在不斷更新，所以我們并不能使用老的引入方式echarts（列入）：（錯(cuò)誤引入方式）~~import echarts from 'echarts';~~

2、編輯vue頁(yè)面echarts

html部分，需要注意的是我們不管怎么去寫echarts都不要忘記編輯width和height;

    <!-- 折線圖 -->
    <div id="main2" class="echarts" style="width:100%;height:300px;"></div>

js部分，通過觸發(fā)事件getmain2（）來去調(diào)用echarts；

getmain2（）可以掛在生命周期中或者你的項(xiàng)目請(qǐng)求數(shù)據(jù)請(qǐng)求完畢之后在進(jìn)行這個(gè)方法引入就可以。

// echarts圖
    getmain2() {
      let myChart = this.$echarts.init(document.getElementById("main2"));
      let option = {
        xAxis: {
          type: "category",
          name: '年、月',
          data: this.echarttable.months,
        },
        legend: {},
        toolbox: { //工具欄
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            // restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        tooltip: {
          trigger: "axis" //顯示當(dāng)前列的所有信息
        },
        yAxis: {
          type: "value",
          name: '通過率%',
          axisLabel: {
            formatter: '{value} %', // 設(shè)置縱坐標(biāo)顯示百分比形式
          },
        },
        series: [
          //數(shù)據(jù)   五條折線數(shù)據(jù)  line 折線
          {
            name: '海口市公安局秀英分局(百分比)',
            data: this.echarttable.xiuying,
            type: "line"
          },
          {
            name: '?？谑泄簿铸埲A分局(百分比)',
            data: this.echarttable.longhua,
            type: "line"
          },
          {
            name: '?？谑泄簿置捞m分局(百分比)',
            data: this.echarttable.meilan,
            type: "line"
          },
          {
            name: '?？谑泄簿汁偵椒志?百分比)',
            data: this.echarttable.qiongshan,
            type: "line"
          },
          {
            name: '?？谑泄簿珠_發(fā)區(qū)分局(百分比)',
            data: this.echarttable.kaifaqu,
            type: "line"
          }
        ]
      };
      // 注冊(cè)echarts的option
      myChart.setOption(option);
    },

這里一定會(huì)萌新看不懂，這是怎么建立的關(guān)聯(lián)的呢？？？

1、首先我們通過獲取節(jié)點(diǎn)的方式獲取到html部分的id 是main2

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

這里其實(shí)也就是我們使用其他博客的人項(xiàng)目中的代碼后報(bào)錯(cuò)的地方，主要就是因?yàn)槲覀冊(cè)趍ain上的引入方式不對(duì)；

2、注冊(cè)option

 // 注冊(cè)echarts的option
      myChart.setOption(option);

其實(shí)option這個(gè)對(duì)象里面才是我們實(shí)現(xiàn)echarts的根本，通過上面的步驟我們已經(jīng)把option和div標(biāo)簽深度綁定也就是說這里面填寫的js都會(huì)在div里面顯示我們要狀態(tài)

3、編寫option

let option = {
        內(nèi)容在上面
}

這就是整個(gè)echarts的步驟了，關(guān)于他的功能上述代碼

注意注意

可以直接cv，不過要更改橫縱坐標(biāo)的data換成已知的假數(shù)據(jù)才可以

相信如果這里你全部看完的話，你是一定會(huì)全面理解這個(gè)東西咋ivue上的使用方法，當(dāng)然為了防止即拿主意，上面代碼的data都是我們請(qǐng)求后端出的數(shù)據(jù)，所以想要看效果還是需要進(jìn)行數(shù)組編輯的，不過這不是很難，也是為了排除一部分cv的吧，畢竟分享一篇博客不是用來cv的是學(xué)習(xí)和記錄的過程，所以很感謝你能看到這里！