求教!echarts关系图的圆环怎么放小一点

echarts官网中给了一个圆形关系图的示例,因为这个圆形太大,导致边上的标签文字显示不完全,现在想要把这个圆形放小一点,让那个标签文字完全显示出来,应该怎么改呢
图片说明

0

2个回答

radius: ['50%', '50%'], 修改这两个百分比 分别是内外的大小

1
sinat_27681251
sinat_27681251 我需要的并不是中间的饼状图变小 而是周围的这个关系图变小
接近 2 年之前 回复
 option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直达', selected:true},
                {value:679, name:'营销广告'},
                {value:1548, name:'搜索引擎'}
            ]
        },
        {
            name:'访问来源',
            type:'pie',
            radius: ['10%', '25%'],

            data:[
                {value:335, name:'直达'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1048, name:'百度'},
                {value:251, name:'谷歌'},
                {value:147, name:'必应'},
                {value:102, name:'其他'}
            ]
        }
    ]
};

你调整radius后面的百分值,调整完之后可以看效果,

可以在这看:

http://gallery.echartsjs.com/editor.html?c=pie-nest

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
echarts实现带光圈的环形图
实现效果: 实现原理:图层的叠加 (1)多个环形图的叠加 (2)环形图和油表图的嵌套 代码: let _that = this myChart = _that.$echarts.init(document.getElementById(this.pieId)) let data = [{value: 10, name: '香蕉'}, ...
Vue中Echarts中一个图表内多个圆环图的动态定位和大小设置
效果图: 更多圆环图时: data中定义echarts初始配置: // 图表配置项 option: { tooltip: { trigger: &quot;item&quot;, formatter: &quot;{a} &amp;lt;br/&amp;gt;{b} : {c} ({d}%)&quot; }, // 图例 ...
echarts饼图实现圆环任务进度条
最终的效果 源代码 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;meta charset=&amp;amp;amp;quot;utf-8
Qt5类继承关系图
Qt5类继承关系图,对于理清Qt5框架还有有点帮助的。pdf文档只有一面,缩放比例放小一点。
echarts关系图动态获取数据
最近在做一个项目的时候由于需要将数据用echarts关系图展示到前端,最开始的想法是一次性将数据全部查出来,然后展示到前端, 但是后面发现,在数据量很大的情况下,一次查询将花费很长的时间,于是后面就想,为什么不按需来查呢,下面就是我通过ajax异步获取数据实现的按需查询,不得不说,效率大大的提高。 前面的初始化什么的就不说了,直奔主题 首先要知道echarts3.0点击事件的添加,很简单 第
echarts关系图节点设置头像,并使头像以圆形来显示!
核心代码出处见:https://gallery.echartsjs.com/editor.html?c=x7rk_-y1Yd 直接贴出全部代码: &lt;!DOCTYPE html&gt; &lt;html style="height: 100%"&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-wid...
ECharts关系图(详细示例——满满的注释)
图表效果如下:具体代码如下:&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;关系图案例&amp;lt;/title&amp;gt; &amp;lt;!-- 引入 ECharts 文件 --&amp;gt; &amp;lt;script src=&quot;js/
echarts3.0之关系图详解
近期需要使用echarts关系图,当我打开echarts3.0官方demo后发现,对于新手而言,直接看懂有点儿难度,固写这样一篇文章让自己加深记忆,也便新手迅速上手。话不多说,开整! echarts3.0官网提供的demo是json文件或者xml文件,我这里以json格式为例说明。 echarts3.0关系图由三部分组成,关系类别、关系节点、节点之间连线。下面是代码,代码可以直接粘贴到echa
ECharts图表组件之关系图
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Test&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;div id=&quot;main&quot; style=&quo
echarts动态关系图示例
echarts动态加载关系图示例,三层结构,中心关系子层,子层再次关系子层。
查看 echarts 关系图的每个 node 的 xy 坐标
一段 echarts 关系图代码 test.html &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt
Echarts关系图graph应用
环境vue组件中 ​ &amp;lt;template&amp;gt; &amp;lt;div id=&quot;pic&quot; style=&quot;width: 300px; height: 500px;&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script&amp;gt; export default { mounted() { // const categories = [];
echarts 结合ajax完成上下级关系图的绘制
这10天一直在做一个关于企业关系图的模块,一开始的时候用公司的框架,但是做出来的效果很low,当然因为一开始的时候只是想着在做的过程中学习公司的框架。后来主管推荐我用echarts来做,于是经过这1个星期把这个模块算是做的跟需求文档上要求的差不多了。在这里把过程记录一下。 因为我是直接在公司的项目上做的,而公司框架用的是xfire+spring,对于xfire我还不太了解,所以就先用最基础的js
Echarts 绘制关系图(知识图谱可视化)
1.前言 正在做知识图谱 ,以前可视化用的是D3,因为D3不是太会,而且D3学习成本比较高,所以改用Echarts,Echarts做出来的关系图还是挺好的,记录下来,给以后实验室的学弟学妹们使用。 2.关系图实例 样例代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;ECharts 关系图&l...
JS之使用Echarts画出人际关系图
首先在html中写一个壳子,通过ajax获取数据后再向壳子中注入数据即可 1、html代码如下: &lt;div class="strip_out"&gt; &lt;div class="strip" id="interpersonalRelationship"&gt;&lt;/div&gt; &lt;/div&gt; 2、JS代码如下: 数据往哪组装呢:根据id var in...
Echarts实现关系图
首先贴上代码: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;关系图案例&amp;lt;/title&amp;gt; &amp;lt;!-- 引入 ECharts 文件 --&amp;gt; &amp;lt;script type=&quot;
用Echarts 制作一个数据库表的关联关系图(一)
一、背景       项目中要开发一个表示数据库表关联关系的图,在选型时费了些功夫。先后尝试了几种方案,Canvas和SVG(不好用),jsplumb(适合做流程图,太重),最终当看到echarts 中的graph 的时候,我眼前一亮,就是她了。          数据库表关联关系图只做个轻量级的展示和简单的操作,如添加节点,连接表节点,在节点连线上展示连接条件等功能,这就需要我们对 ec...
echarts 半圆环,即仪表盘效果
思路有两个,一个是echart提供的仪表盘图形api,一个是用圆环图来画一个&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;ECharts练习&amp;lt;/title&amp;gt; &amp;lt;!-- &amp;lt;scr
ECharts圆环图(详细示例——满满的注释)
图表效果如下:具体代码如下:&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;圆环图案例&amp;lt;/title&amp;gt; &amp;lt;!-- 引入 ECharts 文件 --&amp;gt; &amp;lt;script src=&quot;js/
ECharts圆环图和饼图使用
ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),提供直观,交互丰富,可高度个性化定制的数据可视化图表。ECharts 是百度的产品。。 ECharts使用十分简单,只要在页面引用js文件即可,然后在写一个给定长度和宽度的div装载图表,在使用...
(Angular+ TS) Echarts Graph 关系图节点拖拽不反弹+自定义按钮实现缩放
前提: 1. 需要在module中引入NgxEchartsModule 2. ts文件中引入所需文件: import { Component, OnInit, NgZone } from '@angular/core'; import { of } from 'rxjs'; import * as echarts from 'echarts'; const echart = ec...
echarts 实现关系图表
  1.效果如上,官方示例简化 2.force1.html &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge
echarts关系图异步加载数据
单位
echarts 关系图节点重名问题解决方案!
项目中用到echarts现在不足为奇,但是关系图(graph)这个东西比常规的饼图,条形图,折线图等等这些都要难搞一些,项目中会有很多需求,   比如,A和B之间有多重关系能不能画两条以上的线? 这个问题我遇到过,echarts本身就没有实现两条线以上这个功能,在官网只能找到最多两条线的demo,最后只有想其他办法解决项目需求。 再比如,关系图节点名称的问题,我们一般都是把人员姓名来做显...
Echarts3 关系图 使用
效果图如上: 实例: 生成随机数据的json的js代码:<!doctype html> <html lang="en"> <head> <!-- <meta charset="UTF-8"> --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <!-- <scri
Echarts的graph关系图的节点图片自定义及关系边上的提示框内容自定义
Echarts的graph关系图的节点图片自定义及关系边上的提示框内容自定义
用Echarts 制作一个数据库表的关联关系图(二)
         前面 用Echarts 制作一个数据库表的关联关系图(一) 中提到了几个问题,接下来一个一个解决。 1、添加节点         目前项目背景为:左边是展示数据库表的 ztree 树,树的上面是一些对ztree 树进行操作的一些按钮,我的思路是在左边按钮区域添加一个按钮,选中树节点后(可支持多选),点击按钮后做添加操作。 let [ ...temp ] = thi...
活用echarts关系图formatter方法,实现同名节点的渲染
echarts关系图的配置中,有两个关键的数据,data与links,我们在制作关系图的时候,data数组中,节点名称name必须唯一,否则echarts会抛出 “Cannot set property 'dataIndex' of undefined”的错误。但有时我们偏偏需要出现两个同名的节点,那么如何实现。1 data数据加工,    既然echarts要求data数组中name属性(默认展...
ECharts关系图,节点可拖拽,添加节点和边的点击事件
最近在做一个neo4j前端可视化的任务,对比了ECharts.js,Cytoscape.js和D3.js几个前端可视化工具,最终选择了ECharts.js,百度的一款开源工具,简单好用,比较容易上手。后台采用Python的Django框架,主要用于接收前端的请求,从neo4j数据库获取数据,并将数据传给前端服务器展示。这里只展示ECharts的用法以及自己的一些总结,为以后打下一个...
echart动态图表
echart动态图表
继续echarts环形写入vue爬坑(二)
一、今天继续昨天的环形组件的编写,昨天只完成了一个,今天对两个环形组件进行拼接,由于两个环形组件的属性会有很多重复的项,所以考虑了一些方法,考虑到父传子的模式进行组件传递,但是由于对组件掌握水平有限,这种方法还在研究阶段,最终还是新建了一个red的组件,然后对两个进行拼接。经过这几天的学习,以下为引入组件的重要三步:1. import 引入import Red from './pages/Red'...
使用echarts插件画半环形图,并保证百分比之和为100%
      有需求将使用半环状图展示数据百分比,搜索后发现大部分改成半环状图后,百分比相加为50%,本来考虑修改自带的js文件中formatter方法,但是因为找不到怎么改。      后搜索文章http://blog.csdn.net/aa97257540/article/details/52101652的半环状图后,有了修改formatter方法的想法。     在http://blog....
echarts关系图(力引导)拖拽单节点不还原位置
实现不还原位置核心方法: Draggable.prototype._dragEnd控制鼠标mouseup事件, 其中this.dispatchToElement(param(draggingTarget, e), ‘dragend’, e.event);用于还原节点,将其注释即可实现拖动节点不还原,目前测试没有BUG echarts中对应代码: //大概在源码1315行 _dragEnd: fun...
Echarts饼图之圆环图
需求: 页面上加载一个echarts环形图。 来由: 身为一个Java开发人员,被项目经理拉过来写页面,心里也是很苦逼~可是也没办法,只能硬着头皮干啊,直接上代码 // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('t_2')); ...
vue中使用echarts制作圆环图
&amp;lt;div id=&quot;main&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;script type=&quot;text/ecmascript-6&quot;&amp;gt; export default { //从父组件中接收到的数据 props:{ chartT:{ type:Object, required:true } }, ...
echarts关系图/力导向动态图(地图经纬度定位)
需求:项目要做一个动态展示服务器前置机间是否连通的界面。 先看下效果,分两种,一种带地图(经纬度),一种屏蔽地图显示:   这个是通过百度echarts的一个案列改造而来。下面附上官网地址、API地址、改造前Demo地址、china.json和echarts.js: 官网地址:http://echarts.baidu.com/ API地址:http://echarts...
【百度echarts】实现圆环进度条-代码示例代码demo
【百度echarts】实现圆环进度条-代码示例 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;!-- &amp;lt;script src=&quot;js/echarts.min.js&quot;&amp;gt;&amp;lt;/script&a
用echarts画圆环图,显示进度条效果
要实现类似于下图的效果,开始用的css画出来的,感觉很复杂,换了echart省很多代码直接上代码: var e=80;   var Chart4 = echarts.init(document.getElementById('chart4')); option = { title:{ show:true, text:e+'%', ...
如何用Echarts插件写出半环图
首先下载echarts3.0.js    地址 : http://echarts.baidu.com/download.html 思想:将json串中的value值相加计算总和,添加一个数组到json中,设置添加的数组的样式,颜色为白色,使其效果看不见的状态。 创建一个div的层,设置它高度,宽度,设置id选择器 'main' ,(名字自己随便起!). 设置echarts
echarts3关系结构图,多次刷新改变结构图值出现的问题
echarts的出现为做BI展示的开发者提供了极大的便利,但有时会出现一些奇怪的问题,而官方的开发文档又不是很全,笔者就遇到过这样的问题。 之前用echarts3做关系结构图,值是后台拼接好的json字符串,需要实现点击特定企业时,后台查询并封装为特定的json字符串,页面刷新echarts关系结构图,显示相关企业详细信息的结构图。 第一次和第二次的点击事件都是正常的,echarts结构图动态...