前段时间客户要求用中国地图来展示各个省份对应的数据，由于之间并没有使用过中国地图进行图形展示，询问了一下同事，同事推荐使用了echarts,折腾了一些时间做demo,把使用中的一个demo跟大家分享一下

1.echarts的下载

要使用echarts,当然就需要echarts所对应的js文件，echarts的下载地址为：http://echarts.baidu.com/echarts2/doc/example.html。下载后对应的目录如下图所示：

我们只需要包echarts-2.2.7\build\dist下的echarts-all.js引入到项目中即可。

2.jsp代码

pageEncoding="UTF-8"%>

Insert title here

var myChart = echarts.init(document.getElementById("line"));

option = {

title : {

text: 'iphone销量',

subtext: '纯属虚构',

x:'center'

},

tooltip : {

trigger: 'item'

},

legend: {

orient: 'vertical',

x:'left',

data:['iphone3','iphone4','iphone5']

},

dataRange: {

min: 0,

max: 2500,

x: 'left',

y: 'bottom',

text:['高','低'],          // 文本，默认为数值文本

color: ['orangered','yellow','lightskyblue'],//设置数字变化对应的颜色变化

calculable : true

},

toolbox: {

show: true,

orient : 'vertical',

x: 'right',

y: 'center',

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

restore : {show: true},

saveAsImage : {show: true}

}

},

roamController: {

show: true,

x: 'right',

mapTypeControl: {

'china': true

}

},

series : [

{

name: 'iphone3',

type: 'map',

mapType: 'china',

roam: false,

itemStyle:{

normal:{label:{show:true}},

emphasis:{label:{show:true}}

},

data:[

{name: '北京',value: 100},

{name: '天津',value: Math.round(Math.random()*1000)},

{name: '上海',value: Math.round(Math.random()*1000)},

{name: '重庆',value: Math.round(Math.random()*1000)},

{name: '河北',value: Math.round(Math.random()*1000)},

{name: '河南',value: Math.round(Math.random()*1000)},

{name: '云南',value: Math.round(Math.random()*1000)},

{name: '辽宁',value: Math.round(Math.random()*1000)},

{name: '黑龙江',value: Math.round(Math.random()*1000)},

{name: '湖南',value: Math.round(Math.random()*1000)},

{name: '安徽',value: Math.round(Math.random()*1000)},

{name: '山东',value: Math.round(Math.random()*1000)},

{name: '新疆',value: Math.round(Math.random()*1000)},

{name: '江苏',value: Math.round(Math.random()*1000)},

{name: '浙江',value: Math.round(Math.random()*1000)},

{name: '江西',value: Math.round(Math.random()*1000)},

{name: '湖北',value: Math.round(Math.random()*1000)},

{name: '广西',value: Math.round(Math.random()*1000)},

{name: '甘肃',value: Math.round(Math.random()*1000)},

{name: '山西',value: Math.round(Math.random()*1000)},

{name: '内蒙古',value: Math.round(Math.random()*1000)},

{name: '陕西',value: Math.round(Math.random()*1000)},

{name: '吉林',value: Math.round(Math.random()*1000)},

{name: '福建',value: Math.round(Math.random()*1000)},

{name: '贵州',value: Math.round(Math.random()*1000)},

{name: '广东',value: Math.round(Math.random()*1000)},

{name: '青海',value: Math.round(Math.random()*1000)},

{name: '西藏',value: Math.round(Math.random()*1000)},

{name: '四川',value: Math.round(Math.random()*1000)},

{name: '宁夏',value: Math.round(Math.random()*1000)},

{name: '海南',value: Math.round(Math.random()*1000)},

{name: '台湾',value: Math.round(Math.random()*1000)},

{name: '香港',value: Math.round(Math.random()*1000)},

{name: '澳门',value: Math.round(Math.random()*1000)}

]

},

{

name: 'iphone4',

type: 'map',

mapType: 'china',

itemStyle:{

normal:{label:{show:true}},

emphasis:{label:{show:true}}

},

data:[

{name: '北京',value: 200},

{name: '天津',value: Math.round(Math.random()*1000)},

{name: '上海',value: Math.round(Math.random()*1000)},

{name: '重庆',value: Math.round(Math.random()*1000)},

{name: '河北',value: Math.round(Math.random()*1000)},

{name: '安徽',value: Math.round(Math.random()*1000)},

{name: '新疆',value: Math.round(Math.random()*1000)},

{name: '浙江',value: Math.round(Math.random()*1000)},

{name: '江西',value: Math.round(Math.random()*1000)},

{name: '山西',value: Math.round(Math.random()*1000)},

{name: '内蒙古',value: Math.round(Math.random()*1000)},

{name: '吉林',value: Math.round(Math.random()*1000)},

{name: '福建',value: Math.round(Math.random()*1000)},

{name: '广东',value: Math.round(Math.random()*1000)},

{name: '西藏',value: Math.round(Math.random()*1000)},

{name: '四川',value: Math.round(Math.random()*1000)},

{name: '宁夏',value: Math.round(Math.random()*1000)},

{name: '香港',value: Math.round(Math.random()*1000)},

{name: '澳门',value: Math.round(Math.random()*1000)}

]

},

{

name: 'iphone5',

type: 'map',

mapType: 'china',

itemStyle:{

normal:{label:{show:true}},

emphasis:{label:{show:true}}

},

data:[

{name: '北京',value:300},

{name: '天津',value: Math.round(Math.random()*1000)},

{name: '上海',value: Math.round(Math.random()*1000)},

{name: '广东',value: Math.round(Math.random()*1000)},

{name: '台湾',value: Math.round(Math.random()*1000)},

{name: '香港',value: Math.round(Math.random()*1000)},

{name: '澳门',value: Math.round(Math.random()*1000)}

]

}

]

};

myChart.setOption(option);

//window.setTimeout(ajax,100);

3.运行效果