雷达图及半圆图解析

今日重点：
一、渠道分布(channel)-雷达图
1）radar
（1）外半径占据容器大小
radius: ‘65%‘,
（2） 指示器轴的分割段数（4个圆圈）
splitNumber: 4,
（3）坐标轴在 grid 区域中的分隔线（圆圈）
splitLine: {
lineStyle: {
color: ‘rgba(255, 255, 255, 0.5)‘,
// width: 2,
// type: ‘dashed‘
}
},
（4） 坐标轴轴线相关设置(竖线)axisLine
axisLine: {
show: true,
lineStyle: {
color: ‘rgba(255, 255, 255, 0.5)‘
// width: 1,
// type: ‘solid‘
}
},
（5）修饰雷达图文本颜色
name: {
textStyle: {
color: ‘#4c9bfd‘
}
},
2）series
（1）区域填充的背景颜色设置
** areaStyle: {color: ‘rgba(238, 197, 102, 0.6)‘,},**
（2）区域填充的线条颜色
lineStyle: {
normal: {
color: ‘#fff‘,
// width: 1
}
},
（3）symbol 标记的样式(拐点），还可以取值‘rect‘ 方块 ,‘arrow‘ 三角等
symbol: ‘circle‘,
（4） 拐点的大小
symbolSize: 5,
（5） 小圆点（拐点）设置为白色
itemStyle: {color: ‘#fff‘},
（6）在圆点上显示相关数据
label: {
show: true,
color: ‘#fff‘,
fontSize: 10
},
3）鼠标经过显示提示框组件 tooltip
（1） 显示
show: true,
（2）控制提示框组件的显示位置
position: [‘60%‘, ‘10%‘],
二、销售进度 (quarter) -饼状图 半圆形
原理：半圆形做法：把一个饼形图分成三段，下面一段颜色设为透明即可
1）series
（1）是否启用防止标签重叠策略
** avoidLabelOverlap: false,**
（2）放大图形
radius: [‘130%‘, ‘150%‘],
（3）移动下位置 套住50%文字
center: [‘48%‘, ‘80%‘],
（4）起始角度，支持范围[0, 360]
startAngle: 180,
（5）透明隐藏第三块区域
itemStyle: { color: ‘transparent‘ }
（6）鼠标经过不变大
hoverOffset: 0, **
三、ES6模版字符**
console.log(我的名字是${star.name}我的年龄是${star.age});
console.log(<span>${star.name}</span><span>${star.age}</span>);
四、Echarts-社区
飞机航线：
实现步骤：
（1）需要下载china.js提供中国地图的js文件
（2）第二个因为里面代码比较多，我们新建一个新的js文件 myMap.js 引入
（3）使用社区提供的配置即可。
1）itemStyle
（1）修改地图省份背景
areaColor: ‘#142957‘,
2）geo
（1）地图放大通过 zoom
zoom: 1.2,
有关Echarts饼图、柱状图及线形图参数解析请点击a=href"https://www.cnblogs.com/kk199578/p/14196714.html"

雷达图及半圆图解析

原文：https://www.cnblogs.com/kk199578/p/14203354.html