其他分享
首页 > 其他分享> > Echart可视化学习(九)

Echart可视化学习(九)

作者:互联网

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

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

去掉一些不需要的

数据留2个就可以了

查看效果

在index.js中编写立即执行函数

对应的index.html中

实例化对象

指定配置,将前面准备官方实例代码复制过来

把配置给实例对象

让图表跟随屏幕自动的去适应

查看效果

根据需求定制图表

需求1: 更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12

查看效果

需求2: 修改图表大小

查看效果

需求3: 修改x轴相关配置

修改文本颜色为rgba(255,255,255,.6) 文字大小为 12

x轴线的颜色为 rgba(255,255,255,.2)

查看效果

需求4: 修改y轴的相关配置

查看效果

需求5: 修改两个线模块配置(注意在series 里面定制)

平滑效果

查看效果

单独修改当前线条的样式

查看效果

填充颜色设置

查看效果

设置拐点 小圆点

查看效果

设置第二条线

填充颜色设置

拐点设置

查看效果

需求6: 更换数据

x轴更换数据

查看效果

series 第一个对象data数据

series 第二个对象data数据

查看效果

 

标签:需求,Echart,效果,学习,修改,实例,可视化,查看,255
来源: https://www.cnblogs.com/bqwzy/p/15779406.html