图表 Echarts 3.0 简单使用
2019独角兽企业重金招聘Python工程师标准>>>
Echarts(Enterprise Charts) 3.0 介绍
ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化
官网:http://echarts.baidu.com/index.html
打开官网,非常简洁的页面,首页描述了Echarts3.0 与2.0 的对比,文件体积缩小,自适用,专属的移动端交互体验
Echarts(Enterprise Charts) 3.0 使用
1. 引入Js文件
2. 创建容器
3. JS中实例化图表对象通过 echart.init('容器对象')
4. 配置参数Option
5. 给图表对象传入Option 参数 (注意Js的调用时间问题,一定要在dom完毕后才能调用,否则会出现dom 不存在的问题,H5中建议将JS写在文档后)
6. 参数说明
a)标题常用配置(可添加子标题)
b)工具箱配置(可以自定义工具,自带的工具,下载图处,查看数据视图,切换类型,缩放)
c)提示框组件
通过控制台打印params,可以看到包含的信息很丰富,根据需要获取。
一般使用自带的就行了,自带的变量跟图表类型有关
折线(区域)图、柱状(条形)图、K线图 :
{a}
(系列名称),{b}
(类目值),{c}
(数值),{d}
(无)散点图(气泡)图 :
{a}
(系列名称),{b}
(数据名称),{c}
(数值数组),{d}
(无)地图 :
{a}
(系列名称),{b}
(区域名称),{c}
(合并数值),{d}
(无)饼图、仪表盘、漏斗图:
{a}
(系列名称),{b}
(数据项名称),{c}
(数值),{d}
(百分比)formatter: '{b0}: {c0}<br />{b1}: {c1}'
d)图例组件
点击图例时,对应的系例会消失
e)x轴,y轴
可以设置多轴,一般默认就行了 注意:不是所有图类型有坐标轴,
f) 系列(核心)
按类型来,具体查配置手册
如有多个系列,则需要在series中配置多个子数据。
g)grid 组件
暂时知道 调整坐标区位置,多个坐标,在2.0中只能有一个grid 但在3.0中可以有存在多个
h) 调色盘
color: ['#4F81BC', '#00AF50', '#FFC000'] // 设置一组全局的颜色,每个系列会依次从color中取对应的颜色
7. 图表对象的方法
a) 事件
通过 对象.on('事件',function(){}); 形式绑定跟Jquery 中一致 off 解绑事件
b) setOption 通过该方法设置option方法
c) resize 重新绘制图表,有时dom是隐藏的,当显示时,需要重新绘制
以上是一些基础用法,官网也有实例,另外有一个可视配置的,实时查看的效果,如果对其它图表如highcharts的配置差不多,当然商业的图表功能会更强大,如3D图都很炫
另外Echarts是支持拖拽计算,多表联动的高级特性
支持的图表,除了普通的折线,饼图,柱状图,散点 还支持雷达图,k线图,地图(以前项目中用过),仪表盘,漏斗图(这个设计的貌似不是很好,明明就是倒三角型),等等。
如何与后台数据交互就通过JS处理吧。
var dome1Option = {title:{text : 'ECharts 入门示例', // 标题show : true, // 是否显示link : 'http://www.baidu.com', // linktarget: '_blank', // 指定窗口打开主标题超链接textStyle:{ // 设置 标题样式color:'red'},left:'center', // 水平位置 'left', 'center', 'right' 也可以是具体值top:'auto' // 同上},toolbox: { // 工具箱show: true,orient:'horizontal', // 布局水平还是垂直 verticalfeature:{ saveAsImage:{ // 保存为图片type:'png', // 类型name:'my', // 文件名 default titleshow:true,title:'保存为图片'},magicType:{ // 切换图类型show:true,type: ['line','bar'], // 折线图,柱状图title:'切换'}}},tooltip:{formatter: function(params){ // 自己实现定制化提醒 params中包含所需信息console.log(params);return 'Loading';}},legend: {data:['销量'], // 图例,一般和系列名一致textStyle:{ }, // 样式orient:'horizontal', // 布局left:'center', // centertop:'25' // 距容器top},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], // 仅在category 中有效name: '类别', // 坐标轴名type: 'category' , // 类型 value数值 category类目 time时间nameLocation:'start' , // 坐标轴名称显示位置 start,middle,endmin:'auto', // 最小值max:'auto', // 最大值 auto 表示自动计算axisLine:{ // 是否显示x轴线show:true,lineStyle:{color:'red'}},nameTextStyle:{}, // 名称样式splitLine:{show:false} // 不显示轴线},yAxis: {splitLine:{show:false}},series: [{name: '销量', // 系列名type: 'bar', // 类型data: [5, 20, 36, 10, 10, 20], // 数据label:{normal:{show:true,position:'inside',formatter:function(params){console.log(params); // 输出参数return params.value; // 模板变量有 {a}, {b},{c},分别表示系列名,数据名,数据值}}},itemStyle:{}, // 配置轴样式stack:null // 数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。}],grid:{show:false,left:'6%',top:'13%',containLabel:true // 为true时,标签一定显示出来,当left为auto时好像没有效果}}
转载于:https://my.oschina.net/SpringZhang/blog/675217
图表 Echarts 3.0 简单使用相关推荐
- Canvas or SVG?一张好图,两手准备,就在 ECharts 4.0
Canvas 和 SVG 是两大基于浏览器的渲染方案,在选择图表库的时候,用户有时也会在这两者之间纠结.但是纠结的时候,你是否真的明白这两者在哪些方面有优劣? ECharts 4.0 推出 Canva ...
- echart旭日图_海报级设计感的旭日图,就在 ECharts 4.0
2018 年 1 月 16 日 ECharts 发布了 4.0,其中包括一种新的图表系列--旭日图. 普通旭日图: 文艺旭日图: 2B 旭日图--这货真的长得像个旭日啊 щ(゚Д゚щ): 可能大家印象 ...
- 可视化了解一下?ECharts 4.0最全技术攻略
2018 年 1 月 16 日,百度 EFE团队正式发布了旗下知名开源产品 ECharts 的最新大版本 4.0,新版本在产品的性能.功能.易用性等各个方面进行了全面提升,标志着百度在可视化领域又一突 ...
- Unity数据可视化图表插件XCharts3.0发布
Unity数据可视化图表插件XCharts3.0发布 历时8个多月,业余时间,断断续续,XCharts3.0 总算发布了.如果要打个满意度,我给 3.0 版本来个80分. 对于代码框架结构设计的调整改 ...
- PTC Mathcad Prime7.0,简单易用的用户界面
PTC Mathcad Prime7.0,简单易用的用户界面 PTC MathCAD是执行复杂数学计算和分析的理想软件.所有工程,数学和计算学科的心脏跳动.在产品达到运营和批量生产阶段之前,它会经历许 ...
- moloch1.8.0简单操作手册
moloch1.8.0简单操作手册 Sessions 页面:Sessions主要通过非常简单的查询语言来构建表达式追溯数据流量,以便分析. SPIView 页面: SPIGraph页面:SPIGrap ...
- ECharts 3.0底层zrender 3.x源码分析1-总体架构
zrender是一个轻量级的Canvas类库,作为百度Echarts 3.0的底层基础.截至目前查看的zrender源码和文档,包括官网文档都还停留在2.x时代,我打算用一个系列介绍下zrender ...
- uniapp中使用echarts-百度图表 echarts
在uniapp插件搜索:https://ext.dcloud.net.cn/search?q=echarts 结果: 1. 不是全端兼容.可以上网搜使用案例,而且有很多.(关键是我用了,可能没用好,一 ...
- Echarts V5.0版本学习
Echarts 年前又上线V5.0版本,赶紧学起来 新旧版本对比:个人感觉新版本Echarts 更加好看 点击图表也加入动画效果 细节满分 相对于旧版本简直一个天上(高大上更炫酷) 一个地下(low货 ...
最新文章
- ios 项目的.gitignore
- 【Matlab 控制】构建系统,绘制零极点
- 用来处理python字典的方法_python字典的常用方法总结
- 第四大运营商正式申请5G牌照,三大运营商如何应对?
- 工作31:传参对接口
- 云+X案例展 | 民生类:智领云数据中台为“健康武汉”增砖添瓦
- 《从入门到精通云服务器》-4
- 表格列数太多 页面怎么设计_B端产品设计规范分享
- 自动修改mysql5.7初始化密码
- FoneDog Toolkit for Android如何从Android恢复丢失的文件
- 校验php语法是否正确,PHP正则校验email语法详解
- 日志易——中国版的splunk
- 百度,高德地图经纬度转换
- python和工程造价_不会Python的将慢慢被淘汰!
- Python运行出现“No module named ‘requests‘”
- NAACL 2022 | 具有元重加权的鲁棒自增强命名实体识别技术
- 【精华帖】使用PS将图片背景变透明
- 高等数学——导数的定义和常见导数
- [Paper Reading] Dynamo: Amazon‘s Highly Available Key-value Store
- 车载开发之CarLife CarPlay HiCar