三：前后端整合echarts图表

百度echarts介绍使用echarts开发是注意事项装图表的容器定义一个唯一id,并且给定容器宽高，否则图标展示不出来注册使用省份地图时 不能使用"china"，否则省份地图会包含南海诸岛 展示效果ajax获取后端前端展示图表标准柱状图带数据滚动轴的柱状图可下撰地图

百度echarts介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 官网：https://echarts.apache.org/zh/index.html 地图json文件下载：https://download.csdn.net/download/weixin_39172079/12566152

使用echarts开发是注意事项

装图表的容器定义一个唯一id,并且给定容器宽高，否则图标展示不出来

注册使用省份地图时 不能使用"china"，否则省份地图会包含南海诸岛

展示效果

下撰地图

ajax获取后端

前端发送ajax请求 后端接收请求并重新数据（重新数据库代码就不在这展示了）

前端展示图表

将后端获取的图标数据传递给对应的方法

标准柱状图

function technicalAnalysis(techList) { //初始化echarts实例 var technicalAnalysis = echarts.init(document.getElementById('technicalAnalysis')); // 指定图表的配置项和数据 var option = { title: { text: '' }, tooltip: {}, grid: { top: 10, bottom: 80 }, xAxis: { data: techList.map(function (tech) { return tech.techName; }), //配置文本倾斜 axisLabel:{ rotate: 60 } }, yAxis: {}, series: [{ name: '博客数量', type: 'bar', data: techList.map(function (tech) { return tech.techStudyNumber; }), label: { show: true, position: "top" } }] }; // 使用刚指定的配置项和数据显示图表。 technicalAnalysis.setOption(option); }

带数据滚动轴的柱状图

function studyRecord(recordList){ let categoryData = []; let valueData = []; statisticsRecord(recordList,categoryData,valueData); //初始化echarts实例 let studyRecord = echarts.init(document.getElementById('studyRecord')); // 指定图表的配置项和数据 let option = { title: { text: "", left: 10 }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { top: 10, bottom: 110 }, dataZoom: [{ type: 'inside' }, { type: 'slider', show: true, start: 50, end: 100, minValueSpan: 10, maxValueSpan: 30 }], xAxis: { data: categoryData, silent: false, splitLine: { show: false }, splitArea: { show: false }, //配置文本倾斜 axisLabel:{ rotate: 60 } }, yAxis: { splitArea: { show: false } }, series: [{ type: 'bar', data: valueData, // Set `large` for large data amount large: true }] }; // 使用刚指定的配置项和数据显示图表。 studyRecord.setOption(option); } function statisticsRecord(recordList,categoryData,valueData) { for (let i=0;i<recordList.length;i++){ record = recordList[i]; categoryData.push(dateHandle(record.recordDate)); valueData.push(record.recordNumber); } } function dateHandle(recordDate) { return recordDate.substr(0,10); }

可下撰地图

/** * 活动区域分布图 * @param mapName 地图文件名称 * @param matterList 地图数据 * @param level 地图层级 0：世界级地图 1：国家级 2：省份级 3：城市级 ... */ function concrenMatter(mapName,matterList,level){ $.get('/soyking/echarts/json/'+mapName,function(geoJson){ //注册地图 根据引用的地图文件确定 每个省份都必有对应的名称 如果省份用china会展示南海诸岛 let mapSign = "china"; if(level == 2){ mapSign = mapName; } echarts.registerMap(mapSign,geoJson); let map = echarts.init(document.getElementById("concrenMatter")); //map.clear(); let mapOption = { title: { text: '关注事件区域分布图', textStyle: { color: '#000000', fontSize: 16, fontWeight: 'bold', lineHeight: 40 }, top: -5 }, //鼠标提示框 tooltip: { trigger: 'item', showDelay: 0, transitionDuration: 0.2, formatter: function (params) { return params.seriesName + '<br/>' + params.name + ': ' + params.value; } }, toolbox: { top: 10, right: 30, itemSize: 20, feature: { //自定义工具 返回全国地图 myTool1: { show: level == 2, //只在省份地图才展示 title: "返回全国地图", icon: "image:///soyking/echarts/images/map_return.jpg", onclick: function () { concrenMatter("china_geo.json",chinaMatterList); } } } }, //视觉映射组件 visualMap: { left: 'right', min: 0, max: 30, inRange: { color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] }, text:['High','Low'], // 文本，默认为数值文本 calculable: true }, //数据 series:[ { name: '1', type: 'map', map: mapSign, //类型,与上文中注册地图的名称一致 zoom: 0.8, label: { normal: { show: true }, emphasis: { show: true } }, mapLocation:{ y:60 }, itemSytle:{ emphasis:{label:{show:false}} }, roam: true, data:matterList } ] }; map.setOption(mapOption); //注册点击事件 map.on("click",function (params) { //地图下撰实现 let name = params.name; if(name != undefined){ $.ajax({ url: "content/home/fromData", type: "post", data: {"name":name}, success: function (result) { if(result != undefined && result.mapName != null){ concrenMatter(result.mapName,result.matterList,2); } }, error: function () { console.log(name + "未发现下撰数据"); } }); } }); //每5s轮播数据 let index = 0; setInterval(function(){ map.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index++ }); if(index > 10){ index = 0; } },5000); map.resize(); }); }