ECharts使用心得总结

七月份因为做微信管理平台第一次接触到ECharts，对于刚入行的菜鸟见到如此生动直观的图表十分兴奋，原来图表可以这么漂亮和生动。做项目相应的图表时就想写个博客总结，一直没写拖到现在，挺多都不记得可能有些纰漏还望各位踩点的多多指导指正。

项目中的图表形式很多，基本可以在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%']

ECharts使用心得总结相关推荐

Echarts使用心得总结——异步数据加载
异步加载 Echarts的数据一般是在初始化后setOption中直接填入的,但是很多时候可能数据需要异步加载后再填入.ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要使用 ...
Echarts使用心得
前言 Echarts是一个 JavaScript 的开源可视化图表库,可以快速画出许多图形,我们有时候会用到它,但是官方教程对于新手来说确实不友好,至少在我看来是这样的,看了我几天才大概有所了解,为了 ...
c#中嵌入echarts_利用c#+jquery+echarts生成统计报表（附源代码）
背景: 因为最近项目要生成报表,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.百度echarts简介请参考虽然echarts功能强大,界面优美, 但是使用起来非常繁琐.本文在参考写的& ...
Echarts 矩形树图使用心得（渐变色、背景图等）
文章目录前言一.矩形树图二.需求描述三.使用 1.引入echarts.js 2.初始化及数据结构 3.具体配置总结参考前言因业务需求需要一个比较炫酷的矩形树图,由于是第一次用,感觉收获 ...
echarts搭配MySQL_Echarts连接Mysql使用心得
Echarts是什么,它一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度 ...
flask+echarts地图制作心得
先看最终效果图. 该地图显示的是公司在各个市区的项目数量,然后统计其数量,并以热点的方式显示在地图上,使使用者能直观的看到公司项目分布及数量情况. 现将程序制作过程中的问题及注意情况分解如下: 1.数 ...
Echarts的二次封装思考心得。封装成果：折线柱状混合图、立体柱状折线混合图、markline标记线
先说一下这次对ECharts二次封装总结的一些东西吧,感觉这是重点! 二次封装及使用的矛盾痛点: 一般封装只会暴露出一些常用的属性,最常见的如图表的颜色.数据: 封装人员也不会考虑把所有情况都封装起来 ...
eCharts.js使用心得
使用eCharts实现实时监控,可以动态的增加和删除数据,可以全屏展示. 一.图表的配置,配置方面没什么好说的,参数官方文档中都有解释,时间轴的生成也是参考的官方实例,只是增加了一个刷新频率cycle ...
Echarts绘制乡镇地图方法心得
在上一篇使用Echarts在前端页面绘制地图中简单介绍了使用Echarts在绘制地图的基本流程方法,但在项目上,客户要求使用乡镇区域数据,阿里云提供的地图数据是没有乡镇区域地图数据的,两个神器,玩美解 ...

ECharts使用心得总结

ECharts使用心得总结相关推荐

最新文章

热门文章