echarts使用中的那些事儿( 三)
饼图上的那些字与下面说明性的文字有些重合,该怎么缩小圆形的大小呢,还有它的位置,怎么让它向上一些或者向下一些;
有以下两个属性可以解决问题:
radius : '55%', ------------这个属性设置图的大小
center: ['50%', '60%'],-----这个属性设置图的上下左右的位置
没应用这两个属性前图是这样的:


应用上面两个属性后图是下面这样的:


代码如下:
/**
* 显示百度pie图表
* @param string wrap 图表容器
* @param string title 图表名称
* @param object data 图表数据,格式[{value: 335, name: '直接访问'},...]
*/
showPieChart: function (wrap, title, data) {
var myChart = echarts.init(document.getElementById(wrap));
var legend = [];
if (data) {
$.each(data, function (i, n) {
legend.push(n.name);
});
}
myChart.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
x: 'center',
y: 'bottom',
data: legend || []
},
grid: {
x: 0,
y: 0,
width: '100%',
height: '100%'
},
series: [
{
name: title || '',
type: 'pie',
radius: '65%',//['30%', '70%'],
center: ['50%', '40%'],
/*label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},*/
labelLine: {
normal: {
show: true
}
},
data: data
}
]
});
}
echarts使用中的那些事儿( 三)的更多相关文章
- echarts使用中的那些事儿(一)
近来由于有几个小项目要用到echarts里的一些图,不得不使用,可是要完全按照自己的意愿来,要对它有些了解,要翻阅资料,遂有以下小结: 1.最开始第一步是把数据调出来就行,能在图上显示就成,以下是最开 ...
- echarts使用中的那些事儿(二)
然而第二天的事情你怎么能猜到客户的心思呢: 客户:右边的是啥? 偶:可放大缩小查看各个时期的数据. 客户:把它去掉吧,全部直观显示. 偶:哦,不过数据过多的话会导致页面过长的. 客户:只有你知道这个可 ...
- ES5和ES6那些你必须知道的事儿(三)
ES5和ES6那些你必须知道的事儿 ES6新增的东西 一.块级作用域:关键字let,常量const let与var的区别: a.不会进行变量声明提升 b.变量不允许被重复定义 c.变量不允许被删除 d ...
- ECharts 报表事件联动系列三:柱状图,饼状图实现联动
源码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- echarts背景颜色渐变的三种类型
// 线性渐变,多用于折线柱形图,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的 ...
- 做一个可复用的 echarts-vue 组件(延迟动画加载)
在 vue 项目使用 echarts 的场景中,以下三点不容忽视:1. 可视化的数据往往是异步加载的:2. 若一个页面存在大量的图表( 尤其当存在关系图和地图时 ),往往会导致该页面的渲染速度很慢并可 ...
- 前端数据可视化echarts.js使用指南
一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...
- ASP.NET MVC 中将数据从View传递到控制器中的三种方法(表单数据绑定)
http://www.cnblogs.com/zyqgold/archive/2010/11/22/1884779.html 在ASP.NET MVC框架中,将视图中的数据传递到控制器中,主要通过发送 ...
- 用echartsjs 实现散点图与table表格双向交互,以及实现echarts取自于table数据,和自定义echarts提示内容
本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧.虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好. 在一个大的页面中,左边为table表格,右边为echarts的 ...
随机推荐
- hdu3037Saving Beans——卢卡斯定理
题目:http://acm.hdu.edu.cn/showproblem.php?pid=3037 卢卡斯定理模板——大组合数的取模 代码如下: #include<iostream> #i ...
- POJ3352(连通分量缩点)
Road Construction Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 10352 Accepted: 514 ...
- javascript 中的深复制 和 其实现方法
首先,我们需要明白什么是深复制(侧重指对象方面)? 在javascript中,复制分为浅复制和深复制,个人理解,浅复制就是直接将引用复制,复制前后的两个对象指向同一个内存地址,对其中一个进行操作,另外 ...
- win7 64位搭建Mantis 缺陷管理系统(2)
建立Bug数据库 1. 右键Windows托盘的图标,选择“Local Web”,(或者在IE地址中输入“http://127.0.0.1/”)可看到如下页面: 2. 点击选择“mantis”,进入页 ...
- prototype for '类名::函数名'does not match any in class'类名'
函数声明和定义参数类型必须相同. 前置声明一定要放到名称空间内,代表该名称空间内的类.
- 天梯赛L2-006. 树的遍历L3-010. 是否完全二叉搜索树
L2-006. 树的遍历 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历 ...
- ASP.NET学习笔记(五)ASP 对象
1.ASP Response 对象用于从服务器向用户发送输出的结果. 2.ASP Request 对象用于从用户那里取得信息 Request.QueryString 命令用于搜集使用 method=& ...
- Unity 5.6 beta版本新特性
http://manew.com/thread-98549-1-1.html 最新发布的beta版改进了编辑器和2D功能,图形性能更佳,加入新的视频播放器,并添加了对Facebook Gameroom ...
- Linux运用一些常用命令
今天搜集整理了一些Linux服务器运维常用命令,希望对大家有帮助:1.删除0字节文件 find -type f -size 0 -exec rm -rf {} 2.查看进程按内存从大到小排列 ps - ...
- 洛谷P1137 旅行计划
P1137 旅行计划 题目描述 小明要去一个国家旅游.这个国家有N个城市,编号为1-N,并且有M条道路连接着,小明准备从其中一个城市出发,并只往东走到城市i停止. 所以他就需要选择最先到达的城市,并制 ...