首页 » 网络编程 » JavaScript

javascript?Echart可视化学习

JavaScript 2022-01-13

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

javascript?Echart可视化学习

代码整理

去掉标题

javascript?Echart可视化学习

去掉工具箱

javascript?Echart可视化学习

去掉一个图

javascript?Echart可视化学习

查看效果

javascript?Echart可视化学习

Index.html中的组件

javascript?Echart可视化学习

在index.js中立即执行函数

javascript?Echart可视化学习

实例化对象

javascript?Echart可视化学习

指定配置

javascript?Echart可视化学习

javascript?Echart可视化学习

把配置给实例对象

javascript?Echart可视化学习

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

javascript?Echart可视化学习

查看效果

javascript?Echart可视化学习

根据需求定制图表

需求1:颜色设置

javascript?Echart可视化学习

需求2:修改饼形图大小 ( series对象)

javascript?Echart可视化学习

需求3: 把饼形图的显示模式改为 半径模式

javascript?Echart可视化学习

需求4:数据使用更换(series对象 里面 data对象)

javascript?Echart可视化学习

位置修改

javascript?Echart可视化学习

需求5:字体略小些 10 px ( series对象里面设置 )

饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置

javascript?Echart可视化学习

需求6:防止缩放的时候,引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )

连接图表 6 px

连接文字 8 px

javascript?Echart可视化学习

Legend设置

javascript?Echart可视化学习

查看效果

javascript?Echart可视化学习

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注www.580doc.com的更多内容!


上一篇:Node.js?模块的加载逻辑你了解嘛下一篇:JavaScript实现购物车案例
程序园_程序员的世界 Copyright © 2020- www.580doc.com. Some Rights Reserved.