快捷導(dǎo)航

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

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

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

vue使用echarts及報錯提示undefined(reading init)

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

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

報錯如下：

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

1、全局注冊echarts

// echarts

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts

這樣注冊就可以解決

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

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

2、編輯vue頁面echarts

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

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

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

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

// 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" //顯示當前列的所有信息
        },
        yAxis: {
          type: "value",
          name: '通過率%',
          axisLabel: {
            formatter: '{value} %', // 設(shè)置縱坐標顯示百分比形式
          },
        },
        series: [
          //數(shù)據(jù)   五條折線數(shù)據(jù)  line 折線
          {
            name: '?？谑泄簿中阌⒎志?百分比)',
            data: this.echarttable.xiuying,
            type: "line"
          },
          {
            name: '?？谑泄簿铸埲A分局(百分比)',
            data: this.echarttable.longhua,
            type: "line"
          },
          {
            name: '海口市公安局美蘭分局(百分比)',
            data: this.echarttable.meilan,
            type: "line"
          },
          {
            name: '?？谑泄簿汁偵椒志?百分比)',
            data: this.echarttable.qiongshan,
            type: "line"
          },
          {
            name: '?？谑泄簿珠_發(fā)區(qū)分局(百分比)',
            data: this.echarttable.kaifaqu,
            type: "line"
          }
        ]
      };
      // 注冊echarts的option
      myChart.setOption(option);
    },

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

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

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

這里其實也就是我們使用其他博客的人項目中的代碼后報錯的地方，主要就是因為我們在main上的引入方式不對；

2、注冊option

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

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

3、編寫option

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

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

注意注意

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

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