CSDN开源夏令营 百度数据可视化实践 ECharts（6） 期中总结 - code06网Echarts使用心得总结（二）
Echarts使用心得总结（二）
前一段时间一直都挺忙的，各种事，也没来得及每周的总结，趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下，趁着周末跟大家分享一下。之前写过一篇相关的文章，当时主要是讲了如何引入、使用Echart，最新的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，该文件的主要代码目录如下：
Var ECharts={
ChartConfig:function(container,option){ …..},//加载Echarts配置文件
ChartDataFormate:{….},//数据格式化
ChartOptionTemplates:{….},//初始化常用的图表类型
Charts:{ RenderChart:function(option){….},//渲染图表
RenderMap:function(option){…}//渲染地图
Echarts配置文件的引入
在开始使用时，首先需要引入Echarts
的配置文件，也就是要加载基本的图像类型，我们可以在每一个页面都引入，但是这样抽象化程度不高，重复使用率也不高，只需要有一个配置项在每次引用的时候加载一下即可，对应到具体的代码实现，如下：
ChartConfig: function (container, option) { //container:为页面要渲染图表的容器，option为已经初始化好的图表类型的option配置
var chart_path = "/Statics/echarts/echarts"; //配置图表请求路径
var map_path = "/Statics/echarts/echarts-map";//配置地图的请求路径
require.config({//引入常用的图表类型的配置
echarts: chart_path,
'echarts/chart/bar': chart_path,
'echarts/chart/pie': chart_path,
'echarts/chart/line': chart_path,
'echarts/chart/k': chart_path,
'echarts/chart/scatter': chart_path,
'echarts/chart/radar': chart_path,
'echarts/chart/chord': chart_path,
'echarts/chart/force': chart_path,
'echarts/chart/map': map_path
this.option = { chart: {}, option: option, container: container };
return this.
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]
具体的代码实现如下：
ChartDataFormate: {
FormateNOGroupData: function (data) {//data的格式如上的Result1，这种格式的数据，多用于饼图、单一的柱形图的数据源
var categories = [];
var datas = [];
for (var i = 0; i & data. i++) {
categories.push(data[i].name || "");
datas.push({ name: data[i].name, value: data[i].value || 0 });
return { category: categories, data: datas };
FormateGroupData: function (data, type, is_stack) {//data的格式如上的Result2，type为要渲染的图表类型：可以为line，bar，is_stack表示为是否是堆积图，这种格式的数据多用于展示多条折线图、分组的柱图
var chart_type = 'line';
chart_type = type || 'line';
var xAxis = [];
var group = [];
var series = [];
for (var i = 0; i & data. i++) {
for (var j = 0; j & xAxis.length && xAxis[j] != data[i]. j++);
if (j == xAxis.length)
xAxis.push(data[i].name);
for (var k = 0; k & group.length && group[k] != data[i]. k++);
if (k == group.length)
group.push(data[i].group);
for (var i = 0; i & group. i++) {
var temp = [];
for (var j = 0; j & data. j++) {
if (group[i] == data[j].group) {
if (type == "map")
temp.push({ name: data[j].name, value: data[i].value });
temp.push(data[j].value);
switch (type) {
case 'bar':
var series_temp = { name: group[i], data: temp, type: chart_type };
if (is_stack)
series_temp = $.extend({}, { stack: 'stack' }, series_temp);
case 'map':
var series_temp = {
name: group[i], type: chart_type, mapType: 'china', selectedMode: 'single',
itemStyle: {
normal: { label: { show: true} },
emphasis: { label: { show: true} }
data: temp
case 'line':
var series_temp = { name: group[i], data: temp, type: chart_type };
if (is_stack)
series_temp = $.extend({}, { stack: 'stack' }, series_temp);
var series_temp = { name: group[i], data: temp, type: chart_type };
series.push(series_temp);
return { category: group, xAxis: xAxis, series: series };
各种图表类型的配置初始化
在通过2.2步骤将从后台获得的数据进行初始化之后，我们就可以进行图表的option的配置了，在这里我主要对常用的饼图、柱图（单一、分组、堆积柱图）、折线图（分组、堆积折线图）、柱图+折线（增幅）图、中国地图等图进行了配置项的初始化。具体实现如下：
ChartOptionTemplates: {
CommonOption: {//通用的图表基本配置
tooltip: {
trigger: 'axis'//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发
toolbox: {
show: true, //是否显示工具栏
feature: {
mark: true,
dataView: { readOnly: false }, //数据预览
restore: true, //复原
saveAsImage: true //是否保存图片
CommonLineOption: {//通用的折线图表的基本配置
tooltip: {
trigger: 'axis'
toolbox: {
show: true,
feature: {
dataView: { readOnly: false }, //数据预览
restore: true, //复原
saveAsImage: true, //是否保存图片
magicType: ['line', 'bar']//支持柱形图和折线图的切换
Pie: function (data, name) {//data:数据格式：{name：xxx,value:xxx}...
var pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);
var option = {
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}/%)',
show: true
orient: 'vertical',
x: 'left',
data: pie_datas.category
name: name || "",
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
data: pie_datas.data
return $.extend({}, monOption, option);
Lines: function (data, name, is_stack) { //data:数据格式：{name：xxx,group:xxx,value:xxx}...
var stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data, 'line', is_stack);
var option = {
data: stackline_datas.category
type: 'category', //X轴均为category，Y轴均为value
data: stackline_datas.xAxis,
boundaryGap: false//数值轴两端的空白策略
name: name || '',
type: 'value',
splitArea: { show: true }
series: stackline_datas.series
return $.extend({}, monLineOption, option);
Bars: function (data, name, is_stack) {//data:数据格式：{name：xxx,group:xxx,value:xxx}...
var bars_dates = ECharts.ChartDataFormate.FormateGroupData(data, 'bar', is_stack);
var option = {
legend: bars_dates.category,
type: 'category',
data: bars_dates.xAxis,
axisLabel: {
show: true,
interval: 'auto',
rotate: 0,
margion: 8
type: 'value',
name: name || '',
splitArea: { show: true }
series: bars_dates.series
return $.extend({}, monLineOption, option);
……..//其他的图表配置，如柱图+折线、地图
2.4 图形的渲染
在配置好图表类型的option之后，就可进行图表的渲染了，具体的代码实现如下：
RenderChart: function (option) {
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/pie',
'echarts/chart/k',
'echarts/chart/scatter',
'echarts/chart/radar',
'echarts/chart/chord',
'echarts/chart/force',
'echarts/chart/map'
function (ec) {
if (option.chart && option.chart.dispose)
option.chart.dispose();
option.chart = echarts.init(option.container);
window.onresize = option.chart.
option.chart.setOption(option.option, true);
……..//渲染其他的图表类型，如：地图
3.& 具体页面的使用
经过2步骤中的一些列的配置、处理、初始化，我们就可以具体的使用了，在每一个aspx页面使用之前，我们首先需要在页面的标题引入以下的文件：
引入之后就可进行使用了，下面演示几个常用的图表的使用：
首页每个aspx页面上都有一个div用来做渲染图表的容器，如下：
3.1.1 实现代码
3.1.2 展示效果
3.2.1 实现代码
3.2.2展示效果
3.3 折线图
3.3.1 实现代码
3.3.2展示效果
3.4 柱图+折线（增幅）图
3.4.1 展示效果
3.5.3 展示效果
到这里，基本就把echart的抽象跟使用讲完了，因为时间的关系，还有一些图形的配置、数据处理没有列出代码，但是基本上实现都差不多。希望能给大家带来一些帮助和启发。后续会继续推出HightCharts的抽象使用，敬请期待。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。WebGIS中利用AGS JS+eChart实现一些数据展示的探索
分类：程序语言|标签：JAVASCRIPT|日期：
eChart提供了迁徙图、热点图、夜视图等跟地图能够很好的结合起来的数据展示方式。但是如何将eChart和我们的AGS JS框架以及自身的地图相结合，是一个很值得研究的地方。我所在小组中的一位同事上两周作为主力对eChart和我们目前所使用的AGS JS的结合做了一些研究，取得了不错的进展。我本人对其研究进行了跟进，这里作为二传手，将这些进展以及效果做一个小的总结，同时也利于我对他研究的进一步学习。感谢我这位优秀的同事。
2.必须解决的问题——坐标问题
series中的geoCoord参数是用来设置标注点地理坐标的。标注点是否能正确叠加到我们发布的地图上，此参数至关重要。
首先，我们将此参数中的值设置为与我们发布的地图相吻合的坐标值。比如，我们地图是使用的XIAN1980 的坐标系，以117度为经线做高斯投影后的地图。此时的参数我们设置为：
& & & & & & & & & & & &
我们研究eChart的源码可以发现，每个标注点之所以能显示在地图上，是因为它内部会首先在geoCoord中读取到该点的地理坐标，然后转换为此时的屏幕坐标。但是，如果我们已经给每一个标注点的X和Y赋予了值后，eChart内部会直接使用该值而不再自身进行转换。以下为eChart内部的该源码部分：
在了解了此过程后，我们便有了如下思路：
a.继承AGS上的基类Layer，扩展出一个eChartLayer。
b.将eChartLayer添加到AGS的Map中。
c.遍历Option中的Data，利用AGS提供的toScreen方法直接将geoCoord中的坐标点转换为此时的屏幕坐标，并赋予各标注点的X和Y。
通过测试，很好的解决了标注点能正确显示在地图上的问题。
3.进一步解决的问题
3.1频繁刷新问题
在将我们所写的eChartLayer加入到Map中后，我们会发现，每次地图开始平移时，eChart上的各种效果便开始不断的处于刷新重绘状态。
解决思路时，监听地图的平移事件，对eChart进行重绘控制。
3.2刷新后某些功能失效问题
eChart官网上提供的示例，因为是静止的，不会出现该问题。但是当把它们叠加到地图，对地图进行平移、放大、等需要经常刷新重绘的用途上时便会发生某些功能失效的问题。
比如，下图所示，当我们点击了图例中的案件数量时，以案卷数量为标题的标注点都会消失。但当我们平移地图后，所以位置点进行重绘时，相关设置便失效，之前消失的标注点又会被重绘出来。
&&&&& &&&&&&&&&&&&&&&&&& &&
这里说一下我们自身的解决方法。
我们的思路时，将重绘分为两种，一种是重新参数绑定，一种是只改变标注点XY坐标的重绘。对于上述操作，我们进行只改变标注点坐标的重绘方式。该问题解决。
4.Iframe和eChart的兼容问题
在eChart中有大量的instanceof Array这样的代码。但是我们发现在Iframe中，此处会报出错误。所以如果在Iframe中应用eChart时，需要改写eChart中与此相关的代码。
5.效果展示
6.进一步研究的方向
eChart中的地图显示部分提供了对GeoJson的支持。我们可以利用矢量切图生成各个GeoJson文件，然后通过eChart对各矢量文件进行展示。由于eChart本身使用的HTML5进行渲染，对大数据渲染支持的很好，我们既可以解决加速请求矢量数据的问题，也能解决大数据渲染问题。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &——欢迎转载，但保留版权，请于明显处标明出处：
文章署名：
文章地址：
优质IT资料分享网，由广大资源爱好者通过共享互助而共享各种学习资料，但本站无法保证所共享，资料的完整性和合理性
如果有资料对您的合法权益造成侵害，请立即联系我们处理WebGIS中利用AGS JS+eChart实现一些数据展示的探索 - 推酷
WebGIS中利用AGS JS+eChart实现一些数据展示的探索
eChart提供了迁徙图、热点图、夜视图等跟地图能够很好的结合起来的数据展示方式。但是如何将eChart和我们的AGS JS框架以及自身的地图相结合，是一个很值得研究的地方。我所在小组中的一位同事上两周作为主力对eChart和我们目前所使用的AGS JS的结合做了一些研究，取得了不错的进展。我本人对其研究进行了跟进，这里作为二传手，将这些进展以及效果做一个小的总结，同时也利于我对他研究的进一步学习。感谢我这位优秀的同事。
2.必须解决的问题——坐标问题
series中的geoCoord参数是用来设置标注点地理坐标的。标注点是否能正确叠加到我们发布的地图上，此参数至关重要。
首先，我们将此参数中的值设置为与我们发布的地图相吻合的坐标值。比如，我们地图是使用的XIAN1980 的坐标系，以117度为经线做高斯投影后的地图。此时的参数我们设置为：
我们研究eChart的源码可以发现，每个标注点之所以能显示在地图上，是因为它内部会首先在geoCoord中读取到该点的地理坐标，然后转换为此时的屏幕坐标。但是，如果我们已经给每一个标注点的X和Y赋予了值后，eChart内部会直接使用该值而不再自身进行转换。以下为eChart内部的该源码部分：
在了解了此过程后，我们便有了如下思路：
a.继承AGS上的基类Layer，扩展出一个eChartLayer。
b.将eChartLayer添加到AGS的Map中。
c.遍历Option中的Data，利用AGS提供的toScreen方法直接将geoCoord中的坐标点转换为此时的屏幕坐标，并赋予各标注点的X和Y。
通过测试，很好的解决了标注点能正确显示在地图上的问题。
3.进一步解决的问题
3.1频繁刷新问题
在将我们所写的eChartLayer加入到Map中后，我们会发现，每次地图开始平移时，eChart上的各种效果便开始不断的处于刷新重绘状态。
解决思路时，监听地图的平移事件，对eChart进行重绘控制。
3.2刷新后某些功能失效问题
eChart官网上提供的示例，因为是静止的，不会出现该问题。但是当把它们叠加到地图，对地图进行平移、放大、等需要经常刷新重绘的用途上时便会发生某些功能失效的问题。
比如，下图所示，当我们点击了图例中的案件数量时，以案卷数量为标题的标注点都会消失。但当我们平移地图后，所以位置点进行重绘时，相关设置便失效，之前消失的标注点又会被重绘出来。
这里说一下我们自身的解决方法。
我们的思路时，将重绘分为两种，一种是重新参数绑定，一种是只改变标注点XY坐标的重绘。对于上述操作，我们进行只改变标注点坐标的重绘方式。该问题解决。
4.Iframe和eChart的兼容问题
在eChart中有大量的instanceof Array这样的代码。但是我们发现在Iframe中，此处会报出错误。所以如果在Iframe中应用eChart时，需要改写eChart中与此相关的代码。
5.效果展示
6.进一步研究的方向
eChart中的地图显示部分提供了对GeoJson的支持。我们可以利用矢量切图生成各个GeoJson文件，然后通过eChart对各矢量文件进行展示。由于eChart本身使用的HTML5进行渲染，对大数据渲染支持的很好，我们既可以解决加速请求矢量数据的问题，也能解决大数据渲染问题。
——欢迎转载，但保留版权，请于明显处标明出处：
已发表评论数()
&&登&&&陆&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见Echart、Excel、highcharts、jfreechart对照_imooo软件程序bug解决方案
Echart、Excel、highcharts、jfreechart对照
Echart、Excel、highcharts、jfreechart对比
highcharts
jfreechart
力导布局图
拖拽重计算
动态类型切换
大规模散点
数据区域缩放
多维度堆积
百度商业前端数据可视化团队开发底层基于ZRender（一个全新的轻量级canvas类库）
1.拖拽重计算特性。
2.数据视图的编辑功能，批量的数据修改。
3.动态类型切换，让用户随心所欲的切换到他所需要的图表类型。
4. 特有的力导布局图和和弦图。
5.工具开发时间短，工具稳定性不够。
require.config({
'echarts:'./js/echarts',
'echarts/chart/bar' : './js/echarts',
// 把所需图表指向单文件
'echarts/chart/line': './js/echarts'
require.config配置后后就可以通过动态加载使用echarts
//from echarts example
'echarts',
'echarts/chart/line',
// 按需加载所需图表
'echarts/chart/bar'
function (ec) {
var myChart = ec.init(domMain);
var option = {
...//各种属性
myChart.setOption(option);
highcharts
一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。
1. 界面美观、运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。
2. 和ECharts一样支持图例开关和数据区域选择、值域漫游等功能
3.工具稳定性比较好。
4.使用比较方便，属于标准的json属性设置。
&!doctype html&
&html lang="en"&
&script type="text/javascript" src="js/jquery.min.js"&&/script&
&script type="text/javascript" src="js/highcharts.js"&&/script&
//导出的JS不用导出功能可与去掉
&script type="text/javascript" src="js/exporting.js"&&/script&
var option = {
...//各种属性
$('#container').highcharts(option);
JFreeChart
JAVA平台上的一个开放的图表绘制类库。它完全使用JAVA语言编写，是为applications, applets, servlets 以及JSP等使用所设计。JFreeChart可生成饼图（pie charts）、柱状图（bar charts）、散点图（scatter plots）、时序图（time series）、甘特图（Gantt charts）等等多种图表，并且可以产生PNG和JPEG格式的输出，还可以与PDF和EXCEL关联。
1.稳定、轻量级且功能强大
2.免费开源，但是开发手册和示例要花钱购买
3.API处理简单，很容易上手
4.生成的图表运行顺畅
JFreeChart的缺陷就是只适合生成图片，而且文字、图片都不是特别清晰，还需要进行一些调整，比较麻烦。在交互性方面它又比不上Flash图表工具