echarts初探
最近经常看到echarts，觉得很有意思，并且这个库是百度开发的，目前来说使用的也很广泛，包括百度、阿里、腾讯、网易、小米、新浪、华为、联想、美团等一大批一线互联网公司在使用，且github上的star数也有2万多了，还是挺不错的。
echarts是一个纯JavaScript图标库，可以流畅的运行在PC和移动端，兼容性也不错，底层依赖的时canvas类库ZRender，它可以提供生动、直观、可定制的数据可视化图表。具体来说，可以提供常规的折线图、散点图、柱状图、饼图、K线图，地理数据可视化的地图、热力图、线图等等。 且Echarts3开始独立出了“坐标系”的概念，支持直角坐标系、极坐标系、地理坐标系等。 且对于流量非常珍贵的移动端的文件体积做了优化，且可以在移动端缩放、平移等等。且借助canvas的能力，可以在散点图中轻松展现上万甚至上十万的数据。且其特效绚丽。
使用Echarts很简单，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts</title>
<script type="text/javascript" src="./echarts.js"></script>
</head>
<body>
<div id="main" style="width: 700px; height: 300px;"></div>
<script>
var myChar = echarts.init(document.getElementById('main'), 'light');
var option = {
title: {
text: '宝宝的抖音喜欢的个数变化'
},
legend: {
data: ['数量']
},
xAxis: {
data: ['第一次', '第二次', '第三次', '第四次', '第五次', '第六次', '第七次',]
},
yAxis: {},
series: [{
name: '数量',
type: 'bar',
data: [, , , , , , ],
}],
// 全局样式设置
backgroundColor: 'pink',
textStyle: {
color: 'black'
},
// 这里的itemStyle中的item在这个例子中就是每一个柱状图，而不是整个图
itemStyle: {
color: 'yellow', // 柱状图的颜色
shadowBlur: ,
shadowOffsetX: ,
shadowOffsetY: ,
shadowColor: 'red',
emphasis: {
color: 'green',
shadowBlur: ,
shadowColor: 'black'
}
},
}
myChar.showLoading();
setTimeout(function () {
myChar.setOption(option);
myChar.hideLoading();
}, ); </script>
</body>
</html>
即这里我们先写一个div用于容纳这个canvas，接下来，我们使用echarts.init函数进行初始化，第一个参数接受的的是一个DOM，第二个参数接受的是主题配置，如'light'或'dart'。
接下来，我们就可以写一个配置了，这个配置中有title、legend、xAxis、yAxis、series，值得注意的是，这里的legend的数据要和series中的数据一一对应。另外，我们还可以对整个图标的样式做出定义。最后我们只要setOption即可。
注意，数据是获取到的，有时为了不让用户等待，我们可以用showLoading提示用户很快就会加载，这样的用户体验会更好一些。
但是，仅仅从上面的例子中，我们就可以发现一个问题：legend、坐标轴和series中的数据一般是从后端获取到的，所以，如果按照这种写法显然会严重降低效率，所以，Echarts 4中使用了dataset来简化操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts</title>
<script type="text/javascript" src="./echarts.js"></script>
</head>
<body>
<div id="main" style="width: 700px; height: 300px;"></div>
<script>
var myChar = echarts.init(document.getElementById('main'), 'light');
var option = {
title: {
text: '宝宝的抖音喜欢的个数变化'
},
legend: {
data: ['数量']
},
dataset: {
source:[
['product', '数量'],
['第一次', ],
['第二次', ],
['第三次', ],
['第四次', ],
['第五次', ],
['第六次', ],
['第七次', ]
]
},
xAxis: {
type: 'category'
},
yAxis: {},
series: [
{type: 'bar'},
],
// 全局样式设置
backgroundColor: 'pink',
textStyle: {
color: 'black'
},
// 这里的itemStyle中的item在这个例子中就是每一个柱状图，而不是整个图
itemStyle: {
color: 'yellow', // 柱状图的颜色
shadowBlur: ,
shadowOffsetX: ,
shadowOffsetY: ,
shadowColor: 'red',
emphasis: {
color: 'green',
shadowBlur: ,
shadowColor: 'black'
}
},
}
myChar.showLoading();
setTimeout(function () {
myChar.setOption(option);
myChar.hideLoading();
}, ); </script>
</body>
</html>
可以看到，我们这里使用了dataset，然后就可以将之前xAxis和series的内容全部放在这个dataset里，尤其是数据量比较大的时候，这种方法更为方便。
另外，Echarts中还是一个是dataZoom组件，即可以对图表的X轴进行zoom，添加如下代码即可：
dataZoom: [
{
type: 'slider',
start: ,
end:
}
],
因为在前端，表格也是需要和用户进行交互的，所以Echart也支持常规的事件，比如：click、dbclick、mousedown、mousemove、mouseup、mouseover、mouseout等。
myChar.on('click', function (params) {
alert((params.data[] + ': ').concat(params.data[]))
});
全部代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts</title>
<script type="text/javascript" src="./echarts.js"></script>
</head>
<body>
<div id="main" style="width: 700px; height: 300px;"></div>
<script>
var myChar = echarts.init(document.getElementById('main'), 'light');
var option = {
title: {
text: '宝宝的抖音喜欢的个数变化'
},
legend: {
data: ['数量']
},
dataset: {
source:[
['product', '数量'],
['第一次', ],
['第二次', ],
['第三次', ],
['第四次', ],
['第五次', ],
['第六次', ],
['第七次', ]
]
},
xAxis: {
type: 'category'
},
yAxis: {},
dataZoom: [
{
type: 'slider',
start: ,
end:
}
],
series: [
{type: 'bar'},
],
// 全局样式设置
backgroundColor: 'pink',
textStyle: {
color: 'black'
},
// 这里的itemStyle中的item在这个例子中就是每一个柱状图，而不是整个图
itemStyle: {
color: 'yellow', // 柱状图的颜色
shadowBlur: ,
shadowOffsetX: ,
shadowOffsetY: ,
shadowColor: 'red',
emphasis: {
color: 'green',
shadowBlur: ,
shadowColor: 'black'
}
},
}
myChar.showLoading();
setTimeout(function () {
myChar.setOption(option);
myChar.hideLoading();
}, ); myChar.on('click', function (params) {
alert((params.data[] + ': ').concat(params.data[]))
}); </script>
</body>
</html>
选择使用canvas或者是svg进行渲染
我们之前提到了使用canvas渲染和svg渲染的不同，而使用Echarts配置何种渲染引擎也是非常简单的，如下所示：
var myChar = echarts.init(document.getElementById('main'), 'light', {renderer: 'svg'});
即我们只需要添加第三个参数 {renderer: 'svg'}这样就使用了svg进行渲染了。
参考文章：Echarts
echarts初探的更多相关文章
- echarts初探：了解模块化
什么是echarts?这是官网:http://echarts.baidu.com/ 简单的说就是百度提供的一些画图表的库,用它你可以简便的画出一些你想要的图表效果. 虽然蛮好用的,但对于不知道模块化的 ...
- 初探百度F.I.S — 由工具到解决方案
1. 前言 阅兵放假三天,我哪儿也没去,宅着看了一些东东:git命令行.svn命令以及下面的主角——百度FIS.对看过的git.svn的命令也做了一些总结,请参见:<git命令学习笔记>和 ...
- 一起来玩echarts系列（一）------箱线图的分析与绘制
一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- echarts+php+mysql 绘图实例
最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...
- 数据图表插件Echarts（一）
一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...
- ECharts数据图表系统？ 5分钟上手！
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
- 初探领域驱动设计（2）Repository在DDD中的应用
概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...
随机推荐
- s4-3 CSMA
载波侦听多路访问协议 CSMA:Carrier Sense Multiple Access 特点:"先听后发" 改进ALOHA协议的侦听/发送策略 分类 非持续式 持 ...
- 第08章：MongoDB-CRUD操作--文档--删除
①语法 remove() [2.6以后方法过时] deleteOne() [2.6以后官方推荐] deleteMany() [2.6以后官方推荐] db.collection.remove( < ...
- UVa 11722 Joining with Friend (几何概率 + 分类讨论)
题意:某两个人 A,B 要在一个地点见面,然后 A 到地点的时间区间是 [t1, t2],B 到地点的时间区间是 [s1, s2],他们出现的在这两个区间的每个时刻概率是相同的,并且他们约定一个到了地 ...
- jquery页面隐藏和展开之间切换
html页面: <p id="myp4">默认情况下,这段话是隐藏的,点击按钮以后,这段话就展开,并且按钮上的值改变</p> <button id=& ...
- bat文件命令
- 20169207《linux内核原理与分析》第二周作业
第一部分:学习MOOC网Linux内核分析的课程. 首先对冯诺依曼体系结构和存储程序计算机工作模型进行了了解,查阅资料,对冯诺依曼体系的特点与课堂上的相结合,真实明白了模型的特点. 在汇编C语言程序时 ...
- 准备用有人云平台和tlink.io云平台和电脑做云转发
初步想的是用有人做国网电表转发,用tlink.io做综合采集模块转发,耗时一天 然后用tlink.io的做二次前端开发,耗时两天 用有人做二次前端开发,耗时两天 最后可以试试用常见的OPC公网转发到这 ...
- 2017-2018-1 20155326 《信息安全系统设计基础》第四周学习总结及myod改进版的补交
2017-2018-1 20155326 <信息安全系统设计基础>第四周学习总结及myod改进版的补交 学习内容 补充完成课上没有完成的内容 学习教材附录A,第十章内容 参考别出心裁的Li ...
- Azure DevOps Server: 使用Rest Api获取拉取请求Pull Request中的变更文件清单
需求: Azure DevOps Server 的拉取请求模块,为开发团队提供了强大而且灵活的代码评审功能.拉取请求中变更文件清单,对质量管理人员,是一个宝贵的材料.质量保障人员可以从代码清单中分析不 ...
- android 获取 imei号码
Imei = ((TelephonyManager) getSystemService(TELEPHONY_SERVICE)) .getDeviceId(); 1.加入权限 在manifest.xml ...