在vue中添加Echarts图表的基本使用教程


Posted in Javascript onNovember 22, 2017

前言

我们在项目中经常需要使用一些折线图、柱状图、饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网

现在的前端一般需要完成将大量的数据,实现可视化。现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势。而ECharts和d3.js则是可视化的成熟框架。对于制作的图表可以说是满足你的创造力。

两者相比,D3 它被很多其他的表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HTML表格,或是利用它的流体过度和交互,用相似的数据创建惊人的SVG条形图。

而ECharts图表更加的适合应用,具备华丽的外衣,但很实用。

在vue中添加Echarts图表的基本使用教程

ECharts的基本模板非常简单,相对d3上手容易。

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

在模板中创建所需的dom

<!-- ECharts图表测试 -->
 <div id="charts" style="width:'100%',height:'3.54rem'">
  <div id="main" :style="{width:'100%',height:'3.54rem'}"></div>
 </div>

写入js:

export default {
 name: 'Bank',
 data () {
 return {
 }
 },
 components: {
 },
 computed: {
 },
 methods: {
 },
 mounted() {
 /*ECharts图表*/
 var myChart = echarts.init(document.getElementById('main'));
 myChart.setOption({
  series : [
   {
    name: '访问来源',
    type: 'pie',
    radius: '55%',
    itemStyle: {
    normal: {
      // 阴影的大小
      shadowBlur: 200,
      // 阴影水平方向上的偏移
      shadowOffsetX: 0,
      // 阴影垂直方向上的偏移
      shadowOffsetY: 0,
      // 阴影颜色
      shadowColor: 'rgba(0, 0, 0, 0.5)'
     }
    },
    data:[
     {value:400, name:'搜索引擎'},
     {value:335, name:'直接访问'},
     {value:310, name:'邮件营销'},
     {value:274, name:'联盟广告'},
     {value:235, name:'视频广告'}
    ]
   }
  ]
 })
 }
}

eCharts中的事件:

ECharts 支持常规的鼠标事件类型,包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 事件。

// 基于准备好的dom,初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {
 xAxis: {
  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
 },
 yAxis: {},
 series: [{
  name: '销量',
  type: 'bar',
  data: [5, 20, 36, 10, 10, 20]
 }]
};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);
// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
 window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});

所有的鼠标事件包含参数 params,这是一个包含点击图形的数据信息的对象,如下格式:

{
 // 当前点击的图形元素所属的组件名称,
 // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
 componentType: string,
 // 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
 seriesType: string,
 // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
 seriesIndex: number,
 // 系列名称。当 componentType 为 'series' 时有意义。
 seriesName: string,
 // 数据名,类目名
 name: string,
 // 数据在传入的 data 数组中的 index
 dataIndex: number,
 // 传入的原始数据项
 data: Object,
 // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,
 // dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。
 // 其他大部分图表中只有一种 data,dataType 无意义。
 dataType: string,
 // 传入的数据值
 value: number|Array
 // 数据图形的颜色。当 componentType 为 'series' 时有意义。
 color: string
}

如何区分鼠标点击到了哪里:

myChart.on('click', function (params) {
 if (params.componentType === 'markPoint') {
  // 点击到了 markPoint 上
  if (params.seriesIndex === 5) {
   // 点击到了 index 为 5 的 series 的 markPoint 上。
  }
 }
 else if (params.componentType === 'series') {
  if (params.seriesType === 'graph') {
   if (params.dataType === 'edge') {
    // 点击到了 graph 的 edge(边)上。
   }
   else {
    // 点击到了 graph 的 node(节点)上。
   }
  }
 }

});

你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表,显示浮层等等,如下示例代码:

myChart.on('click', function (parmas) {
 $.get('detail?q=' + params.name, function (detail) {
  myChart.setOption({
   series: [{
    name: 'pie',
    // 通过饼图表现单个柱子中的数据分布
    data: [detail.data]
   }]
  });
 });
});

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
JsChart组件使用详解
Mar 04 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 #Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 #Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 #Javascript
浅谈Angular 中何时取消订阅
Nov 22 #Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 #Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 #Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 #Javascript
You might like
php递归遍历多维数组的方法
2015/04/18 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
使javascript也能包含文件
2006/10/26 Javascript
pjblog中的UBBCode.js
2007/04/25 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
node.js中watch机制详解
2014/11/17 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
python实现自动发送邮件
2018/06/20 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
用Python制作音乐海报
2021/01/26 Python
介绍一下EJB的体系结构
2012/08/01 面试题
费用会计岗位职责
2014/01/01 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
武侯祠导游词
2015/02/04 职场文书
寒假安全保证书
2015/02/28 职场文书
《实心球》教学反思
2016/02/23 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python