Echart可视化学习(九)

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

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

Echart可视化学习(九)

去掉一些不需要的

Echart可视化学习(九)

数据留2个就可以了

Echart可视化学习(九)

查看效果

Echart可视化学习(九)

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

Echart可视化学习(九)

对应的index.html中

Echart可视化学习(九)

实例化对象

Echart可视化学习(九)

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

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

把配置给实例对象

Echart可视化学习(九)

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

Echart可视化学习(九)

查看效果

Echart可视化学习(九)

根据需求定制图表

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

Echart可视化学习(九)

查看效果

Echart可视化学习(九)

需求2: 修改图表大小

Echart可视化学习(九)

查看效果

Echart可视化学习(九)

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

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

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

Echart可视化学习(九)

查看效果

Echart可视化学习(九)

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

Echart可视化学习(九)

查看效果

Echart可视化学习(九)

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

平滑效果

Echart可视化学习(九)

查看效果

Echart可视化学习(九)

单独修改当前线条的样式

Echart可视化学习(九)

查看效果

Echart可视化学习(九)

填充颜色设置

Echart可视化学习(九)

查看效果

Echart可视化学习(九)

设置拐点 小圆点

Echart可视化学习(九)

查看效果

Echart可视化学习(九)

设置第二条线

填充颜色设置

Echart可视化学习(九)

拐点设置

Echart可视化学习(九)

查看效果

Echart可视化学习(九)

需求6: 更换数据

x轴更换数据

Echart可视化学习(九)

查看效果

Echart可视化学习(九)

series 第一个对象data数据

Echart可视化学习(九)

series 第二个对象data数据

Echart可视化学习(九)

查看效果

Echart可视化学习(九)

 

上一篇:关于android-webview设置代理访问页面


下一篇:I2C 协议详解(三)—— RTC PCF8563设备驱动