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