ECharts雷达图的普通实现及angular8中的实现

你的名字 2022-12-22 09:57 184阅读 0赞

## 题一 ##

1.保存为**本地html文件**，可直接看到效果 ~

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
          
          <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
    
    
    
    <div id="main" style="width: 600px;height:400px;"></div>
    
    
    <script> // 1. ECharts最基本的代码结构； // 2. 定义各个纬度的最大值，通过radar属性配置； // 3 准备产品数据 设置给series下的data； // 4 健type的值设置radar // 基于准备好的dom，初始化echarts实例 // var myChart = echarts.init(document.getElementById('main')); // var dataMax=[]; // var option={ // } // myChart.setOption(option); //开始写代码 var myChart = echarts.init(document.getElementById('main')); var dataMax=[ { name:'易用性', max:100 }, { name:'功能', max:100 }, { name:'拍照', max:100 }, { name:'跑分', max:100 }, { name:'续航', max:100 }, ]; var option={ //radar 雷达 、indicator 指示器 radar:{ indicator:dataMax ,//配置各个纬度的最大值 shape:'polygon',// 配置雷达图的形状 ，默认多边形 polygon、圆形 circle }, series:[ { type:'radar', // 声明图标类型 为雷达图 label:{ show:true,// 显示数值 }, areaStyle:{ }, // 将每一个产品的雷达图形成阴影的面积 data:[ { name:'华为手机', value:[80,90,87,98,78] }, { name:'苹果手机', value:[60,80,87,58,70] } ] } ], } myChart.setOption(option); </script>
    </body>
    </html>

--------------------

## 题二： ##

在angular8中使用echarts配置生成雷达图一个看似简单的步骤，花了我半天多时间折腾！

**注意点：**  
1.在angular中定义dom对象后，使用echarts.init方法初始化给获取的dom对象初始化，一直报红提示！  
![在这里插入图片描述][20201119183416313.png_pic_center]  
![在这里插入图片描述][20201119183602924.png_pic_center]

告诉我们，初始化echarts.init()方法 required(要求)  type  'HTMLDivElement'  而不是 'HTMLElement' ！
    类型转换：as HTMLDivElement

![在这里插入图片描述][20201119184100727.png_pic_center]  
2.  
echarts.init(document.getElementById(‘main’) as HTMLDivElement);这个方法初始化获取去实例echrtas图表前，必须在在视图初始化之后才能调用！否正报 null  
![在这里插入图片描述][20201119185358389.png_pic_center]

在angular生命周期中，ngAfterViewInit（）就是代表视图数据初始化后才执行  
，当然要想你的组件中使用前必须先去实现它 **implements OnInit, AfterViewInit** ，

![在这里插入图片描述][20201119184519945.png_pic_center]

最后angular中雷达图实现代码如下：  
**引入**

import * as echarts from 'echarts';

**html**

<div id="main" style="width: 600px;height:400px;"></div>

**ts**

ts:
      echartsMethod() {
        //使用类型断言转换
        var el2 = echarts.init(document.getElementById('main') as HTMLDivElement);
        const dataMax = [
          {
            name: 'A 零售业务',
            max: 100
          },
          {
            name: 'B 公司业务',
            max: 100
          },
          {
            name: 'C 基础业务能力',
            max: 100
          },
        ];
        const option = {
          // radar 雷达 、indicator 指示器
          radar: {
            indicator: dataMax, // 配置各个纬度的最大值
            shape: 'polygon', // 配置雷达图的形状 ，默认多边形 polygon、圆形 circle
          },
          series: [
            {
              type: 'radar', // 声明图标类型 为雷达图
              label: {
                show: true, // 显示数值
              },
              areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积
              data: [
                {
                  name: '',
                  value: [50, 90, 67],
                  itemStyle: {
                    normal: {
                      color: '#2fcdea',
                      lineStyle: {
                        color: '#20b7ea',
                      },
                    },
                  },
                },
              ]
            }
          ],
        };
        el2.setOption(option); // 配置项加载到图表中
      }
    
      // 视图数据加载后执行
      ngAfterViewInit(): void {
        this.echartsMethod();
      }

**补充知识：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 1]

请欣赏美美的哈~  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 2]

最后感谢，为我借鉴和学习的博客文章的楼主们 ~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/f3b6aaa9b91c4d5989358c8ae250dfec.png
[20201119183416313.png_pic_center]: /images/20221120/c30984117fa5476d9fc769c4f16cd6bf.png
[20201119183602924.png_pic_center]: /images/20221120/2c54d90513af46eca59b8c36bb63d65f.png
[20201119184100727.png_pic_center]: /images/20221120/e37f758e5b914458bf7dcea3c4996d22.png
[20201119185358389.png_pic_center]: /images/20221120/1c9a4eca5863461cbbd3f2e6367035ae.png
[20201119184519945.png_pic_center]: /images/20221120/cdb3f2e9439b49e899e112081a90adaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/cbf75d2d09224c118a5ee5a0025ee454.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/6aa5c72b678440aab36cd70c054f35b1.png