vue中使用echarts实现不同颜色拐点雷达图

利用雷达图图层叠加，一个个点画，根据不同数组值画出不同颜色值的拐点。
例如：[1,2，‘ ’，2，‘ ’，3] （少于5的值，红色）
[‘ ’,‘ ’，6，‘ ’，‘ ’，‘ ’] （大于5少于8的值，绿色）等等。。。

Echarts官网：

https://echarts.apache.org/examples/zh/editor.html?c=radar

安装依赖：

npm install echarts -S

按需加载：（官网提供全部引入，按需引入，是否ES引入）

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  LegendComponent
} from 'echarts/components';
import {
  RadarChart
} from 'echarts/charts';
import {
  CanvasRenderer
} from 'echarts/renderers';

echarts.use(
  [TitleComponent, LegendComponent, RadarChart, CanvasRenderer]
);

mounted () {
    this.drawLine()
  },
``  methods: {
    drawLine () {
      let myChart = echarts.init(document.getElementById('myChart'));
      let valueList = [this.dataSet.activityScore, this.dataSet.habitScore, this.dataSet.intetionScore, this.dataSet.bodyScore, this.dataSet.bmrScore, this.dataSet.dietScore];//获取的6个点值
      //设置三个不同颜色的数组所需值
      let valueHeight = valueList.map((item) => { if (item > 9) { return item } else { return } })
      let valueNormal = valueList.map((item) => { if (item >= 7.5 && item <= 9) { return item } else { return } })
      let valueLow = valueList.map((item) => { if (item < 7.5) { return item } else { return } })
     //设置6个undefined值的数组以供下面画点时候，覆盖圆心点
      let valueNoList = valueList.map((item) => { if (item > 10000) { return item } else { return } })

      let option = {
        radar: [
          {
            splitLine: {
              lineStyle: {
                color: '#FCBD74'
              }
            }
          },
          {
            indicator: [
              { name: '运动指数', max: 10, },
              { name: '习惯指数', max: 10 },
              { name: '减重动力\n指数', max: 10 },
              { name: '体重指数', max: 10 },
              { name: '基础代谢\n指数', max: 10 },
              { name: '饮食指数', max: 10 }
            ],
            axisNameGap: 6,
            center: ['50%', '50%'],
            radius: 90,
            axisName: {
              color: '#8F8F8F',
              fontSize: 12,
            },
            splitArea: {
              areaStyle: {// 图表背景网格区域的颜色
                color: ["#F6F4ED", "#F9F8F4"],
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              },
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            type: 'radar',
            radarIndex: 1,
            // legend: {
            //   orient: 'vertical',
            //   selectedMode: false,
            // },
            data: [
              {
                value: valueList,//获取数据的数组6个点
                symbolSize: 7,
                lineStyle: {
                  width: 2,
                  color: '#FCBD74'
                },
                areaStyle: {
                  opacity: 0.5,//设置雷达区域渐变颜色以及透明度
                  color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                    {
                      color: '#FFC93A',
                      offset: 0
                    },
                    {
                      color: '#FBDCAC',
                      offset: 0.6
                    }
                  ]),
                  shadowColor: '#FFD796',
                  shadowBlur: 10
                }
              }
            ],
            itemStyle: {
              borderWidth: 0,
              color: '#D57153',
            },
            silent: true,
            z: 1
          },
          {
            type: 'radar',
            radarIndex: 1,
            data: [
              {
                value: valueHeight,//设置第一种颜色的点
                symbolSize: 7,
              }
            ],
            itemStyle: {
              borderWidth: 2,
              color: '#B2D553'//绿色
            },
            lineStyle: {
              width: 0,
              labelLine: {
                show: false   //隐藏标示线
              }
            },
            silent: true,
            z: 2,
          },
          {
            type: 'radar',
            radarIndex: 1,
            data: [
              {
                value: valueNormal,//第二种颜色的点
                symbolSize: 7,
              }
            ],
            itemStyle: {
              borderWidth: 2,
              color: '#E8A953'//橙
            },
            lineStyle: {
              width: 0,
              labelLine: {
                show: false   //隐藏标示线
              }
            },
            silent: true,
            z: 3,//图层叠加
          },
          {
            type: 'radar',
            radarIndex: 1,
            data: [
              {
                value: valueLow,//第三种颜色的点
                symbolSize: 7,
              }
            ],
            itemStyle: {
              borderWidth: 2,
              color: '#D57153'//红
            },
            lineStyle: {
              width: 0,
              labelLine: {
                show: false   //隐藏标示线
              }
            },
            silent: true,
            z: 4,
          },
          {
            type: 'radar', //覆盖圆心点
            radarIndex: 1,
            data: [
              {
                value: valueNoList,//全undefined点，覆盖圆心
                symbolSize: 7,
              }
            ],
            itemStyle: {
              borderWidth: 2,
              color: '#fddb8c'
            },
            lineStyle: {
              width: 0,
              labelLine: {
                show: false   //隐藏标示线
              }
            },
            silent: true,
            z: 5,
          }
        ]
      }
      myChart.setOption(option);
    }
  }