饼图上的那些字与下面说明性的文字有些重合,该怎么缩小圆形的大小呢,还有它的位置,怎么让它向上一些或者向下一些;

有以下两个属性可以解决问题:

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使用中的那些事儿( 三)的更多相关文章

  1. echarts使用中的那些事儿(一)

    近来由于有几个小项目要用到echarts里的一些图,不得不使用,可是要完全按照自己的意愿来,要对它有些了解,要翻阅资料,遂有以下小结: 1.最开始第一步是把数据调出来就行,能在图上显示就成,以下是最开 ...

  2. echarts使用中的那些事儿(二)

    然而第二天的事情你怎么能猜到客户的心思呢: 客户:右边的是啥? 偶:可放大缩小查看各个时期的数据. 客户:把它去掉吧,全部直观显示. 偶:哦,不过数据过多的话会导致页面过长的. 客户:只有你知道这个可 ...

  3. ES5和ES6那些你必须知道的事儿(三)

    ES5和ES6那些你必须知道的事儿 ES6新增的东西 一.块级作用域:关键字let,常量const let与var的区别: a.不会进行变量声明提升 b.变量不允许被重复定义 c.变量不允许被删除 d ...

  4. ECharts 报表事件联动系列三:柱状图,饼状图实现联动

    源码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  5. echarts背景颜色渐变的三种类型

    // 线性渐变,多用于折线柱形图,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的 ...

  6. 做一个可复用的 echarts-vue 组件(延迟动画加载)

    在 vue 项目使用 echarts 的场景中,以下三点不容忽视:1. 可视化的数据往往是异步加载的:2. 若一个页面存在大量的图表( 尤其当存在关系图和地图时 ),往往会导致该页面的渲染速度很慢并可 ...

  7. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  8. ASP.NET MVC 中将数据从View传递到控制器中的三种方法(表单数据绑定)

    http://www.cnblogs.com/zyqgold/archive/2010/11/22/1884779.html 在ASP.NET MVC框架中,将视图中的数据传递到控制器中,主要通过发送 ...

  9. 用echartsjs 实现散点图与table表格双向交互,以及实现echarts取自于table数据,和自定义echarts提示内容

    本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧.虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好. 在一个大的页面中,左边为table表格,右边为echarts的 ...

随机推荐

  1. hadoop编码问题,mapreduce中Tex与string的转化 乱码问题

    引用:http://blog.csdn.net/zklth/article/details/11829563 Hadoop处理GBK文本时,发现输出出现了乱码,原来HADOOP在涉及编码时都是写死的U ...

  2. C# DataGridView的單元格中只能輸入數字

    控件類型:DataGridView 控件名稱:dgvGift_Condition 裏面用到的:IsNumeric.NotePastText.RestoreText 等請參見 前一日志“TextBox中 ...

  3. jQuery 防止相同的事件快速重复触发

    重复触发就是防止用户重复点击提交数据了,我们一般都是点击之后没反应会再次点击了,这个不但要从用户体验上来做好,还在要js或php程序脚本上做好,让用户知道点击是己提交服务器正在处理,下面我就整理从脚本 ...

  4. JavaScript高级程序设计学习笔记第十四章--表单

    1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型. HTMLFormElement 继承了 HT ...

  5. idea救命篇--误删文件恢复

    删除.覆盖文件恢复:右键文件--Local History 查到被删的代码,idea自动保存的. 即使文件目录文件被删了,在同地方新建一个同名空文件,也可以通过Local History找回来代码.

  6. MultiBinding的StringFormat参数问题

    在wpf的绑定中,我们会用到多值绑定,如下: <MultiBinding Mode="OneWay" StringFormat="{3}({0}/{1}):{2}& ...

  7. php学习笔记-PHP中的几个取整函数

    floor是向下取整,比如4.5,它是在4和5之间的一个数,那么结果就是4. ceil是向上取整,比如3.7,它是在3和4之间的一个数,那么结果就是4. round是对一个数四舍五入,小数部分如果小于 ...

  8. xgene:之illumina,,ion-torrent

    illumina技术: 工具:flowcell(流动池):8通道,每个通道都有 2种DNA引物 种在玻璃表面(用共价键连到Flowcell上),这引物和文库中的接头互补    Flowcell:8个l ...

  9. hdu3047 Zjnu Stadium (并查集)

    Zjnu Stadium Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  10. 有关Linux的.a、.so和.o文件---mark一下(转)

    gcc 生成 .a静态库和 .so动态库   (转载) 我们通常把一些公用函数制作成函数库,供其它程序使用.函数库分为静态库和动态库两种.静态库在程序编译时会被连接到目标代码中,程序运行时将不再需要该 ...