Echarts学习总结(一)-----柱状图
简介
ECharts,缩写来自Enterprise Charts,商业级数据图表,基于【HTML5】Canvas (ZRender),纯Javascript图表库,是百度的一个开源的数据可视化工具,业界给予了很多赞誉,这里不多说,需要了解详情的同学参见官网。我简略看了下,最贴切的地方在于本地化支持,比如对于中国地图的支持。
名词解释
基本名词
名词 | 描述 |
---|---|
chart | 是指一个完整的图表,如折线图,饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表,可能包括坐标轴、图例等 |
axis | 直角坐标系中的一个坐标轴,坐标轴可分为类目轴和数值轴 |
xAxis | 直角坐标系中的横轴,通常并默认为类目轴 |
yAxis | 直角坐标系中的纵轴,通常并默认为数值轴 |
grid | 直角坐标系中除坐标轴外的绘图网格 |
legend | 图例,表述数据和图形的关联 |
dataRange | 值域选择,常用于展现地域数据时选择值域范围 |
dataZoom | 数据区域缩放,常用于展现大数据时选择可视范围 |
toolbox | 辅助工具箱,辅助功能,如添加标线,框选缩放等 |
tooltip | 气泡提示框,常用于展现更详细的数据 |
timeline | 时间轴,常用于展现同一组数据在时间维度上的多份数据 |
series | 数据系列,一个图表可能包含多个系列,每一个系列可能包含多个数据 |
图表名词
名词 | 描述 |
---|---|
line | 折线图,堆积折线图,区域图,堆积区域图。 |
bar | 柱形图(纵向),堆积柱形图,条形图(横向),堆积条形图。 |
scatter | 散点图,气泡图。散点图至少需要横纵两个数据,更高维度数据加入时可以映射为颜色或大小,当映射到大小时则为气泡图 |
k | K线图,蜡烛图。常用于展现股票交易数据。 |
pie | 饼图,圆环图。饼图支持两种(半径、面积)南丁格尔玫瑰图模式。 |
radar | 雷达图,填充雷达图。高维度数据展现的常用图表。 |
chord | 和弦图。常用于展现关系数据,外层为圆环图,可体现数据占比关系,内层为各个扇形间相互连接的弦,可体现关系数据 |
force | 力导布局图。常用于展现复杂关系网络聚类布局。 |
map | 地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用,如室内地图、运动场、物件构造等。 |
引入Echarts的方式
echarts提供多种引入方式,请根据你的项目类型选择合适的方式:
1 模块化包引入
需要注意的是,包引入提供了开发阶段最大的灵活性,但并不适合直接上线,减少请求的文件数量是前端性能优化中最基本但很重要的规则,务必在上线时文件的连
接压缩。
require.config({packages:[{name:'echarts',location:'../js/echarts',main:'echarts'},{name:'zrender',location:'../js/zrender',//zrender与echarts,在同一级目录,模块化包引入
main:'zrender'}]});
首先下载Zrender到本地,和ECharts放在同一目录下。
在echarts/doc/example/www文件中建立一个HTML文件,所使用的js文件都包含在js文件中。 包含echarts.js、echarts-map.js、esl.js三个,其实只用到两个,echarts-map.js并不用。
2 模块化单文件引入(推荐)
如果你使用模块化开发但并没有自己的打包合并环境,或者说你不希望在你的项目里引入第三方库的源文件,我们建议你使用单文件引入,同模块化包引入一样,你需要熟悉模块化开发,这种方式只是我们预先帮你把常用图表组合连接合并在一起,你只需一个符合AMD规范的加载器,同时引入一个echarts相关js即可。如你所发现的,build文件夹下已经生成了不同组合的多个单文件见下,根据你的需求场景只需要使用其中一个即可:
例子: 在这里我们只是用line图表,其他的不用,如果你不用的话打包在一起就非常浪费,这时候就可以通过build目录下的build.js文件来构建一个更加贴身的echarts单文件。 总结来说模块化如何引入ECharts,你都需要如下4步: 1、引入一个模块加载器,如esl.js或者require.js 2、为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的) 3、为模块加载器配置echarts的路径,从当前页面链接到echarts.js,见上述说明 4、动态加载echarts然后在回调函数中开始使用(容我罗嗦一句,当你确保同一页面已经加载过echarts,再使用时直接require('echarts').init(dom)就行)
首先下载node下载完成后,安装好node。 打开build文件夹,看到如下文件:
这里我已经建立了一个新的build01.bat 就是单一生成echarts.js
node build.js optimize=true plain=false exclude=map output=echarts.js
当然也可以在终端里通过命令行参数方式运行 node.js构建脚本。
具体语法:
node build.js optimize=true exclude=map,force,line output=echarts.js plain=true
名称 | 描述 |
---|---|
optimize | 是否压缩, 默认false |
exclude | 不打包的图表,多个图表使用逗号分割, 默认使用所有图表 |
output | 输出打包地址,默认为echarts.js |
plain | 是否打包esl, 打包的话可以直接使用scripts标签引入, 默认false |
config-tpl.js文件修改为:
{ // appDir: './', baseUrl: '../src', name: 'echarts', packages: [ { name: 'zrender', location: '../../zrender/src', main: 'zrender' }, { name: 'echarts', location: '.', main: 'echarts' } ], include:[ 'echarts/chart/line' ], out: 'echarts.js'
}
完成后,将echarts.js拷贝到doc/example/www/js文件中,并将原有的覆盖
HTML配置如下:
require.config({ paths: { echarts: '../js/echarts', //echarts.js的路径 'echarts/chart/bar' : './js/echarts', // 把所需图表指向单文件 'echarts/chart/line': './js/echarts' } });
require.config配置后后就可以通过动态加载使用echarts。
require( [ 'echarts', 'echarts/chart/line', // 按需加载所需图表 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(domMain); var option = { ... } myChart.setOption(option); } );
3 标签式单文件引入
如果你的项目本身并不是基于模块化开发的,或者是基于CMD规范(如使用的是seajs),那么引入基于AMD模块化的echarts可能并不方便,我们建议你采用srcipt标签
式引入,忘掉require,srcipt标签引入echarts后将可以直接使用两个全局的命名空间:echarts,zrender,但是需要注意的是excanvas依赖body标签插入Canvas节点
去判断Canvas的支持,如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错,解决的办法就是把标签移动到body内(后)。
标签式引入环境中,常用模块的引用可通过命名空间直取,同模块化下的路径结构,如:
echarts.config = require('echarts/config'), zrender.tool.color = require('zrender/tool/color')
可以直接引入的单文件如下:
echarts.js : 经过压缩,包含除地图外的全部图表
echarts-original.js : 未压缩,可用于调试,包含除地图外的全部图表
echarts-map.js : 经过压缩,全图表,包含world,china以及34个省市级地图数据
echarts-original-map.js : 未压缩,可用于调试,全图表,包含world,china以及34个省市级地图数据
<script src="example/www2/js/echarts-plain.js"></script>
<script> var myChart = echarts.init(domMain); var option = { ... } myChart.setOption(option);
</script>
牛刀小试----代码解析柱状图
今天在学习Echarts练习时,总是在路径的配置上出现错误,作为入门,总结一下,在此分享给大家,希望有用。
ECharts主页: http://echarts.baidu.com/index.html
ECharts-2.2.0下载地址: http://echarts.baidu.com/build/echarts-2.2.0.zip
ECharts官方实例: http://echarts.baidu.com/doc/example.html
ECharts官方API文档: http://echarts.baidu.com/doc/doc.html
需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender,当然对于大部分图表而言不需要ZRender的,但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现,建议大家在下载ECharts时同时也要下载ZRender。
ZRender下载地址:http://ecomfe.github.io/zrender/index.html
1、项目结构
js文件夹: 下载了ECharts之后,解压缩,如解压后的根目录是echarts-2.2.0,则到echarts-2.2.0\doc\example\www路径下,把里面的js文件夹直接复制粘贴到项目的 WebRoot根目录下即可。ZRender插件放在与ECharts的同一目录下,即zrender-master\src
这里有以下几点需要说明:
l 所有的跟ECharts有关的文件全部都在echarts文件夹下
l echarts文件夹的内容分为两部分
1) 一部分是以echarts开头的js文件,这些文件全部来自于1.中的ECharts文件目录中的js文件夹下的文件,也就是1.中的图中红框标注的js下的文件。如下:
2) 另一部分是一个名为zrender的文件夹,这里需要特别注意的是该文件夹的命名必须为zrender,因为在echarts的js文件中对zrender的引用都是以zrender为根目录的,zrender文件夹的内容即为1.中zrender文件目录中的src文件夹下的内容,如下:
dem1:index.html:在WebRoot根目录下新建index.html
<!DOCTYPE html>
<html><head><title>ECharts</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="js/echarts.js"></script><script type="text/javascript">// 路径配置require.config({paths: {echarts: './js'}});// 使用require(['echarts','echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载'echarts/chart/line'],function (ec) {// 基于准备好的dom,初始化echarts图表var myChart = ec.init(document.getElementById('main')); var option = {tooltip: {show: true},legend: {data:['销量']},xAxis : [{type : 'category',data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]}],yAxis : [{type : 'value'}],series : [{name:"销量",type:"bar",data:[5, 20, 40, 10, 10, 20]},//折线图 { name:"销量", type:"line", data:[5, 20, 40, 10, 10, 20],//绘制平均线 markLine : { data : [ {type : 'average',name: '平均值'} ] }, //绘制最高最低点 markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } }]};// 为echarts对象加载数据 myChart.setOption(option); });</script>
</body></html>
dem2:echarts.jsp:同上
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>ECharts-基本线性图及其配置要求</title>
</head>
<body><!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--><!--Step:1 为ECharts准备一个具备大小(宽高)的Dom--><div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div><div id="mainMap" style="width:500px;height:500px;border:1px solid #ccc;padding:10px;"></div><!--Step:2 Import echarts.js--><!--Step:2 引入echarts.js--><script src="js/echarts.js"></script><script type="text/javascript">// Step:3 conifg ECharts's path, link to echarts.js from current page.// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径require.config({paths: {echarts: './js' //echarts.js所在的路径 }});// Step:4 require echarts and use it in the callback.// Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径require(['echarts','echarts/chart/bar','echarts/chart/line','echarts/chart/map'],function (ec) {//渲染ECharts图表 ,可单独写出来作为回调函数//--- 折柱 ---//图表渲染的容器对象 var chartContainer = document.getElementById("main"); //""、''这里均可以//加载图表 var myChart = ec.init(chartContainer); myChart.setOption({tooltip : {trigger: 'axis'},legend: {data:['蒸发量','降水量']},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true, type: ['line', 'bar']},restore : {show: true},saveAsImage : {show: true}}},calculable : true,xAxis : [{name : '月份',type : 'category',data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],yAxis : [{name : '数值',type : 'value',splitArea : {show : true}}],series : [{name:'蒸发量',type:'bar',data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name:'降水量',type:'bar',data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]}]});// --- 地图 ---var myChart2 = ec.init(document.getElementById('mainMap'));var option = {tooltip : {trigger: 'item',formatter: '{b}'},series : [{name: '中国',type: 'map',mapType: 'china',selectedMode : 'multiple',itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}}},data:[{name:'广东',selected:true}]}]};myChart2.setOption(option); // 为echarts对象加载数据 });</script>
</body>
</html>
完成以上的步骤后,把项目发布到服务器,在浏览器上访问echarts.jsp(由于本实例还没有跟后台进行交互,只是先做一个前台用法介绍,所以可以把echart.jsp直接修改成echarts.html文件,把它跟js文件夹放在同一级目录下,然后直接用浏览器打开echarts.html),即可看到效果。好了,这次总结就先到这里!
转载于:https://www.cnblogs.com/whsa/p/4329996.html
Echarts学习总结(一)-----柱状图相关推荐
- 【ECharts学习】—实现我的第一个图表
[ECharts学习]-实现我的第一个图表 <!DOCTYPE html> <html lang="en"><head><meta cha ...
- echarts学习1----格式整理以及地图入门
首先,Echarts是结合html/ javascript一起运用的,可以在线也可以离线使用. 下面是一个.html文件的代码及解析: <!DOCTYPE html> <head&g ...
- Echarts学习记录——如何去掉网格线及网格区域颜色
关键属性 splitLine和splitArea,可以设置相关的属性 示例代码 <!DOCTYPE html> <html lang="en"> <h ...
- echarts 水桶注水式柱状图
Echarts 水桶注水式柱状图 效果图 代码: <html> <head><title></title> </head> <styl ...
- 【ECharts学习】—实现中国地图
[ECharts学习]-实现中国地图 使用Echarts进行地图绘制展示的时候,需要china.js的引入,我把它放在百度网盘里了,需要的自取 点我跳转到百度网盘 提取码:clby <!DOCT ...
- echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
- echarts如何显示多个柱形图_使用echarts画多维柱状图
前言 在此之前,已经跟大家分享了如何使用echarts画折线图.双折线图.柱状图,今天跟大家分享一下使用echarts画多维柱状图. 使用echarts遇到过的坑: 一定要给图表容器添加宽度与高度. ...
- 绘制3D Echarts地图 饼图 堆叠柱状图
绘制3D Echarts 目前在项目中遇到过的3D echarts为: 1.3D饼图(圆环图) 2.3D区域地图 3.3D堆叠柱状图. 1.echarts + echarts-gl => 绘制3 ...
- echarts学习笔记1
可视化面板介绍 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. [外链图片转存失败,源站可 ...
最新文章
- 配置flutter For IOS
- ogr2ogr: Export Well Known Text (WKT) for one feature to a CSV file
- 联想服务器DL388eu盘装系统,服务器价格指导 10月双路机架产品导购
- 密度聚类(Density peaks Clustering)Python实现
- hadoop1.2.1安装配置
- node.js热部署
- 在WebIDE里导入SAP Fiori应用
- Exchange Server 2016管理系列课件50.DAG管理之激活数据库副本
- Java中try catch finally语句中含有return语句的执行情况
- elastic search与mysql的数据同步
- 大数据workshop:《云数据·大计算:海量日志数据分析与应用》之《社交数据分析:好友推荐》篇...
- 气象要素空间插值分析
- pod的介绍、命令行创建pod
- HTML+JS调用摄像头
- ClearCase的一些基本概念
- 从《牛津高阶英汉词典》中提取单词(2)
- 使用 wpa_supplicant 连接 WiFi
- SQL SERVER 取得某月第一天
- linux安装sas raid驱动,windows 2008 安装raid驱动|windows 2008安装sas硬盘驱动
- SPSS MODELER
热门文章
- 语音模块开发——YS-LDV7 语音识别模块
- 通过ip获取地理位置
- 钉钉与wcp集成通知【原创】
- 关于1000桶水,其中一桶有毒,猪喝毒水后会在15分钟内死去,想用一个小时找到这桶毒水,至少需要几头猪?的问题
- High-speed Charting Control(MFC绘图控件)--MFC绘图Demo(包含鼠标响应)
- 大商创是用哪种php柜架写的,手把手教你做一套大商创店铺模板(1.9版)
- 【最全面教程】搞定配置MySQL的各种幺蛾子!!
- 微米纳米机器人 课件_部编版四年级语文下册7 纳米技术就在我们身边ppt课件1(共23张ppt)...
- 计算机定时关机教程,1分钟学会 如何让电脑定时关机,定时开机!
- 服务器定时开机设置方法