前段时间客户要求用中国地图来展示各个省份对应的数据，由于之间并没有使用过中国地图进行图形展示，询问了一下同事，同事推荐使用了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代码
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <script type="text/javascript" src="js/jquery-2.1.4/jquery.min.js"></script> 8 <script type="text/javascript" src="js/echarts-2.2.7/build/dist/echarts-all.js"></script> 9 <!-- 10 <script type="text/javascript" src="js/echarts-2.2.7/build/dist/echarts-all.js"></script> 11 --> 12 <title>Insert title here</title> 13 </head> 14 <body style="width:98%"> 15 <div id="map" style="height:500px;width:48%;border:1px solid #ccc;padding:10px;float: left"></div> 16 <div id="bar" style="height:500px;width:48%;border:1px solid #ccc;padding:10px;float: right"></div> 17 <script type="text/javascript"> 18 var myChart = echarts.init(document.getElementById("map")); 19 option = { 20 title : { 21 text: 'iphone销量', 22 subtext: '纯属虚构', 23 x:'center' 24 }, 25 tooltip : { 26 trigger: 'item' 27 }, 28 legend: { 29 orient: 'vertical', 30 x:'left', 31 data:['iphone3','iphone4','iphone5'] 32 }, 33 dataRange: { 34 min: 0, 35 max: 2500, 36 x: 'left', 37 y: 'bottom', 38 text:['高','低'], // 文本，默认为数值文本 39 color: ['orangered','yellow','lightskyblue'],//设置数字变化对应的颜色变化 40 calculable : true 41 }, 42 toolbox: { 43 show: true, 44 orient : 'vertical', 45 x: 'right', 46 y: 'center' 47 /* 48 feature : { 49 mark : {show: true}, 50 dataView : {show: true, readOnly: false}, 51 restore : {show: true}, 52 saveAsImage : {show: true} 53 } 54 */ 55 }, 56 roamController: { 57 show: true, 58 x: 'right', 59 mapTypeControl: { 60 'china': true 61 } 62 }, 63 series : [ 64 { 65 name: 'iphone3', 66 type: 'map', 67 mapType: 'china', 68 roam: false, 69 itemStyle:{ 70 normal:{label:{show:true}}, 71 emphasis:{label:{show:true}} 72 }, 73 data:[ 74 {name: '北京',value: 100}, 75 {name: '天津',value: Math.round(Math.random()*1000)}, 76 {name: '上海',value: Math.round(Math.random()*1000)}, 77 {name: '重庆',value: Math.round(Math.random()*1000)}, 78 {name: '河北',value: Math.round(Math.random()*1000)}, 79 {name: '河南',value: Math.round(Math.random()*1000)}, 80 {name: '云南',value: Math.round(Math.random()*1000)}, 81 {name: '辽宁',value: Math.round(Math.random()*1000)}, 82 {name: '黑龙江',value: Math.round(Math.random()*1000)}, 83 {name: '湖南',value: Math.round(Math.random()*1000)}, 84 {name: '安徽',value: Math.round(Math.random()*1000)}, 85 {name: '山东',value: Math.round(Math.random()*1000)}, 86 {name: '新疆',value: Math.round(Math.random()*1000)}, 87 {name: '江苏',value: Math.round(Math.random()*1000)}, 88 {name: '浙江',value: Math.round(Math.random()*1000)}, 89 {name: '江西',value: Math.round(Math.random()*1000)}, 90 {name: '湖北',value: Math.round(Math.random()*1000)}, 91 {name: '广西',value: Math.round(Math.random()*1000)}, 92 {name: '甘肃',value: Math.round(Math.random()*1000)}, 93 {name: '山西',value: Math.round(Math.random()*1000)}, 94 {name: '内蒙古',value: Math.round(Math.random()*1000)}, 95 {name: '陕西',value: Math.round(Math.random()*1000)}, 96 {name: '吉林',value: Math.round(Math.random()*1000)}, 97 {name: '福建',value: Math.round(Math.random()*1000)}, 98 {name: '贵州',value: Math.round(Math.random()*1000)}, 99 {name: '广东',value: Math.round(Math.random()*1000)}, 100 {name: '青海',value: Math.round(Math.random()*1000)}, 101 {name: '西藏',value: Math.round(Math.random()*1000)}, 102 {name: '四川',value: Math.round(Math.random()*1000)}, 103 {name: '宁夏',value: Math.round(Math.random()*1000)}, 104 {name: '海南',value: Math.round(Math.random()*1000)}, 105 {name: '台湾',value: Math.round(Math.random()*1000)}, 106 {name: '香港',value: Math.round(Math.random()*1000)}, 107 {name: '澳门',value: Math.round(Math.random()*1000)} 108 ] 109 }, 110 { 111 name: 'iphone4', 112 type: 'map', 113 mapType: 'china', 114 itemStyle:{ 115 normal:{label:{show:true}}, 116 emphasis:{label:{show:true}} 117 }, 118 data:[ 119 {name: '北京',value: 200}, 120 {name: '天津',value: Math.round(Math.random()*1000)}, 121 {name: '上海',value: Math.round(Math.random()*1000)}, 122 {name: '重庆',value: Math.round(Math.random()*1000)}, 123 {name: '河北',value: Math.round(Math.random()*1000)}, 124 {name: '安徽',value: Math.round(Math.random()*1000)}, 125 {name: '新疆',value: Math.round(Math.random()*1000)}, 126 {name: '浙江',value: Math.round(Math.random()*1000)}, 127 {name: '江西',value: Math.round(Math.random()*1000)}, 128 {name: '山西',value: Math.round(Math.random()*1000)}, 129 {name: '内蒙古',value: Math.round(Math.random()*1000)}, 130 {name: '吉林',value: Math.round(Math.random()*1000)}, 131 {name: '福建',value: Math.round(Math.random()*1000)}, 132 {name: '广东',value: Math.round(Math.random()*1000)}, 133 {name: '西藏',value: Math.round(Math.random()*1000)}, 134 {name: '四川',value: Math.round(Math.random()*1000)}, 135 {name: '宁夏',value: Math.round(Math.random()*1000)}, 136 {name: '香港',value: Math.round(Math.random()*1000)}, 137 {name: '澳门',value: Math.round(Math.random()*1000)} 138 ] 139 }, 140 { 141 name: 'iphone5', 142 type: 'map', 143 mapType: 'china', 144 itemStyle:{ 145 normal:{label:{show:true}}, 146 emphasis:{label:{show:true}} 147 }, 148 data:[ 149 {name: '北京',value:300}, 150 {name: '天津',value: Math.round(Math.random()*1000)}, 151 {name: '上海',value: Math.round(Math.random()*1000)}, 152 {name: '广东',value: Math.round(Math.random()*1000)}, 153 {name: '台湾',value: Math.round(Math.random()*1000)}, 154 {name: '香港',value: Math.round(Math.random()*1000)}, 155 {name: '澳门',value: Math.round(Math.random()*1000)} 156 ] 157 } 158 ] 159 }; 160 161 myChart.setOption(option); 162 163 var barChart = echarts.init(document.getElementById("bar")); 164 barOption = { 165 title: { 166 x: 'center', 167 text: 'ECharts例子个数统计', 168 subtext: 'Rainbow bar example', 169 link: 'http://echarts.baidu.com/doc/example.html' 170 }, 171 tooltip: { 172 trigger: 'item' 173 }, 174 toolbox: { 175 show: true, 176 feature: { 177 dataView: {show: true, readOnly: false}, 178 restore: {show: true}, 179 saveAsImage: { 180 show: true, 181 name:'保存图片的名称'//保存图片的名称 182 } 183 } 184 }, 185 calculable: true, 186 grid: { 187 borderWidth: 0, 188 y: 80, 189 y2: 60 190 }, 191 xAxis: [ 192 { 193 type: 'category', 194 show: false, 195 data: ['Line', 'Bar', 'Scatter', 'K', 'Pie', 'Radar', 'Chord', 'Force', 'Map', 'Gauge', 'Funnel'] 196 } 197 ], 198 yAxis: [ 199 { 200 type: 'value', 201 show: false 202 } 203 ], 204 series: [ 205 { 206 name: 'ECharts例子个数统计', 207 type: 'bar', 208 itemStyle: { 209 normal: { 210 color: function(params) { 211 // build a color map as your need. 212 var colorList = [ 213 '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', 214 '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', 215 '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' 216 ]; 217 return colorList[params.dataIndex] 218 }, 219 label: { 220 show: true, 221 position: 'top', 222 formatter: '{b}\n{c}' 223 } 224 } 225 }, 226 data: [12,21,10,4,12,5,6,5,25,23,7], 227 markPoint: { 228 tooltip: { 229 trigger: 'item', 230 backgroundColor: 'rgba(0,0,0,0)', 231 formatter: function(params){ 232 return '<img src="' 233 + params.data.symbol.replace('image://', '') 234 + '"/>'; 235 } 236 }, 237 data: [ 238 {xAxis:0, y: 350, name:'Line', symbolSize:20, symbol: 'image://../asset/ico/折线图.png'}, 239 {xAxis:1, y: 350, name:'Bar', symbolSize:20, symbol: 'image://../asset/ico/柱状图.png'}, 240 {xAxis:2, y: 350, name:'Scatter', symbolSize:20, symbol: 'image://../asset/ico/散点图.png'}, 241 {xAxis:3, y: 350, name:'K', symbolSize:20, symbol: 'image://../asset/ico/K线图.png'}, 242 {xAxis:4, y: 350, name:'Pie', symbolSize:20, symbol: 'image://../asset/ico/饼状图.png'}, 243 {xAxis:5, y: 350, name:'Radar', symbolSize:20, symbol: 'image://../asset/ico/雷达图.png'}, 244 {xAxis:6, y: 350, name:'Chord', symbolSize:20, symbol: 'image://../asset/ico/和弦图.png'}, 245 {xAxis:7, y: 350, name:'Force', symbolSize:20, symbol: 'image://../asset/ico/力导向图.png'}, 246 {xAxis:8, y: 350, name:'Map', symbolSize:20, symbol: 'image://../asset/ico/地图.png'}, 247 {xAxis:9, y: 350, name:'Gauge', symbolSize:20, symbol: 'image://../asset/ico/仪表盘.png'}, 248 {xAxis:10, y: 350, name:'Funnel', symbolSize:20, symbol: 'image://../asset/ico/漏斗图.png'}, 249 ] 250 } 251 } 252 ] 253 }; 254 255 barChart.setOption(barOption); 256 //点击barChart的保存图片时把myChart图形一起保存 257 barChart.connect(myChart); 258 //window.setTimeout(ajax,100); 259 </script> 260 </body> 261 262 </html>
3.运行效果
扫一扫
910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
