Echarts显示行政区域图并上色

Echarts要显示行政区域图有几种方式，这里使用type: 'map'的方式，前提是有geojson数据，这个数据的获取可以从阿里云获取，高德提供的数据

http://datav.aliyun.com/tools/atlas/

选好要展示的行政区域后下载到本地，然后按照官网的demo写就好了，官网默认的方式是根据数值行政区域的颜色自动渐变变化，但有时我们需要对每个行政区域分别显示区域，那么就得依赖dataRange属性了，如下

  async initChart1() {
   
    const dom = document.getElementById('FJChart');
    const myChart = echarts.init(dom);
    const result = await this.http.get('assets/GX.json').toPromise();
    const geoJSON: any = result;
    echarts.registerMap('GX', geoJSON);
    myChart.setOption({
   
      title: {
   
        text: 'XXXX标题',
        textAlign: 'center',
        left: '50%',
      },
      dataRange: {
   
        x: 'right',
        y: 'center',
        show: true,
        splitList: [
          {
    start: 91, label: 'G', color: '#FF6699' },
          {
    start: 86, end: 90, label: 'F', color: '#CC3300' },
          {
    start: 81, end: 85, label: 'E', color: '#F7BB37' },
          {
    start: 61, end: 80, label: 'D', color: '#3BAE56' },
          {
    start: 41, end: 60, label: 'C', color: '#92D050' },
          {
    start: 21, end: 40, label: 'B', color: '#3899FF' },
          {
    start: 0, end: 20, label: 'A', color: '#BFBFBF' }
        ],
        textStyle: {
   
          color: '#3899FF'
        },
        // 取消选中模式
        selectedMode: false,
      },
      series: [
        {
   
          type: 'map',
          mapType: 'GX',
          name: '广西',
          label: {
   
            show: true
          },
          data: [
            {
    name: '南宁市',  value: 10 },
            {
    name: '柳州市',  value: 20 },
            {
    name: '桂林市',  value: 30 },
            {
    name: '北海市',  value: 40 },
            {
    name: '玉林市',  value: 50 },
            {
    name: '防城港市',  value: 60 },
            {
    name: '钦州市',  value: 70 },
            {
    name: '贺州市',  value: 80 },
            {
    name: '百色市',  value: 90 },
            {
    name: '河池市',  value: 16 },
            {
    name: '崇左市',  value: 36 },
            {
    name: '来宾市',  value: 46 },
            {
    name: '贵港市',  value: 56 },
            {
    name: '梧州市',  value: 66 },
          ],
        }
      ]
    })

  }

效果：

如果需要的是默认的渐变方式，那就不要属性dataRange添加visualMap属性

visualMap: {
   
  x: 'right',
  y: 'center',
  min: 0,
  max: 100,
  show: true,
  text: ['高', '低'],
  realtime: false,
  calculable: true,
  inRange: {
   
    color: ['lightskyblue', 'yellow', 'orangered']
  }
},

效果：