小言_互联网的博客

Apache Echarts图表总结

2021-04-28 12:34 336人阅读  评论(0)

常用配置项总结


每个图表均配有对应的源代码以及知识点~~~~
详情可点开对应的图表学习！

Echarts常用图表 链接
柱状图 https://blog.csdn.net/diviner_s/article/details/115936504
折线图 https://blog.csdn.net/diviner_s/article/details/115951768
散点图 https://blog.csdn.net/diviner_s/article/details/115957974
饼状图 https://blog.csdn.net/diviner_s/article/details/116015145
矢量地图 https://blog.csdn.net/diviner_s/article/details/116019747
雷达图 https://blog.csdn.net/diviner_s/article/details/116041140
仪表盘 https://blog.csdn.net/diviner_s/article/details/116072033
直角坐标系配置 https://blog.csdn.net/diviner_s/article/details/115961859

1.柱状图 bar

https://blog.csdn.net/diviner_s/article/details/115936504
series[].type 图表类型
xAxis x轴
yAxis y轴
markPoint 最大值\最小值
markLine 平均值
label 显示文本
barWidth 柱宽度

折线图 line

https://blog.csdn.net/diviner_s/article/details/115951768
series[].type 图表类型
xAxis x轴
yAxis y轴
markPoint 最大值\最小值
markLine 平均值
markArea 标注区域
smooth 平滑线
lineStyle 线条风格
areaStyle 风格x轴
boundaryGap 紧挨边缘
scale 脱离0值比例

散点图 scatter

https://blog.csdn.net/diviner_s/article/details/115957974
series[].type 图表类型
xAxis x轴
yAxis y轴
symbolSize 散点大小
itemStyle 散点样式
showEffectOn 显示时机
rippleEffect 涟漪效果
scale 脱离0值比例

饼图 pie

https://blog.csdn.net/diviner_s/article/details/116015145
series[].type 图表类型
label 显示文本
radius 半径
roseType 饼图类型
selectedMode 是否多选
selectedOffset 选中扇区偏移量

地图 map

https://blog.csdn.net/diviner_s/article/details/116019747
series[].type 图表类型
peo 地理坐标系组件
map 指明地图数据
roam 开启鼠标拖动和缩放
zoom 平均值
center 图表的中心点
label 是否显示地区
geoIndex 指明关联的geo组件
visualMap 视觉映射组件
coordinateSystem 使用坐标系统

雷达图 radar

https://blog.csdn.net/diviner_s/article/details/116041140
series[].type 图表类型
rader 雷达图组件
indicator 雷达图的指示器
label 文字
areaStyle 区域颜色
shape 雷达图形状

仪表盘 gauge

https://blog.csdn.net/diviner_s/article/details/116072033
series[].type 图表类型
max 最大值
min 最小值
itemStyle 指针样式

直角坐标系配置

https://blog.csdn.net/diviner_s/article/details/115961859

  • grid
show 是否可见
borderWidth 边框宽度
borderColor 边框颜色
left 左边
top 顶部
right 右边
bottom 底部
width 宽度
height 高度
  • axis
type 轴类型
data 数据
position 显示位置
  • dataZoom
type 缩方块类型
xAxisIndex x轴索引
yAxisIndex y轴索引
start 初始值
end 结束值

通用配置

  • title
textStyle 文字样式
borderWidth 边框宽度
borderColor 边框颜色
borderRadius 边框圆角
left 左边
top 顶部
right 右边
bottom 底部
  • tooltip
trigger 触发类型
triggerOn 触发时机
formatter 内容自定义
  • toolbox.feature
saveAslmage 保存图片
dataView 数据视图
restore 重置
dataZoom 缩放
magicType 图标转换
  • legend
data 图例数据，需要和series数据中某组数据的name值一致

转载：https://blog.csdn.net/diviner_s/article/details/116072584
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场