echarts.js实现雷达图

echarts.js实现雷达图

本次小编要介绍的是雷达图画法与需求注意的点。

一、雷达图插件的引用

首先引用echarts.js 与jquery.js

<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.3.1.js"></script>

二、在html中写出一个容器

<div id="chart" style="height: 450px;width: 450px"></div>

三、写雷达图所用到的参数，并把参数放入容器中

<script>
  var radar_chart = echarts.init(document.getElementById("chart"));
  var option = {
    title: {
      text: '基础雷达图'
    },
    tooltip: {},
//    legend: {
//      data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
//    },
    radar: {
      // shape: 'circle',
      name: {
        textStyle: {
          color: '#fff',
          backgroundColor: '#999',
          borderRadius: 3,
          padding: [3, 5]
        }
      },
      indicator: [
        { name: '销售', max: 6500},
        { name: '管理', max: 16000},
        { name: '信息技术', max: 30000},
        { name: '客服', max: 38000},
        { name: '研发', max: 52000},
        { name: '市场', max: 25000}
      ]
    },
    series: [{
      // name: '预算 vs 开销（Budget vs spending）',
      type: 'radar',
      // areaStyle: {normal: {}},
      itemStyle: {
        normal: {
          color: '#a8bcd4'
        }
      },
      data : [
        {
          value : [4300, 10000, 28000, 35000, 50000, 19000],
          name : '预算分配（Allocated Budget）'
        },
        //  {
        //     value : [5000, 14000, 28000, 31000, 42000, 21000],
        //     name : '实际开销（Actual Spending）'
        // }
      ]
    }]
  };
  radar_chart.setOption(option);

</script>

四、结果如下

五、可能用到的点

1、雷达图线的颜色

 itemStyle: {
        normal: {
          color: '#a8bcd4'
        }
      },

在例子中有用到

2、雷达图文字改变颜色

 name: {
        textStyle: {
          color: '#fff',
          backgroundColor: '#999',
          borderRadius: 3,
          padding: [3, 5]
        }
      },

改变背景色与文字颜色

3、一张画布画出多个雷达图，并且可以切换

把注释都放开，就可呈现出多个雷达图，并可以通过点击进行切换