2021年首更~~~
一、echarts geo地图模块
导入地图json，我罕用的两种渠道
1、通过地图选择器下载geoJSON地址。
2、DIY，应用geojson.io工具绘制，这工具除了绘制边界外，还能增加区域的shortcode（划重点）和cp（中心点），实现后转化为json格局后即可导入
实现代码
html设置有挂载id的盒标签
js(蕴含悬停弹窗)
var mapChart = echarts.init(document.getElementById('map'));mapChart.showLoading();var data = [];$.getJSON("./js/shaoguan.json", function (geoJson) { echarts.registerMap('深圳市', geoJson); data = geoJson.features.map((item) => { // 显示窗口的数据转换 return { value: (Math.random() * 1000).toFixed(2), name: item.properties.name } }); mapChart.hideLoading(); function getMapOption(data) { var series = []; series.push({ tooltip: { // 显示的窗口 trigger: 'item', position: function (point, params, dom, rect, size) { return [point[0] + 130, point[1]]; }, formatter: function (item) { var tipHtml = ''; return tipHtml; } }, name: '深圳市', type: 'map', map: '深圳市', // 自定义扩大图表类型 zoom: 0.58, //缩放 showLegendSymbol: false, label: { // 文字 show: true, normal: { show: true, textStyle: { color: '#fff', fontSize: 20, } }, emphasis: { textStyle: { color: '#fff', fontSize: 20, } } }, itemStyle: { //地图款式 normal: { areaColor: '#013C62', shadowColor: '#182f68', shadowOffsetX: 0, shadowOffsetY: 0, borderColor: '#2ab8ff', borderWidth: 1.5, }, emphasis: { areaColor: '#08ffe1', borderWidth: 0, color: 'green', label: { show: false } } }, emphasis: { //鼠标移入动静的时候显示的默认款式 itemStyle: { areaColor: '#2AB8FF', borderColor: '#404a59', borderWidth: 1 } }, layoutCenter: ['40%', '50%'], layoutSize: '160%', markPoint: { symbol: 'none' }, data: data, }) let options = { backgroundColor: 'transparent', // 背景 tooltip: { // 窗口外框 backgroundColor: 'rgba(0,0,0,0)', trigger: 'item', }, grid: [{ left: '30%', }], legend: { show: false, }, visualMap: { show: false, type: 'piecewise', //分段型 left: 0, top: 0, splitNumber: 6, inverse: true, backgroundColor: 'transparent', textGap: 5, textStyle: { color: '#ffffff', fontSize: 16 }, pieces: [{ min: 0, max: 0, color: '#013C62' }, { min: 1, max: 1, color: '#deb5b4' }, { min: 2, max: 10, color: '#dd6b66' }], }, series: series } return options; } mapChart.setOption(getMapOption(lineData));})其中option中visualMap是区域色彩字段，依据接口返回字段能够设置不同色彩的区块
二、面积雷同的饼状图显示差异化数据
间接上option
数据格式均为[{name: '', value: ''}]
function getRingPlusPieOption (outdata, innerdata, labellist, trueValue){ var outData = []; var innerData = []; for (var i = 0; i < outdata.length; i++) { outData.push({name: outdata[i].name, value: outdata[i].value}) } for (var i = 0; i < innerdata.length; i++) { innerData.push({name: innerdata[i].name, value: innerdata[i].value}) } var option = { tooltip: { trigger: 'item', formatter: function (item) { if (item.componentIndex === 0) { return `${item.name}：${trueValue[item.dataIndex]}` } else { return `${item.name}：${trueValue[item.dataIndex+3]}` } } }, color: colorGroup2, legend: { top: 80, orient: 'vertical', textStyle: {fontSize: 16, color: '#fff',padding:[0, 12 ,0 ,4],}, left: 10, data: labellist }, series: [ { name: '社团状况', type: 'pie', selectedMode: 'single', radius: [0, '40%'], label: { show:false }, labelLine: { show: false }, data: innerData }, { name: '社团状况', type: 'pie', label: { normal: { textStyle: { fontSize: 16, color:'#fff' }, position: 'inner' }, }, labelLine: { show: false }, radius: ['55%', '75%'], data: outData } ] }; return option;}