kk199578

今日重点:
一、渠道分布(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"

分类:

技术点:

相关文章:

  • 2021-04-03
  • 2021-12-28
  • 2022-01-14
  • 2021-04-18
  • 2021-07-29
  • 2021-06-19
  • 2021-08-15
  • 2021-11-01
猜你喜欢
  • 2021-09-15
  • 2021-08-03
  • 2022-01-21
  • 2021-04-03
  • 2021-06-30
  • 2022-12-23
  • 2021-08-28
相关资源
相似解决方案