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

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

radius : '55%', ------------这个属性设置图的大小
center: ['50%', '60%'],-----这个属性设置图的上下左右的位置

没应用这两个属性前图是这样的:

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

代码如下:

  1. /**
  2. * 显示百度pie图表
  3. * @param string wrap 图表容器
  4. * @param string title 图表名称
  5. * @param object data 图表数据,格式[{value: 335, name: '直接访问'},...]
  6. */
  7. showPieChart: function (wrap, title, data) {
  8. var myChart = echarts.init(document.getElementById(wrap));
  9. var legend = [];
  10. if (data) {
  11. $.each(data, function (i, n) {
  12. legend.push(n.name);
  13. });
  14. }
  15. myChart.setOption({
  16. tooltip: {
  17. trigger: 'item',
  18. formatter: "{a} <br/>{b}: {c} ({d}%)"
  19. },
  20. legend: {
  21. x: 'center',
  22. y: 'bottom',
  23. data: legend || []
  24. },
  25. grid: {
  26. x: 0,
  27. y: 0,
  28. width: '100%',
  29. height: '100%'
  30. },
  31. series: [
  32. {
  33. name: title || '',
  34. type: 'pie',
  35. radius: '65%',//['30%', '70%'],
  36. center: ['50%', '40%'],
  37. /*label: {
  38. normal: {
  39. show: false,
  40. position: 'center'
  41. },
  42. emphasis: {
  43. show: true,
  44. textStyle: {
  45. fontSize: '30',
  46. fontWeight: 'bold'
  47. }
  48. }
  49. },*/
  50. labelLine: {
  51. normal: {
  52. show: true
  53. }
  54. },
  55. data: data
  56. }
  57. ]
  58. });
  59. }

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. C++多态的实现条件

    #include <iostream> class Person{ public: virtual void say(){ std::cout<<"person&qu ...

  2. Spring boot 学习 五:domain的定义

    一 public class City implements Serializable 实现了Sericalizable接口,只是一种标志.表示可以被序列化. java的ObjectOutputStr ...

  3. Redis 教程笔记

    简介: 开源BSD.key-value数据库.数据持久化(可将内存数据保存到磁盘中),提供多种数据结构. 支持数据备份(master-slave模式) 优势: 性能高.数据类型丰富.原子性.其他 Re ...

  4. C#Dos命令

    记下 打开IIs:按Win+R键,输入inetmgr ; 远程桌面:按Win+R键,输入mstsc; 启动服务:按Win+R键,输入inetmgr; 删除某服务:sc delete [ServerNa ...

  5. SQL Server中的聚集索引(clustered index) 和 非聚集索引 (non-clustered index)

    本文转载自  http://blog.csdn.net/ak913/article/details/8026743 面试时经常问到的问题: 1. 什么是聚合索引(clustered index) / ...

  6. oracle查看表,索引,视图,存储过程的定义

    通过  DBMS_METADATA  包 Oracle 的在线文档,对这个包有详细说明: DBMS_METADATA 通过该dbms_metadata包的get_ddl()方法,我们可以查看表,索引, ...

  7. C++11 assert/static_assert

    assert assert 是运行期断言,它用来发现运行期间的错误,不能提前到编译期发现错误,也不具有强制性,也谈不上改善编译信息的可读性,既然是运行期检查,对性能当然是有影响的,所以经常在发行版本中 ...

  8. js选中select

    function selected(id, val) { $('#' + id + ' option[value="' + val + '"]').attr('selected', ...

  9. React 从入门到进阶之路(五)

    之前的文章我们介绍了  React 事件,方法, React定义方法的几种方式 获取数据 改变数据 执行方法传值.接下来我们将介绍 React 表单事件 键盘事件 事件对象以及 React中 的 re ...

  10. IDEA如何找到接口的实现类

    如何找到接口的实现类 (IDEA))在ApplicationContext上右击 Diagrams ->show diagram 可以看到继承关系: 在ApplicationContext上右击 ...