ECharts使用心得总结
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%']
ECharts使用心得总结的更多相关文章
- ECharts使用心得总结(二)
Echarts使用心得总结(二) 前言: 前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一下.之前 ...
- ECharts使用心得
ECharts百度旗下图标插件,在展示地图.雷达图等方面有很好的支持. 应用场景: 自动生成X轴的数据: 设置:xAxis的type=value || type=time 并且设置series的dat ...
- ECharts使用心得——矩阵树图
1. 缘起 最近实验室 boss 让用矩形树图做一下研究数据的展示,囧,矩形树图是什么鬼.问了问师兄,说用 R 语言可以实现,让我去研究一下. = =,那这周不是不用干别的了. 刚好最近在研究百度出的 ...
- 百度Echarts使用心得
echarts官网:http://echarts.baidu.com/index.html 最近用了echart,有一下问题需要注意: 1.echarts的使用实例 代码:从地图中取得whitejso ...
- echarts学习心得1---模块化单文件引入和标签式单文件引入
一.模块化单文件引入 1. 为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的) <div id="main" style="height:40 ...
- 利用c#+jquery+echarts生成统计报表(附源代码)
背景: 因为最近项目要生成报表,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.百度echarts简介请参考 http://echarts.baidu.com/ 虽然echarts功能强 ...
- 百度ECHARTS 饼图使用心得 处理data属性
做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...
- 【Echarts】百度Echarts的使用入门+两个简单的小例子+心得
Echarts对于展示结果,有一个很好的表达方式. 1.首先,在官网将js下载到本地,引用到页面上 这里是在开发环境,所以下载最后源代码这个 managerResult.jsp <%@ page ...
- echarts 角度渐变环形图心得
今天做了一个图,把自己的遇到的问题和体会记录一下,以防忘记 echarts地址 https://gallery.echartsjs.com/editor.html?c=xEPtLLmG4G 参考官网地 ...
随机推荐
- python爬虫之scrapy安装(一)
简介: Scrapy,Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy用途广泛,可以用于数据挖掘.监测和自动化测试. Scrap ...
- Centos6.8 安装nginx
1.安装相关依赖 (1)yum install gcc 备注:可以通过gcc -v 查看版本信息,来确定是否安装过. (2)yum install pcre-devel (3)yum install ...
- Java中的super()使用注意
1)super(参数):调用基类中的某一个构造函数(应该为构造函数中的第一条语句)2)this(参数):调用本类中另一种形成的构造函数(应该为构造函数中的第一条语句)3)super: 它引用当前对象的 ...
- 二、K8S镜像问题
根据前面错误信息来看我们需要下载的镜像.就当前来说,用户 mirrorgooglecontainers 在 docker hub 同步了所有 k8s 最新的镜像,先从这儿下载,然后修改 tag 即可. ...
- vue axios 封装(三)
封装三: import axios from 'axios' import { Message, MessageBox } from 'element-ui' import store from '. ...
- Spring Boot 构建电商基础秒杀项目 (一) 项目搭建
SpringBoot构建电商基础秒杀项目 学习笔记 Spring Boot 其实不是什么新的框架,它默认配置了很多框架的使用方式,就像 maven 整合了所有的 jar 包, Spring Boot ...
- 当对具体的一条记录进行操作时候 需要传递该记录的id
- python第三方库的四种安装方法
1,直接pip install安装 2,在python-->default setting-->project interprer-->add 3,在这个链接里找到需要的包,下载 h ...
- Node.js 安装与管理
一.node安装 Windows下,官网下载 Node.js 安装包,运行安装即可, 安装成功后,可查看版本号 node -v 二.npm npm 是 node 包管理工具,随同node一起安装,安装 ...
- 【XSY2753】Lcm 分治 FWT FFT 容斥
题目描述 给你\(n,k\),要你选一些互不相同的正整数,满足这些数的\(lcm\)为\(n\),且这些数的和为\(k\)的倍数. 求选择的方案数.对\(232792561\)取模. \(n\leq ...