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下载所需要的图表,引入即可使用。

 

点击事件

 

你们的支持,是我坚持的动力~

 

posted @ 2017-09-06 15:55  进击的乌龟  阅读(7793)  评论(0编辑  收藏  举报