echart图表控件配置入门(二)常用图表数据动态绑定
上一节 《echart图表控件配置入门(一)》介绍了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、折线图
<!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的颜色值
echart图表控件配置入门(二)常用图表数据动态绑定的更多相关文章
- echart图表控件配置入门(一)
现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...
- 跨平台图表控件TeeChart使用教程:导入XML数据
TeeChart的最新版中包含了一个自动加载XML数据的新组件.这个组件的名字叫做TTeeXMLSource,用户可以在TeeXML.pas unit中找到这个组件. 加载XML图表所需的最小属性是& ...
- 跨平台图表控件TeeChart使用教程:将图表数据导出为XML格式
在开发者使用TeeChart进行开发的过程中,不管是在设计时或者运行时都可以使用的图表导出对话框将图表数据轻易地导出为XML格式: TeeChart最新版那下载地址 上图为TeeChart导出对话框的 ...
- .net chart(图表)控件的使用-System.Windows.Forms.DataVisualization.dll
这个案例指在介绍微软这套免费又功能强大的图表控件Microsoft Chart Controls for Microsoft .NET Framework 3.5,通过它,可让您的项目及报表,轻松套用 ...
- 问题：MSChart.exe；结果：微软图表控件MsChart使用方法及各种插件下载地址
微软图表控件MsChart使用方法及各种插件下载地址 (2012-08-10 17:32:33) 转载▼ 标签: 图表 控件 下载地址 kernel32 微软 it 分类: C# 昨天在网上看到了微软 ...
- [深入浅出Windows 10]QuickCharts图表控件库解析
13.4 QuickCharts图表控件库解析 QuickCharts图表控件是Amcharts公司提供的一个开源的图表控件库,这个控件库支持WPF.Silverlight.和Windows等 ...
- Echarts图表控件使用总结1(Line，Bar)
问题篇(详解):http://www.cnblogs.com/hanyinglong/p/4708337.html 1.前言 a.在系统开发过程中可能会使用到图表控件,一个好的图标控件可以使我们的网站 ...
- 二十六、【开源框架】EFW框架Winform前端开发之Grid++Report报表、条形码、Excel导出、图表控件
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...
- Spring Boot 项目学习 (二) MySql + MyBatis 注解 + 分页控件 配置
0 引言 本文主要在Spring Boot 基础项目的基础上,添加 Mysql .MyBatis(注解方式)与 分页控件 的配置,用于协助完成数据库操作. 1 创建数据表 这个过程就暂时省略了. 2 ...
随机推荐
- linux select
man select: #include <sys/select.h> #include <sys/time.h> int select(int nfds, fd_set *r ...
- 很实用的js限制不让输入其他字符，只让输入数字和 js生成UUID
onkeyup="this.value=this.value.replace(/\D/g,'')" js生产UUID var createUUID = (function (uui ...
- POJ 1568 Find the Winning Move（极大极小搜索）
题目链接:http://poj.org/problem?id=1568 题意:给出一个4*4的棋盘,x和o两人轮流放.先放够连续四个的赢.给定一个局面,下一个轮到x放.问x是否有必胜策略?若有,输出能 ...
- 《OD学hadoop》在LINUX下如何将tar压缩文件解压到指定的目录下
linux下tar命令解压到指定的目录 :#tar zxvf /bbs.tar.zip -C /zzz/bbs //把根目录下的bbs.tar.zip解压到/zzz/bbs下,前提要保证存在/zzz/ ...
- js案例_下滑列表
1.HTML布局(使用ul): <body> <ul> <li class="list" id="lis"> <a h ...
- 搜索浅谈(Elasticsearch和Lucene4分享）
刚刚过去的双11,真是给线下运营商好好上了一课.当今的互联网真是炙手可热,大家对互联网的热情是如此之高.相信电商之间的竞争将更加的激烈和残酷,不过,搜索,作为用户体验很重要的一点,各大电商也做的越来越 ...
- 漫游Kafka设计篇之数据持久化
Kafka大量依赖文件系统去存储和缓存消息.对于硬盘有个传统的观念是硬盘总是很慢,这使很多人怀疑基于文件系统的架构能否提供优异的性能.实际上硬盘的快慢完全取决于使用它的方式.设计良好的硬盘架构可以和内 ...
- 16.Object－C－－NSArray数组的排序
今天我来总结一下NSArray数组的排序方式. NSArray数组的排序有三种方式: 1.简单排序(sortedArrayUsingSelector:) 2.利用block语法(sortedArray ...
- Wiz发布cnblog笔记
[转自Wiz官网][插件]发布笔记到博客,更好的博客离线撰写工具 发表于 2011 年 2 月 23 日 由 admin 为知笔记支持绝大部分的博客离线撰写,可以方便地把笔记直接发布为博客. 使用 打 ...
- RegEx正则表达式学习笔记
一.实用的例子 public static void main(String[] args) { // 简单练习 System.out.println("-123".matches ...