官网找到类似实例, 适当分析,并且引入到HTML页面中
打开后,查看源码
去掉Title,剩下的引入到们的文件中
回到index.js文件中,编写立即执行函数
实例化对象
将前面的官网示例代码粘贴过来,完成配置指定
把配置给实例对象
查看效果
为了方便显示,删除3条线
删除后
查看效果
根据需求定制图表
需求1: 修改折线图大小,显示边框设置颜色:#012f4a,并且显示刻度标签。
查看效果
需求2: 修改图例组件中的文字颜色 #4c9bfd, 距离右侧 right 为 10%
如果series对象有name值,则legend可以不用写data
查看效果
需求3: x轴相关配置
刻度去除
x轴刻度标签字体颜色:#4c9bfd
剔除x坐标轴线颜色(将来使用Y轴分割线)
轴两端是不需要内间距 boundaryGap
查看效果
需求4: y轴的定制
刻度去除
字体颜色:#4c9bfd
分割线颜色:#012f4a
查看效果
需求5:两条线形图定制
颜色分别:#00f2f1 #ed3f35
通过这个color修改两条线的颜色
把折线修饰为圆滑 series 数据中添加 smooth 为 true
查看效果
需求6: 配置数据
X轴上的数据
图标数据
查看效果
自适应