Echart可视化学习(七)

文档的源代码地址,需要的下载就可以了(访问密码:7567)
https://url56.ctfile.com/f/34653256-527823386-04154f

正文:

官网找到类似实例, 适当分析,并且引入到HTML页面中

Echart可视化学习(七)

打开后,查看源码

Echart可视化学习(七)

去掉Title,剩下的引入到们的文件中

Echart可视化学习(七)

回到index.js文件中,编写立即执行函数

Echart可视化学习(七)

实例化对象

Echart可视化学习(七)

将前面的官网示例代码粘贴过来,完成配置指定

Echart可视化学习(七)Echart可视化学习(七)Echart可视化学习(七)Echart可视化学习(七)

把配置给实例对象

Echart可视化学习(七)

查看效果

Echart可视化学习(七)

为了方便显示,删除3条线

Echart可视化学习(七)

删除后

Echart可视化学习(七)

查看效果

Echart可视化学习(七)

根据需求定制图表

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

Echart可视化学习(七)

查看效果

Echart可视化学习(七)

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

如果series对象有name值,则legend可以不用写data

Echart可视化学习(七)

查看效果

Echart可视化学习(七)

需求3: x轴相关配置

刻度去除

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

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

轴两端是不需要内间距 boundaryGap

Echart可视化学习(七)

查看效果

Echart可视化学习(七)

需求4: y轴的定制

刻度去除

字体颜色:#4c9bfd

分割线颜色:#012f4a

Echart可视化学习(七)

查看效果

Echart可视化学习(七)

需求5:两条线形图定制

颜色分别:#00f2f1 #ed3f35

通过这个color修改两条线的颜色

Echart可视化学习(七)

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

Echart可视化学习(七)

查看效果

Echart可视化学习(七)

需求6: 配置数据

X轴上的数据

Echart可视化学习(七)

图标数据

Echart可视化学习(七)

查看效果

Echart可视化学习(七)

自适应

Echart可视化学习(七)

 

上一篇:echart的使用心得


下一篇:System.Windows.Forms