雷达图雷达图

最新推荐文章于 2024-04-30 08:07:18 发布

2401_83182791

最新推荐文章于 2024-04-30 08:07:18 发布

阅读量176

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_83182791/article/details/137243063

版权

1.基本雷达图

<!DOCTYPE html>
<html>
 
<head>
    <script src="js/echarts.min.js" charset="utf-8"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
      text: '销售经理能力考核表',
      target:'blank',top:'10',left:'100',textStyle:{color:'blue',fontSize:18,}
    },
    legend: {
      show:true,
      icon:'rect',
      top:'14',
      left:'430',
      itemWidth:10,
      itemHeight:10,
      itemGap:30,
      orient:'horizontal',
      textStyle:{fontSize:15,color:'#000'},
      data: ['王斌', '刘倩','袁波'],
    },
    tooltip:{
        confirm:true,
        enterable:true,
    },
    radar: {
      // shape: 'circle',
      center:['50%','56%'],
      radius:160,
      startAngle:90,
      name:{
        formatter:'{value}',
        textStyle:{fontSize:15,color:'#000'}
      },
      indicator: [
        { name: '销售', max: 100 },
        { name: '沟通', max: 100 },
        { name: '服务', max: 100 },
        { name: '协作', max: 100 },
        { name: '培训', max: 100 },
      ]
    },
    series: [
      {
        name: '雷达图',
        type: 'radar',
        Symbol:'triangle',
        itemStyle:{ 
    normal:{lineStyle:{width:2},opacity:0.6},
    emphasis:{lineStyle:{width:8},opacity:1},
 },
        data: [
          {
            value: [87.50,87.50,90.00,91.25,85.00],
            name: '王斌'
          },
          {
            value: [90.00,88.75,85.00,87.50,88.75],
            name: '刘倩'
          },
          {
            value: [92.50,91.25,88.75,92.50,91.25],
            name: '袁波'
          }
        ]
      }
    ]
  };
  myChart.setOption(option);
    </script>
</body>
</html>

2.复杂雷达图

<!DOCTYPE html>
<html>
 
<head>
    <script src="js/echarts.min.js" charset="utf-8"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
      text: '销售经理能力考核表',
      subtext: '浏览器占比',
      top: 20,
      left: 30
    },
    tooltip: {
      trigger: 'item',
      backgroundColor:'rgba(0,0,250,0.8)',
 
    },
    legend: {
      type: 'scroll',
      bottom: 10,
      data: (function () {
        var list = [];
        for (var i = 1; i <= 28; i++) {
          list.push(i + 2000 + '');
        }
        return list;
      })()
    },
    visualMap: {
      top: 'middle',
      right: 10,
      color: ['red', 'yellow'],
      calculable: true
    },
    radar: {
      indicator: [
      { name: '销售', max: 400,color:'green' },
        { name: '沟通', max: 400,color:'blue' },
        { name: '服务', max: 400 ,color:'red'},
        { name: '协作', max: 400 ,color:'pink'},
        { name: '培训', max: 400 ,color:'orange'},
      ]
    },
    series: (function () {
      var series = [];
      for (var i = 1; i <= 28; i++) {
        series.push({
          type: 'radar',
          symbol: 'none',
          lineStyle: {
            width: 1
          },
          emphasis: {
            areaStyle: {
              color: 'rgba(0,250,0,0.3)'
            }
          },
          data: [
             {
                 value: [
                (40 - i) * 10,
                (38 - i) * 4 + 60,
                i * 5 + 10,
                i * 9,
                (i * i) / 2
                ],
                name: i + 2000 + ''
                }
        ]
       });
      }
      return series;
    })()
  };
  myChart.setOption(option);
    </script>
</body>
</html>

3.多雷达图

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
 
option = {
  color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
  title: {
    text: '销售经理能力考核表'
  },
  legend: {},
  radar: [
    {
      indicator: [
        { text: '销售' },
        { text: '沟通' },
        { text: '服务' },
        { text: '协作' },
        { text: '培训' }
      ],
      center: ['25%', '50%'],
      radius: 120,
      startAngle: 90,
      splitNumber: 4,
      shape: 'circle',
      axisName: {
        formatter: '【{value}】',
        color: '#428BD4'
      },
      splitArea: {
        areaStyle: {
          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)'
        }
      }
    },
    {
      indicator: [
      { name: '销售', max: 100 },
        { name: '沟通', max: 100 },
        { name: '服务', max: 100 },
        { name: '协作', max: 100 },
        { name: '培训', max: 100 },
      ],
      center: ['75%', '50%'],
      radius: 120,
      axisName: {
        color: '#fff',
        backgroundColor: '#666',
        borderRadius: 3,
        padding: [3, 5]
      }
    }
  ],
  series: [
    {
      type: 'radar',
      emphasis: {
        lineStyle: {
          width: 4
        }
      },
      data: [
        {
          value: [87.50,87.50,90.00,91.25,85.00],
            name: '王斌'
          },
          {
            value: [90.00,88.75,85.00,87.50,88.75],
            name: '刘倩'
          },
          {
            value: [92.50,91.25,88.75,92.50,91.25],
            name: '袁波'
          },
      ]
    },
    {
      type: 'radar',
      radarIndex: 1,
      data: [
        {
          value: [87.50,87.50,90.00,91.25,85.00],
            name: '王斌',
          symbol: 'rect',
          symbolSize: 12,
          lineStyle: {
            type: 'dashed'
          },
          label: {
            show: true,
            formatter: function (params) {
              return params.value;
            }
          }
        },
        {
          value: [90.00,88.75,85.00,87.50,88.75],
            name: '刘倩',
          areaStyle: {
            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              {
                color: 'rgba(255, 145, 124, 0.1)',
                offset: 0
              },
              {
                color: 'rgba(255, 145, 124, 0.9)',
                offset: 1
              }
            ])
          }
        }
      ]
    }
  ]
};
myChart.setOption(option);
    </script>
    </body>
    </html>