Echarts学习总结(一) | 您所在的位置:网站首页 › 柱状图描述时要注意的几个点 › 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个省市级地图数据 var myChart = echarts.init(domMain); var option = { ... } myChart.setOption(option);牛刀小试----代码解析柱状图 今天在学习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 ECharts // 路径配置 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); } );
dem2:echarts.jsp:同上 ECharts-基本线性图及其配置要求 // 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对象加载数据 } );完成以上的步骤后,把项目发布到服务器,在浏览器上访问echarts.jsp(由于本实例还没有跟后台进行交互,只是先做一个前台用法介绍,所以可以把echart.jsp直接修改成echarts.html文件,把它跟js文件夹放在同一级目录下,然后直接用浏览器打开echarts.html),即可看到效果。好了,这次总结就先到这里!
|
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |