echarts 雷达面图

最新推荐文章于 2024-04-01 11:41:06 发布

易鹤鹤.

最新推荐文章于 2024-04-01 11:41:06 发布

阅读量211

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/ssy001128/article/details/132324520

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

根据数据展示不同颜色的拐点和图例及在类目下展示数值

实现效果

实现代码

option = {
  title: {
    text: '亩均产量',
    left: '3%',
    top: '3%'
  },
  legend: {
    orient: 'vertical',
    right: '5%',
    top: 'center',
    data: ['玉米', '豆类', '水稻', '薯类', '小麦'],
    textStyle: {
      color: '#000000'
    }
  },
  radar: [
    {
      splitLine: {
        lineStyle: {
          color: '#000'
        }
      }
    },
    {
      center: ['50%', '55%'],
      radius: 90,
      nameGap: 6,
      name: {
        textStyle: {
          color: '#000',
          fontSize: 14,
          fontWeight: 400
        },
        // 类目下的数值
        rich: {
          a: {
            color: '#000',
            lineHeight: 20
          },
          b: {
            color: '#f00',
            align: 'center',
            backgroundColor: '#fff',
            padding: 2,
            borderRadius: 4
          }
        },
        formatter: (a, b) => {
          b.nameTextStyle.rich.b.color = b.value1;
          return `{a|${a}}\n{b|${b.value}(吨/千公顷)}`;
        }
      },
      indicator: [
        {
          text: '玉米',
          max: 8792.55,
          value: 7792.55,
          value1: '#A66CFE'
        },
        {
          text: '豆类',
          max: 8792.55,
          value: 3920.15,
          value1: '#FFA662'
        },
        {
          text: '水稻',
          max: 8792.55,
          value: 7058.56,
          value1: '#5AA4FB'
        },
        {
          text: '薯类',
          max: 8792.55,
          value: 7008.16,
          value1: '#FF858B'
        },
        {
          text: '小麦',
          max: 8792.55,
          value: 5264.2,
          value1: '#7AF16F'
        }
      ]
    }
  ],
  series: [
    {
      type: 'radar',//绘制第一个点
      radarIndex: 1,
      data: [
        {
          value: [7792.55, 3920.15, 7058.56, 7008.16, 5264.2],
          symbolSize: 7,
          lineStyle: {
            width: 2,
            color: '#29B8FF'
          },
          areaStyle: {
            normal: {
              opacity: 0.75,
              color: '#f8f7f7'
            }
          }
        }
      ],
      itemStyle: {
        normal: {
          borderWidth: 0,
          color: '#000'
        }
      },
      silent: true,
      z: 1
    },
    {
      type: 'radar',
      radarIndex: 1,
      name: '玉米',
      silent: true,
      z: 2,
      data: [
        {
          value: [7792.55, '', '', '', ''],
          symbolSize: 7
        }
      ],
      itemStyle: {
        normal: {
          borderWidth: 2,
          color: '#A66CFE'
        }
      },
      lineStyle: {
        width: 0,
        labelLine: {
          show: false
        }
      }
    },
    {
      type: 'radar',
      radarIndex: 1,
      name: '豆类',
      silent: true,
      z: 3,
      data: [
        {
          value: ['', 3920.15, '', '', ''],
          symbolSize: 7
        }
      ],
      itemStyle: {
        normal: {
          borderWidth: 2,
          color: '#FFA662'
        }
      },
      lineStyle: {
        width: 0,
        labelLine: {
          show: false
        }
      }
    },
    {
      type: 'radar',
      radarIndex: 1,
      name: '水稻',
      silent: true,
      z: 4,
      data: [
        {
          value: ['', '', 7058.56, '', ''],
          symbolSize: 7
        }
      ],
      itemStyle: {
        normal: {
          borderWidth: 2,
          color: '#5AA4FB'
        }
      },
      lineStyle: {
        width: 0,
        labelLine: {
          show: false
        }
      }
    },
    {
      type: 'radar',
      radarIndex: 1,
      name: '薯类',
      silent: true,
      z: 5,
      data: [
        {
          value: ['', '', '', 7008.16, ''],
          symbolSize: 7
        }
      ],
      itemStyle: {
        normal: {
          borderWidth: 2,
          color: '#FF858B'
        }
      },
      lineStyle: {
        width: 0,
        labelLine: {
          show: false
        }
      }
    },
    {
      type: 'radar',
      radarIndex: 1,
      name: '小麦',
      silent: true,
      z: 6,
      data: [
        {
          value: ['', '', '', '', 5264.2],
          symbolSize: 7
        }
      ],
      itemStyle: {
        normal: {
          borderWidth: 2,
          color: '#7AF16F'
        }
      },
      lineStyle: {
        width: 0,
        labelLine: {
          show: false
        }
      }
    },
    {
      type: 'radar',//这个图层是为了盖住圆心，如果去掉，圆心的颜色为最后一个图层的颜色（不信就自己试试）
      radarIndex: 1,
      name: '',
      silent: true,
      z: 7,//图层是一层一层叠加，所以这个也是一级一级递增
      data: [
        {
          value: ['', '', '', '', ''],
          symbolSize: 7
        }
      ],
      itemStyle: {
        normal: {
          borderWidth: 2,
          color: '#f8f7f7'
        }
      },
      lineStyle: {
        width: 0,
        labelLine: {
          show: false//隐藏标示线
        }
      }
    }
  ]
};