ECharts使用心得总结
2024-10-15 06:19:49
https://blog.csdn.net/whiteosk/article/details/52684053
项目中的图表形式很多，基本可以在ECharts中找到相应实例，但UI设计图中的图表跟百度ECharts原型实例多少有些出入。
以下是项目中UI设计稿中的图表
ECharts原型图
百度ECharts官网（百度ECharts地址：http://echarts.baidu.com/）有相应的引用教程
在html中引入
<scriptsrc="echarts/echarts.min.js"></script>
再在结构页面引入相应js
具体操作可看百度ECharts官网教程，但一般还需要进行个性化定制，例如修改图表颜色、表头位置、x轴y轴刻度、背景线、弹出框的对齐方式等，
推荐echarts2的源码解析：http://echarts.baidu.com/echarts2/doc/example/themeDesigner.html?qq-pf-to=pcqq.c2c
左侧有很详细的对应代码的解析，非常适合我这种菜鸟。
饼状图修改举例
对应代码
1.修改颜色：color:['#A0D4F9','#CEF29B','#FFB7DC','#FFDA8A','#CBE0E5']；
2.修改左上角项目名前的长方块，长宽都调整成10变为正方形：
itemWidth:10, // 图例图形宽度
itemHeight:10, // 图例图形高度
3.调整饼状图中圆圈的大小：radius: ['64%', '90%']；
4.调整饼状图圆圈的位置：center: ['35%', '50%']
最新文章
- [DBW]一个小巧的Class方案
- ofbiz 本地化及邮件设置126邮箱
- gpt
- SQL SERVER 2012使用sequence
- matlab 小波变换
- NET 领域驱动设计实战系列总结
- Eclipse中Ctrl+Alt+Down和Ctrl+Alt+Up不起作用
- 编写自己的Nmap（NSE）脚本
- OpenVPN client端配置文件详细说明(转)
- JQuery坑，说说哪些大家都踩过的坑
- Swift内部类调用外部类方法、属性的变通
- luogu P2511 [HAOI2008]木棍分割
- vmware 12
- EF There is already an open DataReader associated with this Command
- java多线程实现主线程等待子线程执行完问题
- FFmpeg的H264编码有内存泄漏吗？？！！！
- Java学习之路(转)
- UML总结--总体架构
- scrapy抓取拉勾网职位信息（七）——实现分布式
- Codeforces 1109D. Sasha and Interesting Fact from Graph Theory