上一节 介绍了echarts图表控件的入门配置，使开发人员可以快速搭建出一个静态的图表。但是在实际开发过程这还是不够的，不可能所有的图表控件都是静态数据。决大部份图表是需要读取后台大量的数据时行可视化展示。图表较区表格形式的数据在可视化方面是有一定的优势。能使用户可以快速看出数据存在的问题、趋势、比较分析。因为人类对图表中的颜色、大小、形状更加敏感。

现在分别对折线图、柱状图、饼图、中国地图四类图表的数据绑定进行详细的介绍。echarts中其它的图表方法都差不多，只要了解官方的demo，按照指定的数据结构进行解析都能很方便的得到想要的结果；

echarts中提供了setOption、setSeries两个方法可以对图表的相关数据和属性进行动态设置，setOption一定要在setSeries之前设置；

var myChart = ec.init(document.getElementById('div1'));var ecConfig = require('echarts/config');                var option = {    title: {        text: '标题',        x:"center"    },    tooltip: {        trigger: 'axis'    },    legend: {        data:[],        y:"bottom"    },    toolbox: {        show: true,        feature: {            mark: { show: true },            dataView: { show: true, readOnly: false },            magicType: { show: true, type: ['line', 'bar'] },            restore: { show: true },            saveAsImage: { show: true }        }    },    xAxis: [{        type: 'category',        data:[]     }],    yAxis: [{        type: 'value'    }],    series: []};

option中的属性可以通过对象属性的方式获取设置；例如以上代码中，

option.legend.data=["xx","xx"] 可以通过这种方法设置对应属性的值

option.title.text="改变标题";//改变标题属性

option.xAxis[0]["data"]=[];//改变坐标值

myChart.setOption(option);//设置图表对象的所有参数属性

myChart.setSeries(seriesData);//设置图表对象的数据集合

通过后台交互数据肯定会有一定的延迟，这时最好能有一个友好载入提示，echarts提供showLoading方法

// 载入动画提示myChart.showLoading({    text: '正在努力的读取数据中...'});//取消载入提示myChart.hideLoading();

来几个具体的实例吧。

以下实例的ajax用jquery的$.ajax。所以如果你要在本地测试，需要引用jquery.js。 

这里所有demo虽然也请求了后台。但都是通过前后模拟了一个返回的json数据。不管各位是搞jsp、asp、php的都没关系，只要按指定的格式生成对的格式的json数据就行了。

至于后台如何生成json数据，各自就baidu下吧。这里就不提了。

 

通过官方的demo我可以看到哪些属性是需要动态传入数据，然后我们按照格式传入对应的值或数组；

通过demo的代码。我们可以看出折线标红的地方需要动态设置分别是

option.title.text="标题";

option.legend.data=["图例1","图例2","……"];

option.xAxis[0]["data"]=["一","二","三","……"];//x轴数据

var seriesData=[

　　{

　　　　name:"图例1",

　　　　type:"line",

　　　　data:[1,2,3]

　　}

]

myChart.setOption(option);　　//设置全部参数属性

myChart.setSeries(seriesData);//设置图例数据

通过以上方法就可以实现动态的echarts数据改变了。

1、折线图

 

2、柱状图 

　　

3、饼图 

　　

4、中国地图

　　

注意dataRange的max和min会影响到颜色深度的。因为当前值会和最大值求比，然后计算颜色深度。

可以通过dataRange的color:['#dddddd','#777777'] 设置max,min的颜色值