在项目开发中，我们往往会有将数据可视化展现的功能，于是学会echarts的使用就成为了一件刻不容缓的事情。在echarts官网的实例中，可以大概知道echarts有两种方法实现图表，首先是通过ajax和后台实现jsonarray以及jsonobject等类型的传输，具体传输格式需要参考ehcarts中的示例代码，另外一种方法则是生成.json文件，通过在前端用$.get获取文件中的json数据。其实两种方法内在的实现都基本一样，都是前端得到json数据的过程。所以这里就主要讲讲第一种方法的前后台具体实现。
一、首先举一个最简单的例子—— 一个简单的饼状图【链接】。
这里面有两组数据：
1、第一个为
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
2、第二个为
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]是在一个jsonarray放了五个jsonobject。在jsonarray分别add五个已经加了不同的value和name属性的jsonobject，即可实现，效果如下。
具体实现传值需要用ajax，实现如下（我们返回了一个jsonarray，第一个存的是第一组数据，第二个存的是第二组数据）
<div id="main" style="width: 700px;height:400px;"></div><%--<td >设置当前显示图表的模块，id应init中一致</td>--%>
<script type="text/javascript">
//数据纯属虚构
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "Servlet3", //请求发送到相应的servlet
dataType : "json", //返回数据形式为json
success : function(data) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (data) {
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:data[0]
//返回的jsonarray中的第一组数据
}, series: [
{
name :'访问来源',
type :'pie',
radius : ['50%', '70%'],
avoidLabelOverlap: false,
label : {
normal : {
show : false,
position : 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:data[1]
}
]
};} },
error : function(errorMsg) {
//没做出错处理 //请求失败时执行该函数 alert("图表请求数据失败!");
}
})
</script>这个里面需要一组data如下
var data = [{
name: '北京',
value: 5.3
},
{
name: '天津',
value: 3.8
},
{
name: '上海',
value: 4.6
},
{
name: '重庆',
value: 3.6
},
{
name: '河北',
value: 3.4
},
{
name: '河南',
value: 3.2
},
{
name: '云南',
value: 1.6
},
{
name: '辽宁',
value: 4.3
},
{
name: '黑龙江',
value: 4.1
},
{
name: '湖南',
value: 2.4
},
{
name: '安徽',
value: 3.3
},
{
name: '山东',
value: 3.0
},
{
name: '新疆',
value: 1
},
{
name: '江苏',
value: 3.9
},
{
name: '浙江',
value: 3.5
},
{
name: '江西',
value: 2.0
},
{
name: '湖北',
value: 2.1
},
{
name: '广西',
value: 3.0
},
{
name: '甘肃',
value: 1.2
},
{
name: '山西',
value: 3.2
},
{
name: '内蒙古',
value: 3.5
},
{
name: '陕西',
value: 2.5
},
{
name: '吉林',
value: 4.5
},
{
name: '福建',
value: 2.8
},
{
name: '贵州',
value: 1.8
},
{
name: '广东',
value: 3.7
},
{
name: '青海',
value: 0.6
},
{
name: '西藏',
value: 0.4
},
{
name: '四川',
value: 3.3
},
{
name: '宁夏',
value: 0.8
},
{
name: '海南',
value: 1.9
},
{
name: '台湾',
value: 0.1
},
{
name: '香港',
value: 0.1
},
{
name: '澳门',
value: 0.1
}
];可以看出传来的数据为一个jsonarray中嵌套了多个jsonobject。在这个例子中不用把所有的地名写出来，只用写有变化的那几个就ok，其他地区的数据默认为零，最终前端代码如下：
<div class="info_head">
<h4>对外投资分布图</h4>
<div id="main1" style="width: 700px;height:400px;"></div>
</div>
</div>
<script type="text/javascript">
//数据纯属虚构
var myChart = echarts.init(document.getElementById('main1'));
//数据纯属虚构
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "Servlet3", //请求发送到相应的servlet
dataType : "json", //返回数据形式为json
success : function(data) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (data) {
// alert(data);
var yData = [];
data.sort(function(o1, o2) {
if (isNaN(o1.value) || o1.value == null) return -1;
if (isNaN(o2.value) || o2.value == null) return 1;
return o1.value - o2.value;
});
for (var i = 0; i < data.length; i++) {
yData.push(data[i].name);
}
var option = {
title: {
text: '',
textStyle: {
fontSize: 30
},
x: 'center'
},
tooltip: {
show: true,
formatter: function(params) {
return params.name + '：' + params.data['value'] + '%'
},
},
visualMap: {
type: 'continuous',
text: ['', ''],
showLabel: true,
seriesIndex: [0],
min: 0,
max: 7,
inRange: {
color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096', ]
},
textStyle: {
color: '#000'
},
bottom: 30,
left: 'left',
},
grid: {
right: 10,
top: 80,
bottom: 30,
width: '20%'
},
xAxis: {
type: 'value',
scale: true,
position: 'top',
splitNumber: 1,
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 2,
textStyle: {
color: '#aaa'
}
}
},
yAxis: {
type: 'category',
nameGap: 16,
axisLine: {
show: false,
lineStyle: {
color: '#ddd'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#ddd'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#999'
}
},
data: yData
},
geo: {
roam: true,
map: 'china',
left: 'left',
right:'300',
layoutSize: '80%',
label: {
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
areaColor: '#fff464'
}
},
regions: [{
name: '南海诸岛',
value: 0,
itemStyle: {
normal: {
opacity: 0,
label: {
show: false
}
}
}
}],
},
series: [{
name: 'mapSer',
type: 'map',
roam: false,
geoIndex: 0,
label: {
show: false,
},
data: data
}, {
name: 'barSer',
type: 'bar',
roam: false,
visualMap: false,
zlevel: 2,
barMaxWidth: 20,
itemStyle: {
normal: {
color: '#40a9ed'
},
emphasis: {
color: "#3596c0"
}
},
label: {
normal: {
show: false,
position: 'right',
offset: [0, 10]
},
emphasis: {
show: true,
position: 'right',
offset: [10, 0]
}
},
data: data
}]
};
myChart.setOption(option);
// myChart1.showLoading();
}
},
error : function(errorMsg) { //没做出错处理
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart2.hideLoading();
}
})yData.push(data[i].name);提示：
1、在echarts网站上可以实时改代码，可以自己修改代码中的一些参数（颜色、形状、大小等等）来达到自己想要的效果。
2、在使用echarts需要导入它的js到项目中比较常用的例如：
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>具体见官方文档：点击打开链接
3、在js中创建实例时（echarts.init）一定要避免容器id重复，不然重复的话图就不会出来。
注：（之后还会补充其他类型echart的使用方法，其实最好学习的方法还是看官方文档，本文也是基于官方文档给出自己的具体运用）
扫一扫
1018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
