关于javascript:echarts的实战案例一些三

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;
}