echart图表控件配置入门（常用图表数据动态绑定）
来源：互联网 发布：手机拨号软件 编辑：程序博客网 时间：2024/05/21 10:35
效果显著，码到病除
现在分别对折线图、柱状图、饼图、中国地图四类图表的数据绑定进行详细的介绍。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、折线图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>数据绑定 柱状图</title> <script src="../js/jquery-1.7.min.js" type="text/javascript"></script> <script src="../build/source/echarts.js" type="text/javascript"></script></head><body><div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div><script type="text/javascript"> require.config({ paths: { echarts: '../build/dist' //引用资源文件夹路径，注意路径 } }); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function (ec) { 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: [] }; // 载入动画--------------------- myChart.showLoading({ text: '正在努力的读取数据中...', //loading话术 }); $.ajax({ url:"Default.aspx", data:{}, success:function(data){ //数据接口成功返回 //后台需要返回以下结构的json数据 data={ "legen":["访问量","订单数"], "axis":['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], "series":[ [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], [4.0, 2.9, 6.0, 21.2, 50.6, 56.7, 115.6, 102.2, 62.6, 20.0, 9.4, 3.3] ] }; var legendData=[]; var xAxisData=[]; var seriesData=[]; if(data!=null && data["series"].length>0){ legendData=data["legen"]; xAxisData=data["axis"]; for(var i=0,len=data["series"].length;i<len;i++){ seriesData.push({ "name":legendData[i], "type":"line", "data":data["series"][i] }); } } option.title.text="折线图标题"; option.legend.data=legendData; option.xAxis[0]["data"]=xAxisData; myChart.setOption(option); myChart.setSeries(seriesData); }, error:function(){ //数据接口异常处理 var legendData=['']; var xAxisData=['']; var seriesData = [ { name:'', type: 'line', data: [0] } ]; option.legend.data=legendData; option.xAxis[0]["data"]=xAxisData; myChart.setOption(option); myChart.setSeries(seriesData); }, complete:function(){ //不管数据接口成功或异常，都终于载入提示 //停止动画载入提示 myChart.hideLoading(); } }); } ); </script></body></html>
2、柱状图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>数据绑定 柱状图</title> <script src="../js/jquery-1.7.min.js" type="text/javascript"></script> <script src="../build/source/echarts.js" type="text/javascript"></script></head><body><div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div><script type="text/javascript"> require.config({ paths: { echarts: '../build/dist' //引用资源文件夹路径，注意路径 } }); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function (ec) { 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:[] //['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }], yAxis: [{ type: 'value' }], series: [] }; // 载入动画--------------------- myChart.showLoading({ text: '正在努力的读取数据中...', //loading话术 }); $.ajax({ url:"Default.aspx", data:{}, success:function(data){ //后台需要返回以下结构的json数据 data={ "legen":["访问量","订单数"], "axis":['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], "series":[ [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], [4.0, 2.9, 6.0, 21.2, 50.6, 56.7, 115.6, 102.2, 62.6, 20.0, 9.4, 3.3] ] } var legendData=[]; var xAxisData=[]; var seriesData=[]; if(data!=null && data["series"].length>0){ legendData=data["legen"]; xAxisData=data["axis"]; for(var i=0,len=data["series"].length;i<len;i++){ seriesData.push({ "name":legendData[i], "type":"bar", //柱状图和拆线图类似只要将bar 改成line "data":data["series"][i] }); } } option.legend.data=legendData; option.xAxis[0]["data"]=xAxisData; myChart.setOption(option); myChart.setSeries(seriesData); }, error:function(){ var legendData=['']; var xAxisData=['']; var seriesData = [ { name:'订单数', type: 'bar', //柱状图和拆线图类似只要将bar 改成line data: [0] } ]; option.legend.data=legendData; option.xAxis[0]["data"]=xAxisData; myChart.setOption(option); myChart.setSeries(seriesData); }, complete:function(){ //停止动画载入提示 myChart.hideLoading(); } }); } ); </script></body></html>
3、饼图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>数据绑定 饼图</title> <script src="../js/jquery-1.7.min.js" type="text/javascript"></script> <script src="../build/source/echarts.js" type="text/javascript"></script></head><body><div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div><script type="text/javascript"> require.config({ paths: { echarts: '../build/dist' //引用资源文件夹路径，注意路径 } }); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/pie' ], function (ec) { var myChart = ec.init(document.getElementById('div1')); var ecConfig = require('echarts/config'); var option = { title: { text: '标题', x:"center" }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { data:[], y:"bottom" }, calculable : true, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, series: [] }; // 载入动画--------------------- myChart.showLoading({ text: '正在努力的读取数据中...', //loading话术 }); $.ajax({ url:"Default.aspx", data:{}, success:function(data){ //后台需要返回以下结构的json数据 data={ "legen":["访问量","订单数","购买数"], "series":[4440,3220,1110] } var legendData=[]; var seriesData=[]; if(data!=null && data["series"].length>0){ legendData=data["legen"]; seriesData.push({ "name":"饼图标例1", "type":"pie", "radius" : '55%', //饼图半径大小 "center": ['50%', '60%'],//饼图圆心位置x,y "data":function(){ var t_data=[]; for(var i=0,len=data["series"].length;i<len;i++){ t_data.push({ "name":legendData[i], "value":data["series"][i] }); } return t_data; }() }); } option.legend.data=legendData; myChart.setOption(option); myChart.setSeries(seriesData); }, error:function(){ var legendData=['']; var seriesData = [ { "name":"饼图标例1", "type":"pie", "radius" : '55%', //饼图半径大小 "center": ['50%', '60%'],//饼图圆心位置x,y data: [0] } ]; option.legend.data=legendData; myChart.setOption(option); myChart.setSeries(seriesData); }, complete:function(){ //停止动画载入提示 myChart.hideLoading(); } }); } ); </script></body></html>
4、中国地图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>数据绑定 中国地图</title> <script src="../js/jquery-1.7.min.js" type="text/javascript"></script> <script src="../build/source/echarts.js" type="text/javascript"></script></head><body><div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div><script type="text/javascript"> require.config({ paths: { echarts: '../build/dist' //引用资源文件夹路径，注意路径 } }); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/map' ], function (ec) { var myChart = ec.init(document.getElementById('div1')); var ecConfig = require('echarts/config'); var mapType = [ 'china', '广东', '青海', '四川', '海南', '陕西', '甘肃', '云南', '湖南', '湖北', '黑龙江', '贵州', '山东', '江西', '河南', '河北', '山西', '安徽', '福建', '浙江', '江苏', '吉林', '辽宁', '台湾', '新疆', '广西', '宁夏', '内蒙古', '西藏', '北京', '天津', '上海', '重庆', '香港', '澳门' ]; var option = { title: { text: '标题', x:"center" }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { data:[], y:"bottom" }, dataRange: { min: 0, max:50000, //最好通过对数据计算得出，不要写死 x: 'left', y: 'bottom', text:['高','低'], // 文本，默认为数值文本 calculable : true }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, series: [] }; // 载入动画--------------------- myChart.showLoading({ text: '正在努力的读取数据中...', //loading话术 }); $.ajax({ url:"Default.aspx", data:{}, success:function(data){ //后台需要返回以下结构的json数据 data={ "legen":["访问量","订单数"], "series":[ [{"name":"上海","value":31417.76},{"name":"云南","value":5828.25},{"name":"其他","value":0.00},{"name":"内蒙古","value":297.00},{"name":"北京","value":25683.00},{"name":"吉林","value":3044.38},{"name":"四川","value":26890.66},{"name":"天津","value":11341.98},{"name":"宁夏","value":297.00},{"name":"安徽","value":1553.00},{"name":"山东","value":17969.81},{"name":"山西","value":2675.20},{"name":"广东","value":51438.63},{"name":"广西","value":4806.00},{"name":"新疆","value":5788.21},{"name":"江苏","value":76003.09},{"name":"江西","value":12879.03},{"name":"河北","value":7811.25},{"name":"河南","value":3772.00},{"name":"浙江","value":13383.12},{"name":"海南","value":0.00},{"name":"湖北","value":22250.17},{"name":"湖南","value":12925.44},{"name":"甘肃","value":7561.56},{"name":"福建","value":22143.76},{"name":"西藏","value":1802.40},{"name":"贵州","value":6961.41},{"name":"辽宁","value":8506.00},{"name":"重庆","value":14562.92},{"name":"陕西","value":3939.03},{"name":"青海","value":0.00},{"name":"黑龙江","value":2010.28}], [{"name":"上海","value":31417.76},{"name":"云南","value":5828.25},{"name":"其他","value":0.00},{"name":"内蒙古","value":297.00},{"name":"北京","value":25683.00},{"name":"吉林","value":3044.38},{"name":"四川","value":26890.66},{"name":"天津","value":11341.98},{"name":"宁夏","value":297.00},{"name":"安徽","value":1553.00},{"name":"山东","value":17969.81},{"name":"山西","value":2675.20},{"name":"广东","value":51438.63},{"name":"广西","value":4806.00},{"name":"新疆","value":5788.21},{"name":"江苏","value":76003.09},{"name":"江西","value":12879.03},{"name":"河北","value":7811.25},{"name":"河南","value":3772.00},{"name":"浙江","value":13383.12},{"name":"海南","value":0.00},{"name":"湖北","value":22250.17},{"name":"湖南","value":12925.44},{"name":"甘肃","value":7561.56},{"name":"福建","value":22143.76},{"name":"西藏","value":1802.40},{"name":"贵州","value":6961.41},{"name":"辽宁","value":8506.00},{"name":"重庆","value":14562.92},{"name":"陕西","value":3939.03},{"name":"青海","value":0.00},{"name":"黑龙江","value":2010.28}] ] } var legendData=[]; var seriesData=[]; if(data!=null && data["series"].length>0){ legendData=data["legen"]; for(var i=0,len=data["series"].length;i<len;i++){ seriesData.push({ "name":legendData[i], "type":"map", "mapType":"china", "roam":false, "itemStyle":{ "normal":{"label":{show:true}}, "emphasis":{"label":{show:true}} }, "data": data["series"][i] }); } } option.legend.data=legendData; myChart.setOption(option); myChart.setSeries(seriesData); }, error:function(){// var legendData=[''];// var seriesData = [// {// "name":"饼图标例1",// "type":"pie",// "radius" : '55%', //饼图半径大小// "center": ['50%', '60%'],//饼图圆心位置x,y// data: [0]// }// ]; // option.legend.data=legendData; // myChart.setOption(option);// myChart.setSeries(seriesData); }, complete:function(){ //停止动画载入提示 myChart.hideLoading(); } }); } ); </script></body></html>
注意dataRange的max和min会影响到颜色深度的。因为当前值会和最大值求比，然后计算颜色深度。
可以通过dataRange的color:['#dddddd','#777777'] 设置max,min的颜色值
阅读全文
0 0
- echart图表控件配置入门（常用图表数据动态绑定）
- echart图表控件配置入门（常用图表数据动态绑定）
- DevExpress 图表控件：ChartControl 动态绑定数据
- echart动态图表
- 【数据抓取】EChart图表展示
- echart图表拉杆的配置
- yii2 echart获取动态数据柱形图表 数组格式
- ASP.NET动态绑定HighCharts图表控件
- highcharts+json+ashx 图表动态数据绑定
- echart 图表通用工厂配置类
- 常用图表控件比较
- ECHART 设置图表颜色（随即取）
- echart 图表显示技术
- echart展示图表
- Android加载echart图表
- echart 图表问题
- echart图表制作bug
- 前端Echart图表展示
- js图片库二次改进（动态创建HTML元素）
- TLD算法详解（一）前言
- 暑期学习
- java打印调用堆栈的方式
- 物理内存与虚拟内存解析
- echart图表控件配置入门（常用图表数据动态绑定）
- Spring文档
- 谁是世界上最丑的人
- .section 段
- bzoj 3669: [Noi2014]魔法森林
- java 内部类
- RFS自动化测试工具安装与使用总结
- Django学习笔记 --1 Hello world！
- bzoj4997: [Usaco2017 Feb]Why Did the Cow Cross the Road III
