Echarts基本入门之柱状图、折线图通用配置

1echarts的基本步骤

四步

1 找dom容器

2 初始化Init

3 配置options

4 setOptions

Echarts基本入门之柱状图、折线图通用配置_第1张图片

几乎124的步骤是一样的,options是配置项,想呈现什么图标就配什么。

Echarts基本入门之柱状图、折线图通用配置_第2张图片

最基本的带最大值最小值的柱状图

Echarts基本入门之柱状图、折线图通用配置_第3张图片

2 平均值 markLine属性

Echarts基本入门之柱状图、折线图通用配置_第4张图片
Echarts基本入门之柱状图、折线图通用配置_第5张图片

3 数值显示 柱宽度, 横向柱状图

数值显示 label属性

Echarts基本入门之柱状图、折线图通用配置_第6张图片

Echarts基本入门之柱状图、折线图通用配置_第7张图片

柱宽度 barWidth

Echarts基本入门之柱状图、折线图通用配置_第8张图片

Echarts基本入门之柱状图、折线图通用配置_第9张图片

横向的话只需要注意两个轴的转变就行

Echarts基本入门之柱状图、折线图通用配置_第10张图片

Echarts基本入门之柱状图、折线图通用配置_第11张图片

通用配置 即饼图散点图通用的配置

title 标题

tooltip: 提示

toolbox 工具按钮

legend 图例

Echarts基本入门之柱状图、折线图通用配置_第12张图片

Echarts基本入门之柱状图、折线图通用配置_第13张图片

tooltip 提示框组件, 鼠标滑过图表的时候提示

Echarts基本入门之柱状图、折线图通用配置_第14张图片

Echarts基本入门之柱状图、折线图通用配置_第15张图片

formatter也可以设置函数

Echarts基本入门之柱状图、折线图通用配置_第16张图片

toolbox

可以导出图片,数据视图, 动态类型切换,数据区域缩放, 重置等五个工具等功能

Echarts基本入门之柱状图、折线图通用配置_第17张图片

Echarts基本入门之柱状图、折线图通用配置_第18张图片

legend 图例,用于筛选系列 需要与series配合使用

Echarts基本入门之柱状图、折线图通用配置_第19张图片

Echarts基本入门之柱状图、折线图通用配置_第20张图片

Echarts基本入门之柱状图、折线图通用配置_第21张图片

Echarts基本入门之柱状图、折线图通用配置_第22张图片

四个通用配置基本使用就是这样

title 标题 tooltip提示框 工具按钮toolbox 图例:legend

折线图

Echarts基本入门之柱状图、折线图通用配置_第23张图片

Echarts基本入门之柱状图、折线图通用配置_第24张图片

基本绘制

大小值平均值, 标注区间

大小值平均值跟柱状图一摸一样

Echarts基本入门之柱状图、折线图通用配置_第25张图片
Echarts基本入门之柱状图、折线图通用配置_第26张图片

标注区间 markArea

Echarts基本入门之柱状图、折线图通用配置_第27张图片
Echarts基本入门之柱状图、折线图通用配置_第28张图片

线条控制 平滑 smooth

Echarts基本入门之柱状图、折线图通用配置_第29张图片

Echarts基本入门之柱状图、折线图通用配置_第30张图片

填充风格

Echarts基本入门之柱状图、折线图通用配置_第31张图片
Echarts基本入门之柱状图、折线图通用配置_第32张图片

紧挨边缘

Echarts基本入门之柱状图、折线图通用配置_第33张图片

Echarts基本入门之柱状图、折线图通用配置_第34张图片

Echarts基本入门之柱状图、折线图通用配置_第35张图片

y轴范围

scale

Echarts基本入门之柱状图、折线图通用配置_第36张图片
Echarts基本入门之柱状图、折线图通用配置_第37张图片

堆叠图 serise每个设置stack: ‘all'

正常

Echarts基本入门之柱状图、折线图通用配置_第38张图片

会重叠,可以设置

Echarts基本入门之柱状图、折线图通用配置_第39张图片

每个series都加

Echarts基本入门之柱状图、折线图通用配置_第40张图片

就会变成这样,不会重叠但是要注意y轴的变化,上面那条线起点是1000,他只是往上添加了1000。

Echarts基本入门之柱状图、折线图通用配置_第41张图片

再加上areaStyle

Echarts基本入门之柱状图、折线图通用配置_第42张图片

堆叠的效果就更加明显。

总结

到此这篇关于Echarts基本入门之柱状图、折线图通用配置的文章就介绍到这了,更多相关Echarts柱状图折线图通用配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(Echarts基本入门之柱状图、折线图通用配置)