来源：
官方示例
Echarts2.0下载：http://echarts.baidu.com/build/echarts-2.2.7.zip
实现效果：
JSON数据(来自后台):
{"code":100,"msg":"处理成功！","extend":{"bsgData":[{"name":"北京","value":"19732.42"},{"name":"上海","value":"14911.89"},{"name":"广东","value":"113283.55"}],"items":[{"name":"北京","value":"19732.42","selected":true},{"name":"上海","value":"14911.89","selected":true},{"name":"天津","value":"73632.49","selected":null},{"name":"重庆","value":"12486.50","selected":null},{"name":"黑龙江","value":"48783.28","selected":null},{"name":"吉林","value":"34880.09","selected":null},{"name":"辽宁","value":"39580.84","selected":null},{"name":"内蒙古","value":"32599.24","selected":null},{"name":"河北","value":"81203.02","selected":null},{"name":"河南","value":"50849.52","selected":null},{"name":"山东","value":"139427.97","selected":null},{"name":"山西","value":"34608.82","selected":null},{"name":"江苏","value":"105759.13","selected":null},{"name":"安徽","value":"24326.93","selected":null},{"name":"陕西","value":"88882.80","selected":null},{"name":"宁夏","value":"24909.32","selected":null},{"name":"甘肃","value":"30429.12","selected":null},{"name":"青海","value":"15319.80","selected":null},{"name":"湖北","value":"19003.54","selected":null},{"name":"湖南","value":"36794.27","selected":null},{"name":"浙江","value":"65623.19","selected":null},{"name":"江西","value":"13382.57","selected":null},{"name":"福建","value":"25577.49","selected":null},{"name":"贵州","value":"26448.54","selected":null},{"name":"四川","value":"42736.70","selected":null},{"name":"广东","value":"113283.55","selected":true},{"name":"广西","value":"27108.63","selected":null},{"name":"云南","value":"18921.98","selected":null},{"name":"海南","value":"22842.63","selected":null},{"name":"新疆","value":"24413.70","selected":null},{"name":"西藏","value":"18251.18","selected":null},{"name":"香港","value":"10602.88","selected":null},{"name":"澳门","value":"2644.63","selected":null},{"name":"台湾","value":"22317.68","selected":null}]}}JSP源代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% pageContext.setAttribute("DashGoods_PATH", request.getContextPath()); %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> </head> <body> <div id="mainMap" style="height:500px;width:1000px;border:1px solid #ccc;padding:10px;"></div> <script src="${DashGoods_PATH }/echarts/echarts2.0/dist/echarts.js"></script> <script type="text/javascript" src="${DashGoods_PATH }/jquery/jquery-3.1.1.min.js"></script> <script> // 路径配置 require.config({ paths: { echarts: '${DashGoods_PATH }/echarts/echarts2.0/dist' } }); // 使用柱状图就加载bar模块，按需加载 require( [ 'echarts', 'echarts/chart/pie', 'echarts/chart/map', ], drawEcharts ); // 函数调用 function drawEcharts(ec) { drawMapAndPie(ec); } function drawMapAndPie(ec) { var myChart = ec.init(document.getElementById('mainMap'));//不能使用jQuery方式，否则无法初始化 var option = { title: { text: '达趣图书商城2019全国销量（元）', subtext: '数据来自216hzy' }, tooltip: { trigger: 'item' }, legend: { x: 'right', selectedMode: false, data: ['北京', '上海', '广东'] }, dataRange: { orient: 'horizontal', min: 0, max: 55000, text: ['高', '低'], // 文本，默认为数值文本 splitNumber: 0 }, toolbox: { show: true, orient: 'vertical', x: 'right', y: 'center', feature: { mark: { show: true }, dataView: { show: true, readOnly: false } } }, series: [{ name: '2019全国销量对比', type: 'map', mapType: 'china', mapLocation: { x: 'left' }, selectedMode: 'multiple', itemStyle: { normal: { label: { show: true } }, emphasis: { label: { show: true } } }, data: [] }, { name: '2019全国销量对比', type: 'pie', roseType: 'area', tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, center: [document.getElementById('mainMap').offsetWidth - 250, 300], radius: [30, 120], data: [] } ], animation: false }; $.ajax({ type: "get", async: false, //同步执行 url: "${DashGoods_PATH }/admin/getOrderMap", dataType: "json", //返回数据形式为json success: function(result) { if (result.code == 100) { var allData = []; var bsgData = []; allData = json_arrayAll(result.extend.items); //要特别注意json字符串转数组要对应好参数 bsgData = json_arrayBsg(result.extend.bsgData); for(var i=0; i<allData.length; i++){ option.series[0].data.push({ //特别要注意这里的data.push()函数 name: allData[i].name, value: allData[i].value, selected: allData[i].selected }); } for(var i=0; i<bsgData.length; i++){ option.series[1].data.push({ name: bsgData[i].name, value: bsgData[i].value }); } myChart.setOption(option, true); } }, error: function(errorMsg) { alert("图表请求数据失败啦!"); } }); //json转js数组 function json_arrayAll(data){ //带selected var len=eval(data).length; var arr=[]; for(var i=0;i<len;i++){ arr[i] =[]; //js中二维数组必须进行重复的声明，否则会undefind arr[i]['name']=data[i].name; arr[i]['value']=data[i].value; arr[i]['selected']=data[i].selected; } return arr; } function json_arrayBsg(data){//不带selected var len=eval(data).length; var arr=[]; for(var i=0;i<len;i++){ arr[i] =[]; //js中二维数组必须进行重复的声明，否则会undefind arr[i]['name']=data[i].name; arr[i]['value']=data[i].value; } return arr; } myChart.setOption(option, true); //必须加true,不然会有bug /* 给柱状图绑定click事件 */ var ecConfig = require('echarts/config'); function myBindEvent(param) { var selected = param.selected; var mapSeries = option.series[0]; var data = []; var legendData = []; var name; for(var p = 0, len = mapSeries.data.length; p < len; p++) { name = mapSeries.data[p].name; //mapSeries.data[p].selected = selected[name]; if(selected[name]) { data.push({ name: name, value: mapSeries.data[p].value }); legendData.push(name); } } option.legend.data = legendData; option.series[1].data = data; myChart.setOption(option, true); //必须加true,不然会有bug } /* 给legend绑定事件 */ myChart.on(ecConfig.EVENT.MAP_SELECTED, myBindEvent); } </script>写着玩的~
阿弥陀佛~
