vue引入echarts、找不到的圖表引入方法、圖表中的點擊事件

1.在vue-cli項目中添加webpack配置，本文引入的最新版本。在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方維護的，從 3.1.1 開始由官方 EFE 維護 npm 上 ECharts 和 zrender 的 package。

 

使用npm添加package.json文件中的配置並下載相關npm包依賴

npm install echarts --save

然后在項目文件的入口js文件main.js中添加

import echarts from "echarts"

在需要添加圖標的組件中創建依賴的實例

var echarts = require('echarts');

使用這種方式得到的是已經加載了所有圖表和組件的 ECharts 包，因此體積會比較大。也可以只按需引入需要的模塊。例如

// 引入 ECharts 主模塊
var echarts = require('echarts/lib/echarts');
// 引入柱狀圖
require('echarts/lib/chart/bar');
// 引入提示框和標題組件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

各種資源的列表詳情請查閱官網的github倉庫 https://github.com/ecomfe/echarts/blob/master/index.js

圖表使用

使用圖表時，可能會提示報錯

點擊鏈接： http://echarts.baidu.com/download-map.html下載所需要的圖表，引入即可使用。

 

點擊事件

 

你們的支持，是我堅持的動力~