echarts折线图

需求1: 修改折线图大小,显示边框设置颜色:#012f4a,并且显示刻度标签。

echarts折线图_第1张图片

需求2: 修改图例组件中的文字颜色 #4c9bfd, 距离右侧 right 为 10%

echarts折线图_第2张图片

需求3: x轴相关配置

- 刻度去除

- x轴刻度标签字体颜色:#4c9bfd

- 剔除x坐标轴线颜色(将来使用Y轴分割线)

- 轴两端是不需要内间距 boundaryGap

echarts折线图_第3张图片

需求4: y轴的定制

- 刻度去除

- 字体颜色:#4c9bfd

- 分割线颜色:#012f4a

echarts折线图_第4张图片

需求5: 两条线形图定制

- 颜色分别:#00f2f1 #ed3f35

- 把折线修饰为圆滑 series 数据中添加 smooth 为 true

echarts折线图_第5张图片

 需求6: 配置数据

echarts折线图_第6张图片

 需求7: 新增需求  点击 2020年   2021年 数据发生变化

 echarts折线图_第7张图片

 完整代码:

echarts折线图_第8张图片

echarts折线图_第9张图片

echarts折线图_第10张图片

 

 

 

你可能感兴趣的:(图表/数据可视化,echarts,前端,javascript)