Echart使用心得

1.  EChart最新的文档目录。

首先创建一个解决方案，目录如下：

之前的一篇文章中讲到如果要使用Echarts还要下载相关的ZRender的渲染包，最新的版本已经将这些合并在一起了，只需要引用图中红框标注的echarts文件夹下的文件即可。各文件的作用如下：

l  Echarts-map.js :主要用来渲染跟地图相关

l  Echarts.js :基本的常规图形相关

l  Esl.js :图像引擎

Statics文件夹下的ECharts.js文件，为我自己抽象总结出来的用于Echarts的配置文件加载、数据处理、初始化各种图像类型的配置、图像渲染的一些方法。

2.  抽象之后的Echarts。

根据Echarts官网的讲解，我把Echarts的使用归结为一下的几个步骤，同时这些步骤相应的实现对应到Statics文件夹下的Echarts.js，该文件的主要代码目录如下：

[javascript] view
plain copy

  1. Var ECharts={
  2. ChartConfig:function(container,option){ …..},//加载Echarts配置文件
  3. ChartDataFormate:{….},//数据格式化
  4. ChartOptionTemplates:{….},//初始化常用的图表类型
  5. Charts:{ RenderChart:function(option){….},//渲染图表
  6. RenderMap:function(option){…}//渲染地图
  7. }
  8. }；

　　

2.1 Echarts配置文件的引入

在开始使用时，首先需要引入Echarts 的配置文件，也就是要加载基本的图像类型，我们可以在每一个页面都引入，但是这样抽象化程度不高，重复使用率也不高，只需要有一个配置项在每次引用的时候加载一下即可，对应到具体的代码实现，如下：

[javascript] view
plain copy

  1. ChartConfig: function (container, option) { //container:为页面要渲染图表的容器，option为已经初始化好的图表类型的option配置
  2. var chart_path = "/Statics/echarts/echarts"; //配置图表请求路径
  3. var map_path = "/Statics/echarts/echarts-map";//配置地图的请求路径
  4. require.config({//引入常用的图表类型的配置
  5. paths: {
  6. echarts: chart_path,
  7. ‘echarts/chart/bar‘: chart_path,
  8. ‘echarts/chart/pie‘: chart_path,
  9. ‘echarts/chart/line‘: chart_path,
  10. ‘echarts/chart/k‘: chart_path,
  11. ‘echarts/chart/scatter‘: chart_path,
  12. ‘echarts/chart/radar‘: chart_path,
  13. ‘echarts/chart/chord‘: chart_path,
  14. ‘echarts/chart/force‘: chart_path,
  15. ‘echarts/chart/map‘: map_path
  16. }
  17. });
  18. this.option = { chart: {}, option: option, container: container };
  19. return this.option;
  20. }

　　

2.2 数据格式化

为了能够更好的展现各种的数据，在进行图表的option配置之前，需要先对从后台请求过来的数据进行格式化。后台返回的数据必须是json格式的数据，且数据类型只能为以下两种类型:

Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}….]

Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]

具体的代码实现如下：

[javascript] view
plain copy

  1. ChartDataFormate: {
  2. FormateNOGroupData: function (data) {//data的格式如上的Result1，这种格式的数据，多用于饼图、单一的柱形图的数据源
  3. var categories = [];
  4. var datas = [];
  5. for (var i = 0; i < data.length; i++) {
  6. categories.push(data[i].name || "");
  7. datas.push({ name: data[i].name, value: data[i].value || 0 });
  8. }
  9. return { category: categories, data: datas };
  10. },
  11. FormateGroupData: function (data, type, is_stack) {//data的格式如上的Result2，type为要渲染的图表类型：可以为line，bar，is_stack表示为是否是堆积图，这种格式的数据多用于展示多条折线图、分组的柱图
  12. var chart_type = ‘line‘;
  13. if (type)
  14. chart_type = type || ‘line‘;
  15. var xAxis = [];
  16. var group = [];
  17. var series = [];
  18. for (var i = 0; i < data.length; i++) {
  19. for (var j = 0; j < xAxis.length && xAxis[j] != data[i].name; j++);
  20. if (j == xAxis.length)
  21. xAxis.push(data[i].name);
  22. for (var k = 0; k < group.length && group[k] != data[i].group; k++);
  23. if (k == group.length)
  24. group.push(data[i].group);
  25. }
  26. for (var i = 0; i < group.length; i++) {
  27. var temp = [];
  28. for (var j = 0; j < data.length; j++) {
  29. if (group[i] == data[j].group) {
  30. if (type == "map")
  31. temp.push({ name: data[j].name, value: data[i].value });
  32. else
  33. temp.push(data[j].value);
  34. }
  35. }
  36. switch (type) {
  37. case ‘bar‘:
  38. var series_temp = { name: group[i], data: temp, type: chart_type };
  39. if (is_stack)
  40. series_temp = $.extend({}, { stack: ‘stack‘ }, series_temp);
  41. break;
  42. case ‘map‘:
  43. var series_temp = {
  44. name: group[i], type: chart_type, mapType: ‘china‘, selectedMode: ‘single‘,
  45. itemStyle: {
  46. normal: { label: { show: true} },
  47. emphasis: { label: { show: true} }
  48. },
  49. data: temp
  50. };
  51. break;
  52. case ‘line‘:
  53. var series_temp = { name: group[i], data: temp, type: chart_type };
  54. if (is_stack)
  55. series_temp = $.extend({}, { stack: ‘stack‘ }, series_temp);
  56. break;
  57. default:
  58. var series_temp = { name: group[i], data: temp, type: chart_type };
  59. }
  60. series.push(series_temp);
  61. }
  62. return { category: group, xAxis: xAxis, series: series };
  63. },

　　

[javascript] view
plain copy

　　

2.3 各种图表类型的配置初始化

在通过2.2步骤将从后台获得的数据进行初始化之后，我们就可以进行图表的option的配置了，在这里我主要对常用的饼图、柱图（单一、分组、堆积柱图）、折线图（分组、堆积折线图）、柱图+折线（增幅）图、中国地图等图进行了配置项的初始化。具体实现如下：

[javascript] view
plain copy

  1. ChartOptionTemplates: {
  2. CommonOption: {//通用的图表基本配置
  3. tooltip: {
  4. trigger: ‘axis‘//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发
  5. },
  6. toolbox: {
  7. show: true, //是否显示工具栏
  8. feature: {
  9. mark: true,
  10. dataView: { readOnly: false }, //数据预览
  11. restore: true, //复原
  12. saveAsImage: true //是否保存图片
  13. }
  14. }
  15. },
  16. CommonLineOption: {//通用的折线图表的基本配置
  17. tooltip: {
  18. trigger: ‘axis‘
  19. },
  20. toolbox: {
  21. show: true,
  22. feature: {
  23. dataView: { readOnly: false }, //数据预览
  24. restore: true, //复原
  25. saveAsImage: true, //是否保存图片
  26. magicType: [‘line‘, ‘bar‘]//支持柱形图和折线图的切换
  27. }
  28. }
  29. },
  30. Pie: function (data, name) {//data:数据格式：{name：xxx,value:xxx}...
  31. var pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);
  32. var option = {
  33. tooltip: {
  34. trigger: ‘item‘,
  35. formatter: ‘{b} : {c} ({d}/%)‘,
  36. show: true
  37. },
  38. legend: {
  39. orient: ‘vertical‘,
  40. x: ‘left‘,
  41. data: pie_datas.category
  42. },
  43. series: [
  44. {
  45. name: name || "",
  46. type: ‘pie‘,
  47. radius: ‘65%‘,
  48. center: [‘50%‘, ‘50%‘],
  49. data: pie_datas.data
  50. }
  51. ]
  52. };
  53. return $.extend({}, ECharts.ChartOptionTemplates.CommonOption, option);
  54. },
  55. Lines: function (data, name, is_stack) { //data:数据格式：{name：xxx,group:xxx,value:xxx}...
  56. var stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data, ‘line‘, is_stack);
  57. var option = {
  58. legend: {
  59. data: stackline_datas.category
  60. },
  61. xAxis: [{
  62. type: ‘category‘, //X轴均为category，Y轴均为value
  63. data: stackline_datas.xAxis,
  64. boundaryGap: false//数值轴两端的空白策略
  65. }],
  66. yAxis: [{
  67. name: name || ‘‘,
  68. type: ‘value‘,
  69. splitArea: { show: true }
  70. }],
  71. series: stackline_datas.series
  72. };
  73. return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
  74. },
  75. Bars: function (data, name, is_stack) {//data:数据格式：{name：xxx,group:xxx,value:xxx}...
  76. var bars_dates = ECharts.ChartDataFormate.FormateGroupData(data, ‘bar‘, is_stack);
  77. var option = {
  78. legend: bars_dates.category,
  79. xAxis: [{
  80. type: ‘category‘,
  81. data: bars_dates.xAxis,
  82. axisLabel: {
  83. show: true,
  84. interval: ‘auto‘,
  85. rotate: 0,
  86. margion: 8
  87. }
  88. }],
  89. yAxis: [{
  90. type: ‘value‘,
  91. name: name || ‘‘,
  92. splitArea: { show: true }
  93. }],
  94. series: bars_dates.series
  95. };
  96. return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
  97. },
  98. ……..//其他的图表配置，如柱图+折线、地图
  99. ……..
  100. }

　　

　　

2.4 图形的渲染

在配置好图表类型的option之后，就可进行图表的渲染了，具体的代码实现如下：

[javascript] view
plain copy

  1. Charts: {
  2. RenderChart: function (option) {
  3. require([
  4. ‘echarts‘,
  5. ‘echarts/chart/line‘,
  6. ‘echarts/chart/bar‘,
  7. ‘echarts/chart/pie‘,
  8. ‘echarts/chart/k‘,
  9. ‘echarts/chart/scatter‘,
  10. ‘echarts/chart/radar‘,
  11. ‘echarts/chart/chord‘,
  12. ‘echarts/chart/force‘,
  13. ‘echarts/chart/map‘
  14. ],
  15. function (ec) {
  16. echarts = ec;
  17. if (option.chart && option.chart.dispose)
  18. option.chart.dispose();
  19. option.chart = echarts.init(option.container);
  20. window.onresize = option.chart.resize;
  21. option.chart.setOption(option.option, true);
  22. });
  23. },
  24. ……..//渲染其他的图表类型，如：地图
  25. ……..
  26. }

　　

3.  具体页面的使用

经过2步骤中的一些列的配置、处理、初始化，我们就可以具体的使用了，在每一个aspx页面使用之前，我们首先需要在页面的标题引入以下的文件：

[javascript] view
plain copy

  1. <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  2. <script src="/Statics/echarts/esl.js" type="text/javascript"></script>
  3. <script src="/Statics/ECharts.js" type="text/javascript"></script>

　　

引入之后就可进行使用了，下面演示几个常用的图表的使用：

首页每个aspx页面上都有一个div用来做渲染图表的容器，如下：

<div id="echart" style="width:100%; height:400px;"></div>

3.1 饼图

3.1.1 实现代码

[javascript] view
plain copy

  1. <script type="text/javascript">
  2. $(
  3. function () {
  4. var data = [{ name: ‘olive‘, value: 20 }, { name: ‘only‘, value: 20 }, { name: ‘momo‘, value: 20}];
  5. var option = ECharts.ChartOptionTemplates.Pie(data);
  6. var container = $("#echart")[0];
  7. opt = ECharts.ChartConfig(container, option);
  8. ECharts.Charts.RenderChart(opt);
  9. }
  10. );
  11. </script>

　　

3.1.2 展示效果

3.2 柱图

3.2.1 实现代码

[javascript] view
plain copy

  1. <script type="text/javascript">
  2. $(
  3. function () {
  4. var data = [{ name: ‘olive‘, value: 20 }, { name: ‘only‘, value: 20 }, { name: ‘momo‘, value: 20}];
  5. var option = ECharts.ChartOptionTemplates.Bar(data);
  6. var container = $("#echart")[0];
  7. opt = ECharts.ChartConfig(container, option);
  8. ECharts.Charts.RenderChart(opt);
  9. }
  10. );
  11. $(
  12. function () {
  13. var data = [{ name: ‘2014-01‘, value: 20, group: ‘A‘ }, { name: ‘2014-01‘, value: 40, group: ‘B‘ }, { name: ‘2014-02‘, value: 30, group: ‘A‘ }, { name: ‘2014-02‘, value: 10, group: ‘B‘ }, { name: ‘2014-03‘, value: 200, group: ‘A‘ }, { name: ‘2014-03‘, value: 60, group: ‘B‘ }, { name: ‘2014-04‘, value: 50, group: ‘A‘ }, { name: ‘2014-04‘, value: 45, group: ‘B‘ }, { name: ‘2014-05‘, value: 110, group: ‘A‘ }, { name: ‘2014-05‘, value: 80, group: ‘B‘ }, { name: ‘2014-06‘, value: 90, group: ‘A‘ }, { name: ‘2014-06‘, value: 60, group: ‘B‘}];
  14. var option = ECharts.ChartOptionTemplates.Bars(data,‘Love‘);
  15. var container = $("#echart")[0];
  16. opt = ECharts.ChartConfig(container, option);
  17. ECharts.Charts.RenderChart(opt);
  18. var option = ECharts.ChartOptionTemplates.Bars(data, ‘Love‘, true);
  19. var container = $("#echart1")[0];
  20. opt = ECharts.ChartConfig(container, option);
  21. ECharts.Charts.RenderChart(opt);
  22. }
  23. );
  24. </script>

　　

3.2.2展示效果

3.3 折线图

3.3.1 实现代码

[javascript] view
plain copy

  1. <script type="text/javascript">
  2. $(function () {
  3. var data = [
  4. { name: ‘2013-01‘, group: ‘olive‘, value: 116 },
  5. { name: ‘2013-01‘, group: ‘momo‘, value: 115 },
  6. { name: ‘2013-01‘, group: ‘only‘, value: 222 },
  7. { name: ‘2013-01‘, group: ‘for‘, value: 324 },
  8. { name: ‘2013-02‘, group: ‘olive‘, value: 156 },
  9. { name: ‘2013-02‘, group: ‘momo‘, value: 185 },
  10. { name: ‘2013-02‘, group: ‘only‘, value: 202 },
  11. { name: ‘2013-02‘, group: ‘for‘, value: 34 },
  12. { name: ‘2013-03‘, group: ‘olive‘, value: 16 },
  13. { name: ‘2013-03‘, group: ‘momo‘, value: 51 },
  14. { name: ‘2013-03‘, group: ‘only‘, value: 22 },
  15. { name: ‘2013-03‘, group: ‘for‘, value: 84 }
  16. ];
  17. var opt = HighChart.ChartOptionTemplates.Line(data, ‘Love-Rate‘, "折线图示例");
  18. var container = $("#container");
  19. HighChart.RenderChart(opt, container);
  20. });
  21. $(
  22. function () {
  23. var data = [{ name: ‘2014-01‘, value: 20, group: ‘A‘ }, { name: ‘2014-01‘, value: 40, group: ‘B‘ }, { name: ‘2014-02‘, value: 30, group: ‘A‘ }, { name: ‘2014-02‘, value: 10, group: ‘B‘ }, { name: ‘2014-03‘, value: 200, group: ‘A‘ }, { name: ‘2014-03‘, value: 60, group: ‘B‘ }, { name: ‘2014-04‘, value: 50, group: ‘A‘ }, { name: ‘2014-04‘, value: 45, group: ‘B‘ }, { name: ‘2014-05‘, value: 110, group: ‘A‘ }, { name: ‘2014-05‘, value: 80, group: ‘B‘ }, { name: ‘2014-06‘, value: 90, group: ‘A‘ }, { name: ‘2014-06‘, value: 60, group: ‘B‘}];
  24. var option = ECharts.ChartOptionTemplates.Lines(data,‘lines‘,false);
  25. var container = $("#echart")[0];
  26. opt = ECharts.ChartConfig(container, option);
  27. ECharts.Charts.RenderChart(opt);
  28. var option = ECharts.ChartOptionTemplates.Lines(data, ‘lines‘, true);
  29. var container = $("#echart1")[0];
  30. opt = ECharts.ChartConfig(container, option);
  31. ECharts.Charts.RenderChart(opt);
  32. }
  33. );
  34. </script>

　　

3.3.2展示效果

3.4 柱图+折线（增幅）图

3.4.1 展示效果

3.5 地图

3.5.3 展示效果

到这里，基本就把echart的抽象跟使用讲完了，因为时间的关系，还有一些图形的配置、数据处理没有列出代码，但是基本上实现都差不多。希望能给大家带来一些帮助和启发。后续会继续推出HightCharts的抽象使用，敬请期待。

时间： 2024-10-27 02:31:21

Echart使用心得的相关文章

HighCharts使用心得

HighCharts使用心得 前言: 之前很早的一个项目中使用过highcharts,感觉挺方便的,图表类型也比较丰富,而且还支持数据的下钻,但是如果投入商业使用的话还会有一些版权的问题,所以后来就使用了EChart,这是百度开发的一个开源的图表插件,图表类型也很丰富,而且还有交互,对地图的支持也很好,可以免费的使用.在之前的一篇文章里,已经总结过了,今天主要跟大家分享一下,之前总结的Highcharts的一些使用心得,希望能够对大家有所帮助. 1.  准备工作------下载HighChart

Echarts使用心得总结（二）

Echarts使用心得总结(二) 前言: 前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一下.之前写过一篇相关的文章,当时主要是讲了如何引入.使用Echart,最新的Echart版本已经发布,之前讲的很多文件都可以删除了,下边会一一给大家细讲. 为了更好的讲解如何使用这个图形渲染插件,我会通过创建一个解决方案的形式一点点给大家讲解清楚. 1.  EChart最新的文档目录. 首先创建一个解决方案

Delphi组件indy 10中IdTCPServer修正及SSL使用心得

indy 10终于随着Delphi2005发布了,不过indy套件在我的印象中总是复杂并且BUG不断,说实话,不是看在他一整套组件的面子上,我还是喜欢VCL原生的Socket组件,简洁,清晰.Indy9发展到了indy10几乎完全不兼容,可叹啊.言归正传.在使用IdTCPServer组件的时候发现了他的漏洞,他的OnConnec,OnExecute,OnDisconnect等事件是在其他线程中执行的,通常情况下这没有问题,但是在特殊的情况下会造成问题,如果其他部分的程序写得有问题就会出现漏洞.

Linux系统理解以及Linux系统学习心得

原创作品转载请注明出处  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 作者:严哲璟 说一下我对Linux系统的理解 1.加载Linux内核准备:在加载基本输入输出模块(BIOS)之后,从磁盘的引导扇区读入操作系统的代码文件块到内存中,之后开始整个系统的初始化. 2.main.c的start_kernel函数是整个操作系统的入口,这也与Linux是基于C语言的特性相符,start_kernel具体做的动作很多

参加老男孩linux培训心得

参加老男孩linux培训心得 时间如白驹过隙,已经不知不觉来到老男孩培训已经三个月了.在这三个月中我渐渐得到了成长,专业技术成长,以及为人处事之道与思想的提高. 我一共就总结以下了三点     一.思想 在我刚来老男孩的时候,老师天天上课前讲一段思想,我当时不太明白,不赶紧上课,讲这干啥呢?而且老师早一点讲完,又可以招下一批学生了,老讲思想,这不是自断财路么?随着时间的流逝,渐渐的我悟懂了点.人在那里都可以学技术,但是学会了技术没有思想,一旦来了新事物,就会接受的很慢.尤其在互联网这个圈子里,软

Linux串口IO模式的一些心得

众所周知,在Linux系统下所有设备都是以文件的形式存在,串口也一样. 通常I/O操作都是有阻塞与非阻塞的两种方式. 其中"超时"这个概念其实是阻塞中的一种处理手段,本质还是属于阻塞的I/O模式. 在Linux中串口的IO操作 本文将它分为三种状态: 阻塞状态 超时状态 非阻塞状态 这三种状态的转换组合有这么几种: 阻塞 --> 超时 阻塞 --> 非阻塞 超时 --> 阻塞 超时 --> 非阻塞 非阻塞 --> 阻塞 我们一个一个来分析 首先在一个串口的

我的MYSQL学习心得（八）

我的MYSQL学习心得(八) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL学习心得(五) 我的MYSQL学习心得(六) 我的MYSQL学习心得(七) 这一篇<我的MYSQL学习心得(七)>将会讲解MYSQL的插入.更新和删除语句 同样的,只会讲解跟SQLSERVER不同的地方 插入 将多行查询结果插入到表中 语法 INSERT INTO table_name1(column_list1) SELECT (

《不要让我思考》读后心得2

---内容开始--- Don't let me think! 这本书以网站可用性为目的,从作者自身工作和经验角度,站在用户的心理立场上,介绍了作为设计者如何做出可用性的web设计. 其中包含的内容有: 1.别让我思考(定律) 当看到一个不需要思考的网站时: 当看到一个要思考的网站时: @创建一个网站时,要去掉这些问号. 有时候网站会强迫我们思考,名字,常见的罪魁祸首就是改成自以为很酷很聪明的,带有营销色彩的名字. 还有另一个来源是看起来不太明显的链接和按钮,会造成用户犹豫可不可点. @类似的例子

【管理心得之二十二】小人物 仰视 大授权

场景再现====================Boss:小王,来我办公室一下.小王: 嗯Boss:近期总公司有会,需要到外地出差几日.我不在的这段期间里,公司大小事务你帮忙处理一下.          如果有什么难决定的事,第一时间电话.邮件联系我商定即可.小王:  明白.放心吧领导,绝不会让你失望的Boss:嗯,那就好,没事了. {小王走出办公室} 心中暗喜,"难道这就是传说中的授权,Boss不在的时候,我岂不是最高权力的行使者." ==================== 从场景