zoukankan      html  css  js  c++  java
  • ECharts_雷达图

    3.7 雷达图

    3.7.1 实现步骤

    • ECharts最基本的代码结构

      • 引入js文件

      • DOM容器

      • 初始化对象

      • 设置option

    • 定义各个维度的最大值 indicator

    • 准备具体产品的数据

    • 图表类型

      series 下设置 type: 'radar'

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="lib/echarts.min.js"></script>
    </head>
    <body>
        <div style=" 600px; height: 400px;"></div>
        <script>
            var mCharts = echarts.init(document.querySelector('div'));
            var dataMax = [
                {
                    name: '易用性',
                    max: 100
                },
                {
                    name: '功能',
                    max: 100
                },
                {
                    name: '拍照',
                    max: 100
                },
                {
                    name: '跑分',
                    max: 100
                },
                {
                    name: '续航',
                    max: 100
                }
            ]
            var option = {
                radar: {
                    indicator: dataMax
                },
                series: [
                    {
                        type: 'radar',
                        data: [
                            {
                                name: '华为手机1',
                                value: [80, 90, 80, 82, 90]
                            },
                            {
                                name: '中兴手机1',
                                value: [72, 82, 75, 70, 78]
    
                            }
                        ]
                  }
                ]
            }
    
            mCharts.setOption(option);
        </script>
    </body>
    </html>

    3.7.2 常用配置

    • 显示数值

      label: {
          show: true
      }
    • 区域面积

      areaStyle: {}

      将每一个产品的雷达图形成阴影的面积

    • 绘制类型

      radar: {
          shape: 'circle'
      }

      配置雷达图最外层的图形 circle polygon

  • 相关阅读:
    AcRxClass::addX
    string.format("%s",name)
    strcmp 与 _tcscmp
    acedinitget
    判断实体的类型 相关操作
    accmcolor
    CAD类型转换
    图的存储结构及遍历
    并查集(Union/Find)
    设计模式--缺醒适配器模式
  • 原文地址:https://www.cnblogs.com/Gazikel/p/14457084.html
Copyright © 2011-2022 走看看