JS Echarts 地图颜色配置

问题

中国每个省份根据数据大小的不同，显示不同的颜色

解决

import {
  registerMap
} from 'echarts/core'
import china from '@/utils/data/china.json'
registerMap('china', china)

var province = [
  '福建',
  '江苏',
  '浙江',
  '安徽',
  '广东',
  '北京',
  '山东',
  '上海',
  '辽宁',
  '四川',
  '河北',
  '河南',
  '湖南',
  '山西',
  '江西',
  '内蒙古',
  '湖北',
  '广西',
  '重庆',
  '天津',
  '陕西',
  '贵州',
  '宁夏',
  '云南',
  '吉林',
  '青海',
  '新疆',
  '黑龙江',
  '甘肃',
  '西藏',
  '海南',
];
var data = [
  42, 41, 37, 33, 24, 23, 19, 18, 13, 13, 10, 8, 8, 7, 7, 6, 6, 5, 5, 4, 4, 4,
  3, 3, 3, 2, 2, 2, 2, 0, 0,
];
var res = [];
for (var j = 0; j < data.length; j++) {
  res.push({
    name: province[j],
    value: data[j],
  });
}
res.sort(function (a, b) {
  return a.value - b.value;
});
var res1 = [];
var res2 = [];
for (var t = 0; t < 10; t++) {
  res1[t] = res[res.length - 1 - t].name;
  res2[t] = res[res.length - 1 - t].value;
}

const marOption = {
  visualMap: {
    type: 'piecewise',
    text: ['大', '小'],
    pieces: [
      {
        // 颜色区间
        min: 41,
        color: '#73240D',
      },
      {
        min: 31,
        max: 40,
        color: '#BB0000',
      },

      {
        min: 21,
        max: 30,
        color: '#BD430A',
      },
      {
        min: 11,
        max: 20,
        color: '#E08150',
      },
      {
        min: 1,
        max: 10,
        color: '#E9B090',
      },
      {
        value: 0,
        color: '#ffffff',
      },
    ],
    textStyle: {
      color: 'black',
    },
  },
  series: [
    {
      name: 'mapSer',
      type: 'map',
      map: 'china',
      roam: false,
      // geoIndex: 0,
      label: {
        show: false,
      },
      data: res,
    },
  ],
};