ECharts雷达图的普通实现及angular8中的实现
题一
1.保存为本地html文件，可直接看到效果 ~
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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对象初始化，一直报红提示！
告诉我们，初始化echarts.init()方法 required(要求) type 'HTMLDivElement' 而不是 'HTMLElement' ！
类型转换：as HTMLDivElement
2.
echarts.init(document.getElementById(‘main’) as HTMLDivElement);这个方法初始化获取去实例echrtas图表前，必须在在视图初始化之后才能调用！否正报 null
在angular生命周期中，ngAfterViewInit（）就是代表视图数据初始化后才执行
，当然要想你的组件中使用前必须先去实现它 implements OnInit, AfterViewInit ，
最后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();
}
补充知识：
请欣赏美美的哈~
最后感谢，为我借鉴和学习的博客文章的楼主们 ~