百度Echarts-免费的商业产品图表库
官方网站：http://echarts.baidu.com/
民间网站：http://fansunion.cn/echarts/
下载地址：https://codeload.github.com/ecomfe/echarts/zip/1.3.1
API&Doc：http://echarts.baidu.com/doc/doc.html
简要介绍
ECharts (Enterprise Charts 商业产品图表库)
提供商业产品常用图表库，底层基于ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现。
用法示例
1. 在线访问
http://echarts.baidu.com/doc/example.html
2. 下载查看
下载包的 doc/example目录 有很多示例。
小试牛刀
官方的例子，我看了下。引用了很多js和css文件，不够简明。
而我想要的是那种非常简介的或者是核心步骤的Example，于是我自己写了几个。
Line&折线图
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<title>Echarts图表Demo</title>
<script src="js/esl/esl.js"></script>
<script src="js/jquery.js"></script>
<script src="js/echarts.js"></script> <script type="text/javascript"> var fileLocation ='js/echarts';
require.config({ paths:{
echarts: fileLocation,
'echarts/chart/line': fileLocation,
'echarts/chart/bar': fileLocation,
'echarts/chart/scatter': fileLocation,
'echarts/chart/k': fileLocation,
'echarts/chart/pie': fileLocation,
'echarts/chart/radar': fileLocation,
'echarts/chart/map': fileLocation,
'echarts/chart/chord': fileLocation,
'echarts/chart/force': fileLocation
}
}); // 作为入口
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/pie',
'echarts/chart/radar',
'echarts/chart/force',
'echarts/chart/chord',
], displayChart ); function displayChart(ec) {
//折线图
var lineChart = ec.init(document.getElementById('line'));
var lineChartOtion = getLineChartOption();
lineChart.setOption(lineChartOtion);
} //获得Line图的选项和数据
function getLineChartOption(){
var lineChartOption={
title : {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
magicType:['line', 'bar'],
restore : true,
saveAsImage : true
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
},
splitArea : {show : true}
}
],
series : [
{
name:'最高气温',
type:'line',
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[11, 11, 15, 13, 12, 13, 10]
},
{
name:'最低气温',
type:'line',
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[-2, 1, 2, 5, 3, 2, 0]
}
]
};
return lineChartOption;
} </script>
</head> <body> <div id="line" style="width:400px;height:300px;"> </div> </body>
</html>
Bar&柱状图
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<title>Echarts图表Demo</title>
<script src="js/esl/esl.js"></script>
<script src="js/jquery.js"></script>
<script src="js/echarts.js"></script> <script type="text/javascript"> var fileLocation ='js/echarts';
require.config({ paths:{
echarts: fileLocation,
'echarts/chart/line': fileLocation,
'echarts/chart/bar': fileLocation,
'echarts/chart/scatter': fileLocation,
'echarts/chart/k': fileLocation,
'echarts/chart/pie': fileLocation,
'echarts/chart/radar': fileLocation,
'echarts/chart/map': fileLocation,
'echarts/chart/chord': fileLocation,
'echarts/chart/force': fileLocation
}
}); // 作为入口
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/pie',
'echarts/chart/radar',
'echarts/chart/force',
'echarts/chart/chord',
], displayChart ); function displayChart(ec) {
//饼图
var pieChart = ec.init(document.getElementById('pie'));
var pieChartOtion = getPieChartOption();
pieChart.setOption(pieChartOtion);
} //获得Pie图的选项和数据
function getPieChartOption(){
var pieChartOption = {
tooltip : {
show: true,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
restore : true,
saveAsImage : true
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
center : ['35%', 200],
radius : 80,
itemStyle : {
normal : {
label : {
position : 'inner',
formatter : function(a,b,c,d) {return (d - 0).toFixed(0) + ' %'},
},
labelLine : {
show : false
}
}
},
data:[
{value:335, name:'直达'},
{value:679, name:'营销广告'},
{
value:1548,
name:'搜索引擎',
itemStyle : {
normal : {
label : {
show : false
}
},
emphasis : {
label : {
show : true,
formatter : "{b} : {d}%",
position : 'inner'
}
}
}
}
]
},
{
name:'访问来源',
type:'pie',
center : ['35%', 200],
radius : [110, 140],
data:[
{value:335, name:'直达'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{
value:1048,
name:'百度',
itemStyle : {
normal : {
color : (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getRadialGradient(
300, 200, 110, 300, 200, 140,
[[0, 'rgba(255,255,0,1)'],[1, 'rgba(30,144,250,1)']]
)
})(),
label : {
textStyle : {
color : 'rgba(30,144,255,0.8)',
align : 'center',
baseline : 'middle',
fontFamily : '微软雅黑',
fontSize : 30,
fontWeight : 'bolder'
}
},
labelLine : {
length : 40,
lineStyle : {
color : '#f0f',
width : 3,
type : 'dotted'
}
}
}
}
},
{value:251, name:'谷歌'},
{
value:102,
name:'必应',
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true
},
labelLine : {
show : true,
length : 50
}
}
}
},
{value:147, name:'其他'}
]
},
{
name:'访问来源',
type:'pie',
startAngle: 90,
center : ['75%', 200],
radius : [80, 120],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
color: (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getRadialGradient(
650, 200, 80, 650, 200, 120,
[[0, 'rgba(255,255,0,1)'],[1, 'rgba(255,0,0,1)']]
)
})(),
label : {
show : true,
position : 'center',
formatter : "{d}%",
textStyle : {
color : 'red',
fontSize : '30',
fontFamily : '微软雅黑',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'直达'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
}; return pieChartOption;
}
</script>
</head> <body> <div id="pie" style="width:400px;height:300px;"> </div> </body>
</html>
Pie&饼状图
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<title>Echarts图表Demo</title>
<script src="js/esl/esl.js"></script>
<script src="js/jquery.js"></script>
<script src="js/echarts.js"></script> <script type="text/javascript"> var fileLocation ='js/echarts';
require.config({ paths:{
echarts: fileLocation,
'echarts/chart/line': fileLocation,
'echarts/chart/bar': fileLocation,
'echarts/chart/scatter': fileLocation,
'echarts/chart/k': fileLocation,
'echarts/chart/pie': fileLocation,
'echarts/chart/radar': fileLocation,
'echarts/chart/map': fileLocation,
'echarts/chart/chord': fileLocation,
'echarts/chart/force': fileLocation
}
}); // 作为入口
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/pie',
'echarts/chart/radar',
'echarts/chart/force',
'echarts/chart/chord',
], displayChart ); function displayChart(ec) {
//柱状图
var barChart = ec.init(document.getElementById('bar'));
var barChartOtion = getBarChartOption();
barChart.setOption(barChartOtion);
} //获得Bar图的选项和数据
function getBarChartOption(){
var option = {
tooltip : {
show: true,
trigger: 'item'
},
legend: {
data:['邮件营销','联盟广告','直接访问','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
magicType:['line', 'bar'],
restore : true,
saveAsImage : true
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'邮件营销',
type:'bar',
itemStyle: { // 系列级个性化样式，纵向渐变填充
normal: {
borderColor:'red',
color : (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 400, 0, 300,
[[0, 'green'],[1, 'yellow']]
)
})()
},
emphasis: {
borderWidth: 5,
borderColor:'green',
color: (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 400, 0, 300,
[[0, 'red'],[1, 'orange']]
)
})(),
label : {
show : true,
position : 'top',
formatter : "{a} {b} {c}",
textStyle : {
color: 'blue'
}
}
}
},
data:[220, 232, 101, 234, 190, 330, 210]
},
{
name:'联盟广告',
type:'bar',
stack: '总量',
data:[120, '-', 451, 134, 190, 230, 110]
},
{
name:'直接访问',
type:'bar',
stack: '总量',
itemStyle: { // 系列级个性化
normal: {
borderWidth: 10,
borderColor:'tomato',
color: 'red'
},
emphasis: {
borderColor:'red',
color: 'blue'
}
},
data:[
320, 332, '-', 334,
{
value: 390,
symbolSize : 10, // 数据级个性化
itemStyle: {
normal: {
color :'lime'
},
emphasis: {
color: 'skyBlue'
}
}
},
330, 320
]
},
{
name:'搜索引擎',
type:'bar',
barWidth: 40, // 系列级个性化，柱形宽度
itemStyle: {
normal: { // 系列级个性化，横向渐变填充
borderRadius: 5,
color : (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 0, 1000, 0,
[[0, 'rgba(30,144,255,0.8)'],[1, 'rgba(138,43,226,0.8)']]
)
})(),
label : {
show : true,
textStyle : {
fontSize : '20',
fontFamily : '微软雅黑',
fontWeight : 'bold'
}
}
}
},
data:[
620, 732,
{
value: 701,
itemStyle : { normal: {label : {position: 'inside'}}}
},
734, 890, 930, 820]
}
]
}; return option; } </script>
</head> <body> <div id="bar" style="width:400px;height:300px;"> </div> </body>
</html>
不足之处
1.自己写的示例，样式不太好
2.图表展示流程不完善
官方示例 附录：一个直观的示例
// 图表实例化------------------
var echarts = require('echarts');
require('echarts/chart/line'); // 图表按需加载，需要主动require
var myChart = echarts.init(document.getElementById('main')); // ajax getting data............... // 过渡---------------------
myChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
}); // ajax return
myChart.hideLoading(); // 图表使用-------------------
var option = {
legend: { // 图例配置
padding: 5, // 图例内边距，单位px，默认上下左右内边距为5
itemGap: 10, // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
data: ['ios', 'android']
},
tooltip: { // 气泡提示配置
trigger: 'item', // 触发类型，默认数据触发，可选为：'axis'
},
xAxis: [ // 直角坐标系中横轴数组
{
type: 'category', // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [ // 直角坐标系中纵轴数组
{
type: 'value', // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
boundaryGap: [0.1, 0.1], // 坐标轴两端空白策略，数组内数值代表百分比
splitNumber: 4 // 数值轴用，分割段数，默认为5
}
],
series: [
{
name: 'ios', // 系列名称
type: 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
},
{
name: 'android', // 系列名称
type: 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
}
]
};
myChart.setOption(option); ... // 增加些数据------------------
option.legend.data.push('win');
option.series.push({
name: 'win', // 系列名称
type: 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
});
myChart.setOption(option); ... // 图表清空-------------------
myChart.clear(); // 图表释放-------------------
myChart.dispose();
3.浏览器兼容性问题
上面3个示例，在IE和QQ等IE系列浏览器，无法查看。
在Firefox上可以正常查看。
网页错误详细信息（IE）
用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C)
时间戳: Thu, 28 Nov 2013 07:52:49 UTC
消息: 'undefined' 为空或不是对象
行: 1571
字符: 9
代码: 0
URI: file:///G:/WebCenter/图表/echarts-demo/js/esl/esl.js
问题改进办法
a.html第一行加上 <!DOCTYPE html>。
解决浏览器兼容性问题。不然IE浏览器报错。
b.调整div和script脚本的相对位置。
<div id="chinaMap" style="width:400px;height:300px;"> </div>
<script type="text/javascript">
echarts脚本
</script>
c.减少js配置。
模块化自动加载引入了els.js之后，不需要再手动引入echarts.js等脚本文件。
d.美化图的展现。
修改div的宽度和高度。
还可以设置 chart的option参数。
改进后的示例
上面的用法示例，是我自己参照官方的例子制作的，问题很多。
向相关同事请教后，解决了遇到的问题。
再次整理如下。
Line&折线图
<!DOCTYPE html>
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<title>Echarts图表Demo</title>
<script src="js/esl/esl.js"></script>
</head> <body> <div id="line" style="width:800px;height:600px;"> </div>
<script type="text/javascript"> var fileLocation ='js/echarts';
require.config({ paths:{
echarts: fileLocation,
'echarts/chart/line': fileLocation,
'echarts/chart/bar': fileLocation,
'echarts/chart/pie': fileLocation
}
}); // 作为入口
require(
[
'echarts',
'echarts/chart/line'
], displayChart ); function displayChart(ec) {
//折线图
var lineChart = ec.init(document.getElementById('line'));
var lineChartOtion = getLineChartOption();
lineChart.setOption(lineChartOtion);
} //获得Line图的选项和数据
function getLineChartOption(){
var lineChartOption={
title : {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
magicType:['line', 'bar'],
restore : true,
saveAsImage : true
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
},
splitArea : {show : true}
}
],
series : [
{
name:'最高气温',
type:'line',
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[11, 11, 15, 13, 12, 13, 10]
},
{
name:'最低气温',
type:'line',
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[-2, 1, 2, 5, 3, 2, 0]
}
]
};
return lineChartOption;
} </script>
</body>
</html>
Bar&柱状图
<!DOCTYPE html>
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<title>Echarts图表Demo</title>
<script src="js/esl/esl.js"></script>
</head> <body> <div id="bar" style="width:800px;height:600px;"> </div>
<script type="text/javascript"> var fileLocation ='js/echarts';
require.config({ paths:{
echarts: fileLocation,
'echarts/chart/line': fileLocation,
'echarts/chart/bar': fileLocation,
'echarts/chart/pie': fileLocation
}
}); // 作为入口
require(
[
'echarts',
'echarts/chart/bar'
], displayChart ); function displayChart(ec) {
//柱状图
var barChart = ec.init(document.getElementById('bar'));
var barChartOtion = getBarChartOption();
barChart.setOption(barChartOtion);
} //获得Bar图的选项和数据
function getBarChartOption(){
var option = {
tooltip : {
show: true,
trigger: 'item'
},
legend: {
data:['邮件营销','联盟广告','直接访问','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
magicType:['line', 'bar'],
restore : true,
saveAsImage : true
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'邮件营销',
type:'bar',
itemStyle: { // 系列级个性化样式，纵向渐变填充
normal: {
borderColor:'red',
color : (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 400, 0, 300,
[[0, 'green'],[1, 'yellow']]
)
})()
},
emphasis: {
borderWidth: 5,
borderColor:'green',
color: (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 400, 0, 300,
[[0, 'red'],[1, 'orange']]
)
})(),
label : {
show : true,
position : 'top',
formatter : "{a} {b} {c}",
textStyle : {
color: 'blue'
}
}
}
},
data:[220, 232, 101, 234, 190, 330, 210]
},
{
name:'联盟广告',
type:'bar',
stack: '总量',
data:[120, '-', 451, 134, 190, 230, 110]
},
{
name:'直接访问',
type:'bar',
stack: '总量',
itemStyle: { // 系列级个性化
normal: {
borderWidth: 10,
borderColor:'tomato',
color: 'red'
},
emphasis: {
borderColor:'red',
color: 'blue'
}
},
data:[
320, 332, '-', 334,
{
value: 390,
symbolSize : 10, // 数据级个性化
itemStyle: {
normal: {
color :'lime'
},
emphasis: {
color: 'skyBlue'
}
}
},
330, 320
]
},
{
name:'搜索引擎',
type:'bar',
barWidth: 40, // 系列级个性化，柱形宽度
itemStyle: {
normal: { // 系列级个性化，横向渐变填充
borderRadius: 5,
color : (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 0, 1000, 0,
[[0, 'rgba(30,144,255,0.8)'],[1, 'rgba(138,43,226,0.8)']]
)
})(),
label : {
show : true,
textStyle : {
fontSize : '20',
fontFamily : '微软雅黑',
fontWeight : 'bold'
}
}
}
},
data:[
620, 732,
{
value: 701,
itemStyle : { normal: {label : {position: 'inside'}}}
},
734, 890, 930, 820]
}
]
}; return option; } </script>
</body>
</html>
Pie&饼状图
<!DOCTYPE html>
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<title>Echarts图表Demo</title>
<script src="js/esl/esl.js"></script> </head> <body> <div id="pie" style="width:800px;height:600px;"> </div>
<script type="text/javascript"> var fileLocation ='js/echarts';
require.config({ paths:{
echarts: fileLocation,
'echarts/chart/line': fileLocation,
'echarts/chart/bar': fileLocation,
'echarts/chart/pie': fileLocation }
}); // 作为入口
require(
[
'echarts',
'echarts/chart/pie'
], displayChart ); function displayChart(ec) {
//饼图
var pieChart = ec.init(document.getElementById('pie'));
var pieChartOtion = getPieChartOption();
pieChart.setOption(pieChartOtion);
} //获得Pie图的选项和数据
function getPieChartOption(){
var pieChartOption = {
tooltip : {
show: true,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
restore : true,
saveAsImage : true
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
center : ['35%', 200],
radius : 80,
itemStyle : {
normal : {
label : {
position : 'inner',
formatter : function(a,b,c,d) {return (d - 0).toFixed(0) + ' %'},
},
labelLine : {
show : false
}
}
},
data:[
{value:335, name:'直达'},
{value:679, name:'营销广告'},
{
value:1548,
name:'搜索引擎',
itemStyle : {
normal : {
label : {
show : false
}
},
emphasis : {
label : {
show : true,
formatter : "{b} : {d}%",
position : 'inner'
}
}
}
}
]
},
{
name:'访问来源',
type:'pie',
center : ['35%', 200],
radius : [110, 140],
data:[
{value:335, name:'直达'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{
value:1048,
name:'百度',
itemStyle : {
normal : {
color : (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getRadialGradient(
300, 200, 110, 300, 200, 140,
[[0, 'rgba(255,255,0,1)'],[1, 'rgba(30,144,250,1)']]
)
})(),
label : {
textStyle : {
color : 'rgba(30,144,255,0.8)',
align : 'center',
baseline : 'middle',
fontFamily : '微软雅黑',
fontSize : 30,
fontWeight : 'bolder'
}
},
labelLine : {
length : 40,
lineStyle : {
color : '#f0f',
width : 3,
type : 'dotted'
}
}
}
}
},
{value:251, name:'谷歌'},
{
value:102,
name:'必应',
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true
},
labelLine : {
show : true,
length : 50
}
}
}
},
{value:147, name:'其他'}
]
},
{
name:'访问来源',
type:'pie',
startAngle: 90,
center : ['75%', 200],
radius : [80, 120],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
color: (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getRadialGradient(
650, 200, 80, 650, 200, 120,
[[0, 'rgba(255,255,0,1)'],[1, 'rgba(255,0,0,1)']]
)
})(),
label : {
show : true,
position : 'center',
formatter : "{d}%",
textStyle : {
color : 'red',
fontSize : '30',
fontFamily : '微软雅黑',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'直达'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
}; return pieChartOption;
}
</script>
</body>
</html>
ChinaMap&中国地图
<!DOCTYPE html>
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<title>Echarts图表Demo</title>
<script src="js/esl/esl.js"></script>
</head> <body> <div id="chinaMap" style="width:800px;height:600px;"> </div>
<script type="text/javascript"> var fileLocation ='js/echarts-map';
require.config({ paths:{
'echarts': fileLocation,
'echarts/chart/map': fileLocation
}
}); // 作为入口
require(
[
'echarts',
'echarts/chart/map'
],
displayChart
); function displayChart(ec) {
chinaMapChart = ec.init(document.getElementById('chinaMap'));
chinaMapChartOtion = getChinaMapChartOption();
chinaMapChart.setOption(chinaMapChartOtion);
} //获得Pie图的选项和数据
function getChinaMapChartOption(){
var chinaMapChartOption = {
tooltip : {
trigger: 'item'
},
toolbox: {
show : true,
orient: 'vertical',
x:'right',
y:'center',
feature : {
mark : true,
dataView : {readOnly: false}
}
},
series : [
{
tooltip: {
trigger: 'item',
formatter: '{b}'
},
name: '选择器',
type: 'map',
mapType: 'china',
mapLocation: {
x: 'left',
width: 500
},
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京', selected:false},
{name: '天津', selected:false},
{name: '上海', selected:false},
{name: '重庆', selected:false},
{name: '河北', selected:false},
{name: '河南', selected:false},
{name: '云南', selected:false},
{name: '辽宁', selected:false},
{name: '黑龙江', selected:false},
{name: '湖南', selected:false},
{name: '安徽', selected:false},
{name: '山东', selected:false},
{name: '新疆', selected:false},
{name: '江苏', selected:false},
{name: '浙江', selected:false},
{name: '江西', selected:false},
{name: '湖北', selected:false},
{name: '广西', selected:false},
{name: '甘肃', selected:false},
{name: '山西', selected:false},
{name: '内蒙古', selected:false},
{name: '陕西', selected:false},
{name: '吉林', selected:false},
{name: '福建', selected:false},
{name: '贵州', selected:false},
{name: '广东', selected:false},
{name: '青海', selected:false},
{name: '西藏', selected:false},
{name: '四川', selected:false},
{name: '宁夏', selected:false},
{name: '海南', selected:false},
{name: '台湾', selected:false},
{name: '香港', selected:false},
{name: '澳门', selected:false}
]
}
],
animation: false
};
var ecConfig = require('echarts/config'); chinaMapChart.on(ecConfig.EVENT.MAP_SELECTED, function(param){
var selected = param.selected;
var selectedProvince;
var name;
for (var i = 0, l = option.series[0].data.length; i < l; i++) {
name = option.series[0].data[i].name;
option.series[0].data[i].selected = selected[name];
if (selected[name]) {
selectedProvince = name;
}
}
if (typeof selectedProvince == 'undefined') {
option.series.splice(1);
option.legend = null;
option.dataRange = null;
chinaMapChart.setOption(option, true);
return;
}
option.series[1] = {
name: '随机数据',
type: 'map',
mapType: selectedProvince,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
mapLocation: {
x: 500
},
data:[
{name: '重庆市',value: Math.round(Math.random()*1000)},
{name: '北京市',value: Math.round(Math.random()*1000)},
{name: '天津市',value: Math.round(Math.random()*1000)},
{name: '上海市',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)},
{name: '巴音郭楞蒙古自治州',value: Math.round(Math.random()*1000)},
{name: '和田地区',value: Math.round(Math.random()*1000)},
{name: '哈密地区',value: Math.round(Math.random()*1000)},
{name: '阿克苏地区',value: Math.round(Math.random()*1000)},
{name: '阿勒泰地区',value: Math.round(Math.random()*1000)},
{name: '喀什地区',value: Math.round(Math.random()*1000)},
{name: '塔城地区',value: Math.round(Math.random()*1000)},
{name: '昌吉回族自治州',value: Math.round(Math.random()*1000)},
{name: '克孜勒苏柯尔克孜自治州',value: Math.round(Math.random()*1000)},
{name: '吐鲁番地区',value: Math.round(Math.random()*1000)},
{name: '伊犁哈萨克自治州',value: Math.round(Math.random()*1000)},
{name: '博尔塔拉蒙古自治州',value: Math.round(Math.random()*1000)},
{name: '乌鲁木齐市',value: Math.round(Math.random()*1000)},
{name: '克拉玛依市',value: Math.round(Math.random()*1000)},
{name: '阿拉尔市',value: Math.round(Math.random()*1000)},
{name: '图木舒克市',value: Math.round(Math.random()*1000)},
{name: '五家渠市',value: Math.round(Math.random()*1000)},
{name: '石河子市',value: Math.round(Math.random()*1000)},
{name: '那曲地区',value: Math.round(Math.random()*1000)},
{name: '阿里地区',value: Math.round(Math.random()*1000)},
{name: '日喀则地区',value: Math.round(Math.random()*1000)},
{name: '林芝地区',value: Math.round(Math.random()*1000)},
{name: '昌都地区',value: Math.round(Math.random()*1000)},
{name: '山南地区',value: Math.round(Math.random()*1000)},
{name: '拉萨市',value: Math.round(Math.random()*1000)},
{name: '呼伦贝尔市',value: Math.round(Math.random()*1000)},
{name: '阿拉善盟',value: Math.round(Math.random()*1000)},
{name: '锡林郭勒盟',value: Math.round(Math.random()*1000)},
{name: '鄂尔多斯市',value: Math.round(Math.random()*1000)},
{name: '赤峰市',value: Math.round(Math.random()*1000)},
{name: '巴彦淖尔市',value: Math.round(Math.random()*1000)},
{name: '通辽市',value: Math.round(Math.random()*1000)},
{name: '乌兰察布市',value: Math.round(Math.random()*1000)},
{name: '兴安盟',value: Math.round(Math.random()*1000)},
{name: '包头市',value: Math.round(Math.random()*1000)},
{name: '呼和浩特市',value: Math.round(Math.random()*1000)},
{name: '乌海市',value: Math.round(Math.random()*1000)},
{name: '海西蒙古族藏族自治州',value: Math.round(Math.random()*1000)},
{name: '玉树藏族自治州',value: Math.round(Math.random()*1000)},
{name: '果洛藏族自治州',value: Math.round(Math.random()*1000)},
{name: '海南藏族自治州',value: Math.round(Math.random()*1000)},
{name: '海北藏族自治州',value: Math.round(Math.random()*1000)},
{name: '黄南藏族自治州',value: Math.round(Math.random()*1000)},
{name: '海东地区',value: Math.round(Math.random()*1000)},
{name: '西宁市',value: Math.round(Math.random()*1000)},
{name: '甘孜藏族自治州',value: Math.round(Math.random()*1000)},
{name: '阿坝藏族羌族自治州',value: Math.round(Math.random()*1000)},
{name: '凉山彝族自治州',value: Math.round(Math.random()*1000)},
{name: '绵阳市',value: Math.round(Math.random()*1000)},
{name: '达州市',value: Math.round(Math.random()*1000)},
{name: '广元市',value: Math.round(Math.random()*1000)},
{name: '雅安市',value: Math.round(Math.random()*1000)},
{name: '宜宾市',value: Math.round(Math.random()*1000)},
{name: '乐山市',value: Math.round(Math.random()*1000)},
{name: '南充市',value: Math.round(Math.random()*1000)},
{name: '巴中市',value: Math.round(Math.random()*1000)},
{name: '泸州市',value: Math.round(Math.random()*1000)},
{name: '成都市',value: Math.round(Math.random()*1000)},
{name: '资阳市',value: Math.round(Math.random()*1000)},
{name: '攀枝花市',value: Math.round(Math.random()*1000)},
{name: '眉山市',value: Math.round(Math.random()*1000)},
{name: '广安市',value: Math.round(Math.random()*1000)},
{name: '德阳市',value: Math.round(Math.random()*1000)},
{name: '内江市',value: Math.round(Math.random()*1000)},
{name: '遂宁市',value: Math.round(Math.random()*1000)},
{name: '自贡市',value: Math.round(Math.random()*1000)},
{name: '黑河市',value: Math.round(Math.random()*1000)},
{name: '大兴安岭地区',value: Math.round(Math.random()*1000)},
{name: '哈尔滨市',value: Math.round(Math.random()*1000)},
{name: '齐齐哈尔市',value: Math.round(Math.random()*1000)},
{name: '牡丹江市',value: Math.round(Math.random()*1000)},
{name: '绥化市',value: Math.round(Math.random()*1000)},
{name: '伊春市',value: Math.round(Math.random()*1000)},
{name: '佳木斯市',value: Math.round(Math.random()*1000)},
{name: '鸡西市',value: Math.round(Math.random()*1000)},
{name: '双鸭山市',value: Math.round(Math.random()*1000)},
{name: '大庆市',value: Math.round(Math.random()*1000)},
{name: '鹤岗市',value: Math.round(Math.random()*1000)},
{name: '七台河市',value: Math.round(Math.random()*1000)},
{name: '酒泉市',value: Math.round(Math.random()*1000)},
{name: '张掖市',value: Math.round(Math.random()*1000)},
{name: '甘南藏族自治州',value: Math.round(Math.random()*1000)},
{name: '武威市',value: Math.round(Math.random()*1000)},
{name: '陇南市',value: Math.round(Math.random()*1000)},
{name: '庆阳市',value: Math.round(Math.random()*1000)},
{name: '白银市',value: Math.round(Math.random()*1000)},
{name: '定西市',value: Math.round(Math.random()*1000)},
{name: '天水市',value: Math.round(Math.random()*1000)},
{name: '兰州市',value: Math.round(Math.random()*1000)},
{name: '平凉市',value: Math.round(Math.random()*1000)},
{name: '临夏回族自治州',value: Math.round(Math.random()*1000)},
{name: '金昌市',value: Math.round(Math.random()*1000)},
{name: '嘉峪关市',value: Math.round(Math.random()*1000)},
{name: '普洱市',value: Math.round(Math.random()*1000)},
{name: '红河哈尼族彝族自治州',value: Math.round(Math.random()*1000)},
{name: '文山壮族苗族自治州',value: Math.round(Math.random()*1000)},
{name: '曲靖市',value: Math.round(Math.random()*1000)},
{name: '楚雄彝族自治州',value: Math.round(Math.random()*1000)},
{name: '大理白族自治州',value: Math.round(Math.random()*1000)},
{name: '临沧市',value: Math.round(Math.random()*1000)},
{name: '迪庆藏族自治州',value: Math.round(Math.random()*1000)},
{name: '昭通市',value: Math.round(Math.random()*1000)},
{name: '昆明市',value: Math.round(Math.random()*1000)},
{name: '丽江市',value: Math.round(Math.random()*1000)},
{name: '西双版纳傣族自治州',value: Math.round(Math.random()*1000)},
{name: '保山市',value: Math.round(Math.random()*1000)},
{name: '玉溪市',value: Math.round(Math.random()*1000)},
{name: '怒江傈僳族自治州',value: Math.round(Math.random()*1000)},
{name: '德宏傣族景颇族自治州',value: Math.round(Math.random()*1000)},
{name: '百色市',value: Math.round(Math.random()*1000)},
{name: '河池市',value: Math.round(Math.random()*1000)},
{name: '桂林市',value: Math.round(Math.random()*1000)},
{name: '南宁市',value: Math.round(Math.random()*1000)},
{name: '柳州市',value: Math.round(Math.random()*1000)},
{name: '崇左市',value: Math.round(Math.random()*1000)},
{name: '来宾市',value: Math.round(Math.random()*1000)},
{name: '玉林市',value: Math.round(Math.random()*1000)},
{name: '梧州市',value: Math.round(Math.random()*1000)},
{name: '贺州市',value: Math.round(Math.random()*1000)},
{name: '钦州市',value: Math.round(Math.random()*1000)},
{name: '贵港市',value: Math.round(Math.random()*1000)},
{name: '防城港市',value: Math.round(Math.random()*1000)},
{name: '北海市',value: Math.round(Math.random()*1000)},
{name: '怀化市',value: Math.round(Math.random()*1000)},
{name: '永州市',value: Math.round(Math.random()*1000)},
{name: '邵阳市',value: Math.round(Math.random()*1000)},
{name: '郴州市',value: Math.round(Math.random()*1000)},
{name: '常德市',value: Math.round(Math.random()*1000)},
{name: '湘西土家族苗族自治州',value: Math.round(Math.random()*1000)},
{name: '衡阳市',value: Math.round(Math.random()*1000)},
{name: '岳阳市',value: Math.round(Math.random()*1000)},
{name: '益阳市',value: Math.round(Math.random()*1000)},
{name: '长沙市',value: Math.round(Math.random()*1000)},
{name: '株洲市',value: Math.round(Math.random()*1000)},
{name: '张家界市',value: Math.round(Math.random()*1000)},
{name: '娄底市',value: Math.round(Math.random()*1000)},
{name: '湘潭市',value: Math.round(Math.random()*1000)},
{name: '榆林市',value: Math.round(Math.random()*1000)},
{name: '延安市',value: Math.round(Math.random()*1000)},
{name: '汉中市',value: Math.round(Math.random()*1000)},
{name: '安康市',value: Math.round(Math.random()*1000)},
{name: '商洛市',value: Math.round(Math.random()*1000)},
{name: '宝鸡市',value: Math.round(Math.random()*1000)},
{name: '渭南市',value: Math.round(Math.random()*1000)},
{name: '咸阳市',value: Math.round(Math.random()*1000)},
{name: '西安市',value: Math.round(Math.random()*1000)},
{name: '铜川市',value: Math.round(Math.random()*1000)},
{name: '清远市',value: Math.round(Math.random()*1000)},
{name: '韶关市',value: Math.round(Math.random()*1000)},
{name: '湛江市',value: Math.round(Math.random()*1000)},
{name: '梅州市',value: Math.round(Math.random()*1000)},
{name: '河源市',value: Math.round(Math.random()*1000)},
{name: '肇庆市',value: Math.round(Math.random()*1000)},
{name: '惠州市',value: Math.round(Math.random()*1000)},
{name: '茂名市',value: Math.round(Math.random()*1000)},
{name: '江门市',value: Math.round(Math.random()*1000)},
{name: '阳江市',value: Math.round(Math.random()*1000)},
{name: '云浮市',value: Math.round(Math.random()*1000)},
{name: '广州市',value: Math.round(Math.random()*1000)},
{name: '汕尾市',value: Math.round(Math.random()*1000)},
{name: '揭阳市',value: Math.round(Math.random()*1000)},
{name: '珠海市',value: Math.round(Math.random()*1000)},
{name: '佛山市',value: Math.round(Math.random()*1000)},
{name: '潮州市',value: Math.round(Math.random()*1000)},
{name: '汕头市',value: Math.round(Math.random()*1000)},
{name: '深圳市',value: Math.round(Math.random()*1000)},
{name: '东莞市',value: Math.round(Math.random()*1000)},
{name: '中山市',value: Math.round(Math.random()*1000)},
{name: '延边朝鲜族自治州',value: Math.round(Math.random()*1000)},
{name: '吉林市',value: Math.round(Math.random()*1000)},
{name: '白城市',value: Math.round(Math.random()*1000)},
{name: '松原市',value: Math.round(Math.random()*1000)},
{name: '长春市',value: Math.round(Math.random()*1000)},
{name: '白山市',value: Math.round(Math.random()*1000)},
{name: '通化市',value: Math.round(Math.random()*1000)},
{name: '四平市',value: Math.round(Math.random()*1000)},
{name: '辽源市',value: Math.round(Math.random()*1000)},
{name: '承德市',value: Math.round(Math.random()*1000)},
{name: '张家口市',value: Math.round(Math.random()*1000)},
{name: '保定市',value: Math.round(Math.random()*1000)},
{name: '唐山市',value: Math.round(Math.random()*1000)},
{name: '沧州市',value: Math.round(Math.random()*1000)},
{name: '石家庄市',value: Math.round(Math.random()*1000)},
{name: '邢台市',value: Math.round(Math.random()*1000)},
{name: '邯郸市',value: Math.round(Math.random()*1000)},
{name: '秦皇岛市',value: Math.round(Math.random()*1000)},
{name: '衡水市',value: Math.round(Math.random()*1000)},
{name: '廊坊市',value: Math.round(Math.random()*1000)},
{name: '恩施土家族苗族自治州',value: Math.round(Math.random()*1000)},
{name: '十堰市',value: Math.round(Math.random()*1000)},
{name: '宜昌市',value: Math.round(Math.random()*1000)},
{name: '襄樊市',value: Math.round(Math.random()*1000)},
{name: '黄冈市',value: Math.round(Math.random()*1000)},
{name: '荆州市',value: Math.round(Math.random()*1000)},
{name: '荆门市',value: Math.round(Math.random()*1000)},
{name: '咸宁市',value: Math.round(Math.random()*1000)},
{name: '随州市',value: Math.round(Math.random()*1000)},
{name: '孝感市',value: Math.round(Math.random()*1000)},
{name: '武汉市',value: Math.round(Math.random()*1000)},
{name: '黄石市',value: Math.round(Math.random()*1000)},
{name: '神农架林区',value: Math.round(Math.random()*1000)},
{name: '天门市',value: Math.round(Math.random()*1000)},
{name: '仙桃市',value: Math.round(Math.random()*1000)},
{name: '潜江市',value: Math.round(Math.random()*1000)},
{name: '鄂州市',value: Math.round(Math.random()*1000)},
{name: '遵义市',value: Math.round(Math.random()*1000)},
{name: '黔东南苗族侗族自治州',value: Math.round(Math.random()*1000)},
{name: '毕节地区',value: Math.round(Math.random()*1000)},
{name: '黔南布依族苗族自治州',value: Math.round(Math.random()*1000)},
{name: '铜仁地区',value: Math.round(Math.random()*1000)},
{name: '黔西南布依族苗族自治州',value: Math.round(Math.random()*1000)},
{name: '六盘水市',value: Math.round(Math.random()*1000)},
{name: '安顺市',value: Math.round(Math.random()*1000)},
{name: '贵阳市',value: Math.round(Math.random()*1000)},
{name: '烟台市',value: Math.round(Math.random()*1000)},
{name: '临沂市',value: Math.round(Math.random()*1000)},
{name: '潍坊市',value: Math.round(Math.random()*1000)},
{name: '青岛市',value: Math.round(Math.random()*1000)},
{name: '菏泽市',value: Math.round(Math.random()*1000)},
{name: '济宁市',value: Math.round(Math.random()*1000)},
{name: '德州市',value: Math.round(Math.random()*1000)},
{name: '滨州市',value: Math.round(Math.random()*1000)},
{name: '聊城市',value: Math.round(Math.random()*1000)},
{name: '东营市',value: Math.round(Math.random()*1000)},
{name: '济南市',value: Math.round(Math.random()*1000)},
{name: '泰安市',value: Math.round(Math.random()*1000)},
{name: '威海市',value: Math.round(Math.random()*1000)},
{name: '日照市',value: Math.round(Math.random()*1000)},
{name: '淄博市',value: Math.round(Math.random()*1000)},
{name: '枣庄市',value: Math.round(Math.random()*1000)},
{name: '莱芜市',value: Math.round(Math.random()*1000)},
{name: '赣州市',value: Math.round(Math.random()*1000)},
{name: '吉安市',value: Math.round(Math.random()*1000)},
{name: '上饶市',value: Math.round(Math.random()*1000)},
{name: '九江市',value: Math.round(Math.random()*1000)},
{name: '抚州市',value: Math.round(Math.random()*1000)},
{name: '宜春市',value: Math.round(Math.random()*1000)},
{name: '南昌市',value: Math.round(Math.random()*1000)},
{name: '景德镇市',value: Math.round(Math.random()*1000)},
{name: '萍乡市',value: Math.round(Math.random()*1000)},
{name: '鹰潭市',value: Math.round(Math.random()*1000)},
{name: '新余市',value: Math.round(Math.random()*1000)},
{name: '南阳市',value: Math.round(Math.random()*1000)},
{name: '信阳市',value: Math.round(Math.random()*1000)},
{name: '洛阳市',value: Math.round(Math.random()*1000)},
{name: '驻马店市',value: Math.round(Math.random()*1000)},
{name: '周口市',value: Math.round(Math.random()*1000)},
{name: '商丘市',value: Math.round(Math.random()*1000)},
{name: '三门峡市',value: Math.round(Math.random()*1000)},
{name: '新乡市',value: Math.round(Math.random()*1000)},
{name: '平顶山市',value: Math.round(Math.random()*1000)},
{name: '郑州市',value: Math.round(Math.random()*1000)},
{name: '安阳市',value: Math.round(Math.random()*1000)},
{name: '开封市',value: Math.round(Math.random()*1000)},
{name: '焦作市',value: Math.round(Math.random()*1000)},
{name: '许昌市',value: Math.round(Math.random()*1000)},
{name: '濮阳市',value: Math.round(Math.random()*1000)},
{name: '漯河市',value: Math.round(Math.random()*1000)},
{name: '鹤壁市',value: Math.round(Math.random()*1000)},
{name: '大连市',value: Math.round(Math.random()*1000)},
{name: '朝阳市',value: Math.round(Math.random()*1000)},
{name: '丹东市',value: Math.round(Math.random()*1000)},
{name: '铁岭市',value: Math.round(Math.random()*1000)},
{name: '沈阳市',value: Math.round(Math.random()*1000)},
{name: '抚顺市',value: Math.round(Math.random()*1000)},
{name: '葫芦岛市',value: Math.round(Math.random()*1000)},
{name: '阜新市',value: Math.round(Math.random()*1000)},
{name: '锦州市',value: Math.round(Math.random()*1000)},
{name: '鞍山市',value: Math.round(Math.random()*1000)},
{name: '本溪市',value: Math.round(Math.random()*1000)},
{name: '营口市',value: Math.round(Math.random()*1000)},
{name: '辽阳市',value: Math.round(Math.random()*1000)},
{name: '盘锦市',value: Math.round(Math.random()*1000)},
{name: '忻州市',value: Math.round(Math.random()*1000)},
{name: '吕梁市',value: Math.round(Math.random()*1000)},
{name: '临汾市',value: Math.round(Math.random()*1000)},
{name: '晋中市',value: Math.round(Math.random()*1000)},
{name: '运城市',value: Math.round(Math.random()*1000)},
{name: '大同市',value: Math.round(Math.random()*1000)},
{name: '长治市',value: Math.round(Math.random()*1000)},
{name: '朔州市',value: Math.round(Math.random()*1000)},
{name: '晋城市',value: Math.round(Math.random()*1000)},
{name: '太原市',value: Math.round(Math.random()*1000)},
{name: '阳泉市',value: Math.round(Math.random()*1000)},
{name: '六安市',value: Math.round(Math.random()*1000)},
{name: '安庆市',value: Math.round(Math.random()*1000)},
{name: '滁州市',value: Math.round(Math.random()*1000)},
{name: '宣城市',value: Math.round(Math.random()*1000)},
{name: '阜阳市',value: Math.round(Math.random()*1000)},
{name: '宿州市',value: Math.round(Math.random()*1000)},
{name: '黄山市',value: Math.round(Math.random()*1000)},
{name: '巢湖市',value: Math.round(Math.random()*1000)},
{name: '亳州市',value: Math.round(Math.random()*1000)},
{name: '池州市',value: Math.round(Math.random()*1000)},
{name: '合肥市',value: Math.round(Math.random()*1000)},
{name: '蚌埠市',value: Math.round(Math.random()*1000)},
{name: '芜湖市',value: Math.round(Math.random()*1000)},
{name: '淮北市',value: Math.round(Math.random()*1000)},
{name: '淮南市',value: Math.round(Math.random()*1000)},
{name: '马鞍山市',value: Math.round(Math.random()*1000)},
{name: '铜陵市',value: Math.round(Math.random()*1000)},
{name: '南平市',value: Math.round(Math.random()*1000)},
{name: '三明市',value: Math.round(Math.random()*1000)},
{name: '龙岩市',value: Math.round(Math.random()*1000)},
{name: '宁德市',value: Math.round(Math.random()*1000)},
{name: '福州市',value: Math.round(Math.random()*1000)},
{name: '漳州市',value: Math.round(Math.random()*1000)},
{name: '泉州市',value: Math.round(Math.random()*1000)},
{name: '莆田市',value: Math.round(Math.random()*1000)},
{name: '厦门市',value: Math.round(Math.random()*1000)},
{name: '丽水市',value: Math.round(Math.random()*1000)},
{name: '杭州市',value: Math.round(Math.random()*1000)},
{name: '温州市',value: Math.round(Math.random()*1000)},
{name: '宁波市',value: Math.round(Math.random()*1000)},
{name: '舟山市',value: Math.round(Math.random()*1000)},
{name: '台州市',value: Math.round(Math.random()*1000)},
{name: '金华市',value: Math.round(Math.random()*1000)},
{name: '衢州市',value: Math.round(Math.random()*1000)},
{name: '绍兴市',value: Math.round(Math.random()*1000)},
{name: '嘉兴市',value: Math.round(Math.random()*1000)},
{name: '湖州市',value: Math.round(Math.random()*1000)},
{name: '盐城市',value: Math.round(Math.random()*1000)},
{name: '徐州市',value: Math.round(Math.random()*1000)},
{name: '南通市',value: Math.round(Math.random()*1000)},
{name: '淮安市',value: Math.round(Math.random()*1000)},
{name: '苏州市',value: Math.round(Math.random()*1000)},
{name: '宿迁市',value: Math.round(Math.random()*1000)},
{name: '连云港市',value: Math.round(Math.random()*1000)},
{name: '扬州市',value: Math.round(Math.random()*1000)},
{name: '南京市',value: Math.round(Math.random()*1000)},
{name: '泰州市',value: Math.round(Math.random()*1000)},
{name: '无锡市',value: Math.round(Math.random()*1000)},
{name: '常州市',value: Math.round(Math.random()*1000)},
{name: '镇江市',value: Math.round(Math.random()*1000)},
{name: '吴忠市',value: Math.round(Math.random()*1000)},
{name: '中卫市',value: Math.round(Math.random()*1000)},
{name: '固原市',value: Math.round(Math.random()*1000)},
{name: '银川市',value: Math.round(Math.random()*1000)},
{name: '石嘴山市',value: Math.round(Math.random()*1000)},
{name: '儋州市',value: Math.round(Math.random()*1000)},
{name: '文昌市',value: Math.round(Math.random()*1000)},
{name: '乐东黎族自治县',value: Math.round(Math.random()*1000)},
{name: '三亚市',value: Math.round(Math.random()*1000)},
{name: '琼中黎族苗族自治县',value: Math.round(Math.random()*1000)},
{name: '东方市',value: Math.round(Math.random()*1000)},
{name: '海口市',value: Math.round(Math.random()*1000)},
{name: '万宁市',value: Math.round(Math.random()*1000)},
{name: '澄迈县',value: Math.round(Math.random()*1000)},
{name: '白沙黎族自治县',value: Math.round(Math.random()*1000)},
{name: '琼海市',value: Math.round(Math.random()*1000)},
{name: '昌江黎族自治县',value: Math.round(Math.random()*1000)},
{name: '临高县',value: Math.round(Math.random()*1000)},
{name: '陵水黎族自治县',value: Math.round(Math.random()*1000)},
{name: '屯昌县',value: Math.round(Math.random()*1000)},
{name: '定安县',value: Math.round(Math.random()*1000)},
{name: '保亭黎族苗族自治县',value: Math.round(Math.random()*1000)},
{name: '五指山市',value: Math.round(Math.random()*1000)}
]
};
option.legend = {
x:'right',
data:['随机数据']
};
option.dataRange = {
orient: 'horizontal',
x: 'right',
min: 0,
max: 1000,
color:['orange','yellow'],
text:['高','低'], // 文本，默认为数值文本
splitNumber:0
};
chinaMapChart.setOption(option, true);
}) return chinaMapChartOption;
}
</script>
</body>
</html>
下载地址：http://download.csdn.net/detail/fansunion/6629107(修改后的示例)
原文链接：http://FansUnion.cn/articles/3319(小雷网-FansUnion.cn)
百度Echarts-免费的商业产品图表库的更多相关文章
- ECharts一个强大的商业产品图表库
Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构 ...
- ECharts（Enterprise Charts 商业产品图表库）初识
一.简介 大数据时代,重新定义图表的时候到了,所以随之ECharts就随之出现了. ECharts(Enterprise Charts 商业产品图表库) 是基于Canvas的,纯Javascript ...
- ECharts JavaScript图表库 ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
- 基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
- 开源的数据可视化JavaScript图表库：ECharts
ECharts (Enterprise Charts 商业产品图表库)是基于HTML5 Canvas的一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽 ...
- ECharts-基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表
ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...
- 三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？
最近阿里正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点.同时BizCharts基于G2进行封装,Bizcharts也继承了G2相关特性. ...
- 免费而优秀的图表JS插件
1.百度的Echart ECharts,缩写来自Enterprise Charts,是百度推出的一款开源的,商业级数据图表,它最初是为了满足百度公司商业体系里各种业务系统(如凤巢.广告管家等等)的报表 ...
- 2018年最佳JavaScript数据可视化和图表库
现在有很多图表库,但哪一个最好用?这可能取决于许多因素,如业务需求,数据类型,图表本身的目的等等.在本文中,每个JavaScript图表库将与一些关键因素进行比较,包括图表类型,商业或免费和开源状态. ...
随机推荐
- Unity 调用 Android Native 方法(一) 获得Android系统音量
学习雷锋,好榜样,接下来的这一系类教程里,将通过unity来实现Android端的一些常用功能, 不需要在 Asset/Plugins/Android 目录下引用jar包或者aar包,这是重点. us ...
- Spring Cloud学习笔记【六】Hystrix 监控数据聚合 Turbine
上一篇我们介绍了使用 Hystrix Dashboard 来展示 Hystrix 用于熔断的各项度量指标.通过 Hystrix Dashboard,我们可以方便的查看服务实例的综合情况,比如:服务调用 ...
- FZOJ 2176 easy problem ( 树链剖分 )
pid=2176" target="_blank">题目链接~~> 做题感悟:感觉做多了树链剖分的题目,有很多是树链剖分 + 想法.. 解题思路: 这题非常明 ...
- 实战Jquery(四)--标签页效果
这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是web层经常使用的效果.越到后面越发认为技术这东西,就是一种思路的展现,懂了要实现 ...
- centos7 出现please make your choice from 1 to enter..
忘了截图了 刚出现的~~ 输入1 回车 输入q 回车 最后回车 便可以正常启动
- BZOJ 3544 treap （set）
我只是想找个treap的练习题-- 每回找到lower_bound 就好啦 //By SiriusRen #include <cstdio> #include <cstring> ...
- Oracle 导入导出 创建用户等
localhost:1158/emD:\app\Administrator\product\11.2.0\dbhome_1\bin\imp.exe log path E:\app\Administ ...
- Network Stack : HTTP authentication
HTTP authentication As specified in RFC 2617, HTTP supports authentication using the WWW-Authenticat ...
- Linux 串口终端调试工具minicom
minicom是一个串口通信工具,就像Windows下的超级终端.可用来与串口设备通信,如调试交换机和Modem等,它的使用完全依靠键盘的操作. 一.安装: Linux各发行版因软件管理方式不同而不同 ...
- Docker学习总结（6）——通过 Docker 化一个博客网站来开启我们的 Docker 之旅
通过 Docker 化一个博客网站来开启我们的 Docker 之旅 这篇文章包含 Docker 的基本概念,以及如何通过创建一个定制的 Dockerfile 来 Docker 化Dockerize一个 ...