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使用心得总结的更多相关文章

  1. ECharts使用心得总结(二)

    Echarts使用心得总结(二) 前言: 前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一下.之前 ...

  2. ECharts使用心得

    ECharts百度旗下图标插件,在展示地图.雷达图等方面有很好的支持. 应用场景: 自动生成X轴的数据: 设置:xAxis的type=value || type=time 并且设置series的dat ...

  3. ECharts使用心得——矩阵树图

    1. 缘起 最近实验室 boss 让用矩形树图做一下研究数据的展示,囧,矩形树图是什么鬼.问了问师兄,说用 R 语言可以实现,让我去研究一下. = =,那这周不是不用干别的了. 刚好最近在研究百度出的 ...

  4. 百度Echarts使用心得

    echarts官网:http://echarts.baidu.com/index.html 最近用了echart,有一下问题需要注意: 1.echarts的使用实例 代码:从地图中取得whitejso ...

  5. echarts学习心得1---模块化单文件引入和标签式单文件引入

    一.模块化单文件引入 1. 为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的) <div id="main" style="height:40 ...

  6. 利用c#+jquery+echarts生成统计报表(附源代码)

    背景: 因为最近项目要生成报表,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.百度echarts简介请参考 http://echarts.baidu.com/ 虽然echarts功能强 ...

  7. 百度ECHARTS 饼图使用心得 处理data属性

    做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...

  8. 【Echarts】百度Echarts的使用入门+两个简单的小例子+心得

    Echarts对于展示结果,有一个很好的表达方式. 1.首先,在官网将js下载到本地,引用到页面上 这里是在开发环境,所以下载最后源代码这个 managerResult.jsp <%@ page ...

  9. echarts 角度渐变环形图心得

    今天做了一个图,把自己的遇到的问题和体会记录一下,以防忘记 echarts地址 https://gallery.echartsjs.com/editor.html?c=xEPtLLmG4G 参考官网地 ...

随机推荐

  1. python爬虫之scrapy安装(一)

    简介: Scrapy,Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy用途广泛,可以用于数据挖掘.监测和自动化测试. Scrap ...

  2. Centos6.8 安装nginx

    1.安装相关依赖 (1)yum install gcc 备注:可以通过gcc -v 查看版本信息,来确定是否安装过. (2)yum install pcre-devel (3)yum install ...

  3. Java中的super()使用注意

    1)super(参数):调用基类中的某一个构造函数(应该为构造函数中的第一条语句)2)this(参数):调用本类中另一种形成的构造函数(应该为构造函数中的第一条语句)3)super: 它引用当前对象的 ...

  4. 二、K8S镜像问题

    根据前面错误信息来看我们需要下载的镜像.就当前来说,用户 mirrorgooglecontainers 在 docker hub 同步了所有 k8s 最新的镜像,先从这儿下载,然后修改 tag 即可. ...

  5. vue axios 封装(三)

    封装三: import axios from 'axios' import { Message, MessageBox } from 'element-ui' import store from '. ...

  6. Spring Boot 构建电商基础秒杀项目 (一) 项目搭建

    SpringBoot构建电商基础秒杀项目 学习笔记 Spring Boot 其实不是什么新的框架,它默认配置了很多框架的使用方式,就像 maven 整合了所有的 jar 包, Spring Boot ...

  7. 当对具体的一条记录进行操作时候 需要传递该记录的id

  8. python第三方库的四种安装方法

    1,直接pip install安装 2,在python-->default setting-->project interprer-->add 3,在这个链接里找到需要的包,下载 h ...

  9. Node.js 安装与管理

    一.node安装 Windows下,官网下载 Node.js 安装包,运行安装即可, 安装成功后,可查看版本号 node -v 二.npm npm 是 node 包管理工具,随同node一起安装,安装 ...

  10. 【XSY2753】Lcm 分治 FWT FFT 容斥

    题目描述 给你\(n,k\),要你选一些互不相同的正整数,满足这些数的\(lcm\)为\(n\),且这些数的和为\(k\)的倍数. 求选择的方案数.对\(232792561\)取模. \(n\leq ...