核心提示：ECharts 特性介绍ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Sa...
ECharts 特性介绍
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
丰富的图表类型
ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。
多个坐标系的支持
ECharts 3 开始独立出了“坐标系”的概念，支持了直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo）。图表可以跨坐标系存在，例如折、柱、散点等图可以放在直角坐标系上，也可以放在极坐标系上，甚至可以放在地理坐标系中。
下面是一个地图在极坐标系上的例子：
1首先下载china.js
echarts.min.js
<%@ page language="Java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
<script src="china.js"></script>
</head>
<body>
<p id="main" style="width: 1000px;height:600px;"></p>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
function randomData() {
return Math.round(Math.random()*1000);
}
/*
var date=[{name: '北京',value: '400' },{name: '天津',value: '100' }]
var names=[];
var values=[];
for(var i=0;i<date.length;i++){
names[i]=date[i].name
alert(names[i])
values[i]=date[i].value
}
*/
// 指定图表的配置项和数据
myChart.setOption( {
title: {
text: '百旺金赋',
subtext: 'Demo李亚鹏',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data:['服务数量']
},
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默认为数值文本
calculable: true
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '百旺金赋bwjf',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
// {name: names,value:values }
]
}
]
});
/*
var names=[];
var values=[];
alert({date})
for(var i=0;i<date.length;i++){
// names[i]=date[i].name
// values[i]=date[i].value
}
*/
/* myChart.setOption({
series: [{
// 根据名字对应到相应的系列
data:date
}]
});*/
//alert(names)
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
// 静态数组格式的json用于测试
//名字必须和地图上对应起来
var date=[{name: '北京',value: '100' },{name: '广西',value: '945' },{name: '西藏',value: '300' },{name: '新疆',value: '1888' },{name: '台湾',value: '222' }];
myChart.setOption({
series: [{
// 根据名字对应到相应的系列
data:date
}]
});
//发送异步请求获取数据进行绑定
/* $.get('hehe.json').done(function (data) {
// 填入数据
myChart.setOption({
series: [{
// 根据名字对应到相应的系列
data:data
}]
});
});*/
</script>
</body>
</html>
