echarts初始化图表的列表 中有bmi 和 weight 渲染的时候使用weight的值 怎么运营用bmi的值来判断每个点的颜色

Question

echarts初始化图表的列表 中有bmi 和 weight 渲染的时候使用weight的值 怎么运营用bmi的值来判断每个点的颜色？

echarts中 visualMap 设置颜色的值先写死了， 大老帮忙看看呗

Answer 1

可以通过 ECharts 中的 visualMap 组件来实现根据 BMI 值来判断每个点的颜色。具体实现步骤如下：

在 option 中添加 visualMap 组件，设置 visualMap.type 为 ‘continuous’，visualMap.min 和 visualMap.max 分别为 BMI 的最小值和最大值，visualMap.calculable 为 true，visualMap.inRange.color 为一个数组，数组中的每个元素代表一个颜色，visualMap.dimension 为 0，表示根据第一个维度（即 BMI）来设置颜色。

在 series 中的 itemStyle.normal 中添加 color 属性，值为一个数组，数组中的每个元素代表一个颜色，数组的长度应该与 visualMap.inRange.color 的长度相同。

下面是示例代码：

var mCharts = echarts.init(document.querySelector("div"))
var option = {
  visualMap: {
    type: 'continuous',
    min: 10,
    max: 30,
    calculable: true,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    },
    dimension: 0
  },
  xAxis: {
    type: 'category',    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: 'bmi',
    type: 'line',
    data: [20, 22, 25, 26, 27, 28, 29, 30, 31, 32],
    itemStyle: {
      normal: {
        color: function(params) {
          var colorList = ['#50a3ba', '#eac736', '#d94e5d']
          var index = 0
          if (params.value > 25) {
            index = 2
          } else if (params.value > 20) {
            index = 1
          }
          return colorList[index]
        }
      }
    }
  }]
}
mCharts.setOption(option)