echarts作图散点全黑的

Question

我的问题只有一个，就是在于，怎么根据数据点所属的客户类别来标志对应的图例颜色

比如这张图,高级客户按道理应该显示红色。但是显示了黑色
我认为只需要一小点改动，但是上网查了资料不知道问题出在哪，希望能得到帮助

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

const data1 = [
  [24343.643, -6743.1696, '负级客户', 'Illinois'],
  [23456.829, -5088.5334, '负级客户', 'North Carolina'],
  [42688.306, -5112.8034, '负级客户', 'Pennsylvania'],
  [43359.8962, -8848.1427, '负级客户', 'Texas']
];

const data2 = [
  [1828.25, 496.3771, '低级客户', 'Alabama'],
  [11133.537, -1276.0025, '低级客户', 'Arizona'],
  [2707.64, 959.4027, '低级客户', 'Arkansas'],
  [10299.813, -4435.8483, '低级客户', 'Colorado'],
  [5307.21, 1479.7616, '低级客户', 'Connecticut'],
  [13754.983, 6053.2049, '低级客户', 'Delaware'],
  [77.76, 35.064, '低级客户', 'District of Columbia'],
  [26480.8275, 244.3372, '低级客户', 'Florida'],
  [19160.02, 6447.9819, '低级客户', 'Georgia'],
  [18516.45, 5139.5257, '低级客户', 'Indiana'],
  [716.41, 275.8638, '低级客户', 'Iowa'],
  [733.15, 263.3644, '低级客户', 'Kansas'],
  [14862.91, 4563.581, '低级客户', 'Kentucky'],
  [5501.55, 1212.9041, '低级客户', 'Louisiana'],
  [9451.6, 2780.607, '低级客户', 'Maryland'],
  [8143.076, 1710.5869, '低级客户', 'Massachusetts'],
  [25833.649, 8487.7618, '低级客户', 'Michigan'],
  [6334.15, 2361.3539, '低级客户', 'Minnesota'],
  [2997.24, 1028.562, '低级客户', 'Mississippi'],
  [9228.2, 1696.5325, '低级客户', 'Missouri'],
  [4229.28, 1465.9255, '低级客户', 'Montana'],
  [3579.35, 921.0303, '低级客户', 'Nebraska'],
  [3301.566, 360.7544, '低级客户', 'Nevada'],
  [1509.43, 480.214, '低级客户', 'New Hampshire'],
  [9483.55, 2266.0707, '低级客户', 'New Jersey'],
  [2818.558, 827.3904, '低级客户', 'New Mexico'],
  [919.91, 230.1497, '低级客户', 'North Dakota'],
  [23419.721, -1770.4294, '低级客户', 'Ohio'],
  [6225.91, 1754.7516, '低级客户', 'Oklahoma'],
  [2886.593, -377.1257, '低级客户', 'Oregon'],
  [3427.11, 467.4135, '低级客户', 'Rhode Island'],
  [1560.75, 294.6375, '低级客户', 'South Carolina'],
  [1153.41, 346.0717, '低级客户', 'South Dakota'],
  [16110.823, -3305.3366, '低级客户', 'Tennessee'],
  [2460.638, 477.1747, '低级客户', 'Utah'],
  [842.21, 263.9759, '低级客户', 'Vermont'],
  [7600.2, 1806.0146, '低级客户', 'Virginia'],
  [1209.824, 185.9216, '低级客户', 'West Virginia'],
  [5567.47, 1523.0807, '低级客户', 'Wisconsin']
];

const data3 = [
  [93821.595, 24318.5397, '中级客户', 'New York'],
  [65264.792, 17224.6126, '中级客户', 'Washington']
];
const data4 = [[146690.5765, 29392.1683, '高级客户', 'California']];

const schema = [
  { name: 'type', index: 0, text: '客户类别' },
  { name: 'sales', index: 1, text: '销售额' },
  { name: 'profit', index: 2, text: '利润' },
  { name: 'state', index: 3, text: '州' }
];
const itemStyle = {
  opacity: 50,
  shadowBlur: 10,
  shadowOffsetX: 0,
  shadowOffsetY: 0,
  shadowColor: 'rgba(0,0,0,0.3)'
}; //球的样式

option = {
  color: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588'], //图例颜色
  legend: {
    top: 10, //图例距离上端
    data: ['负级客户', '低级客户', '中级客户', '高级客户'],
    textStyle: {
      fontSize: 20 //图例字体
    }
  },
  grid: {
    //整体坐标轴布局
    left: '10%', //左边距
    right: 150, //右边距
    top: '18%', //上端距离
    bottom: '10%' //下端距离
  },
  tooltip: {
    backgroundColor: 'rgba(255,255,255,0.7)',
    formatter: function (param) {
      var value = param.value;
      // prettier-ignore
      return '
'
                + '州:' + ' ' + value[3] 
                +'
'
                + schema[0].text + '：' + value[2] + '
'+'

Answer 1

你的第二个组件中， inRange把颜色映射成了黑白的，并且亮度在0.9-0.5之间，所以就把其他颜色通道关闭了。把这个

 colorLightness: [0.9, 0.5] //球的明暗程度

删除掉就行。