修改echarts环形图的牵引线及文字位置

修改echarts环形图的牵引线及文字位置，下面代码及效果不仅如此，也包含了其它的效果哦。有问题可以留言。

根据echarts官方示例修改效果：

官方示例图：

修改效果图：

直接上代码：其它不多说。

app.title = '嵌套环形图';
option = {legend: {itemWidth: 15, //图例的宽度itemHeight: 15, //图例的高度itemGap: 25,orient: 'vertical',right: 'right',top:'center',icon: "rect",selectedMode: false, //取消图例上的点击事件data: ['4~18岁', '18<X≤80岁', '>80岁']},color: ['#33C6F7','#FFA700','#FF9090'],//扇形区域以及列表颜色// 设置环形中间的数据。默认center为中间，如果图表位置变化了，中间文字是不变的。
    graphic:[{type:'text',left:'center',top:'40%',style:{fill:'#686868',text:'总患者数'}},{type:'text',left:'center',top:'50%',z:10,style:{text:'3231',font: '30px Microsoft YaHei'}}],series: [{type: 'pie',radius: ['60%', '75%'],//两个表示环center: ['50%', '55%'],labelLine: {//设置延长线的长度
            normal: {length: 5,//设置延长线的长度// length2: 10,//设置第二段延长线的长度
            }},label: {normal: {// formatter: '{d}%, {c} \n\n',formatter: '{per|{d}%} , {c|{c}}\n{hr|}\n{a|}',//这里最后另一行设置了一个空数据是为了能让延长线与hr线对接起来padding: [0, -10],//取消hr线跟延长线之间的间隙
                rich: {a: {color: '#999',lineHeight: 20,//设置最后一行空数据高度，为了能让延长线与hr线对接起来align: 'center'},hr: {//设置hr是为了让中间线能够自适应长度borderColor: 'auto',//hr的颜色为auto时候会主动显示颜色的width: '105%',borderWidth: 0.5,height: 0.5,},per: {//用百分比数据来调整下数字位置，显的好看些。如果不设置，formatter最后一行的空数据就不需要padding: [4, 0],}}}},data: [{value: 311,name: '4~18岁'},{value: 1311,name: '18<X≤80岁'},{value: 9112,name: '>80岁'}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};

运行效果图：

转载于:https://www.cnblogs.com/wangmaoling/p/10207555.html

修改echarts环形图的牵引线及文字位置相关推荐

Echarts环形图使用和设置（内外大小、颜色、指示线、圆圈中心字展示）
Echarts环形图使用 1.官网找图 Echarts官网链接 2.使用首先要进行下载,打开cmd,输入 npm install echarts --save 如果显示报错,那么使用管理员身份运行c ...
echarts 环形图占比_环形图_仪表盘
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
echarts环形图内实现自定义添加文字数字和缩放自适应
文章目录需求场景实现思路全部代码示例需求场景在echarts的环形图里加上文字和数字并自适应.如下图: 实现思路在series加上一层,只放文字和数字. 重点代码如下: // 就是这里! ...
Echarts环形图--自定义图例文本和中心文字
一.设置环形图中心文字可用 titel.text 和 title.subtext 来定义中心处的文本 title:{text:subtext: } 用 graphic 原生图形元素组件每个图形元素 ...
echarts 环形图中间添加html,echarts配置一个中间显示文字的环形图
先贴一张效果图 1.导包我没有用什么框架,直接引入echarts.min.js文件,代码如下: 注意这样引入不要放在header标签里,会阻塞html渲染,导致报错. 2.给echarts一个盒子 ...
echarts环形图内部圆，外部圆形以及阴影设置
环形图修改图例自定义icon 完整代码图 Chart1() { // 折算价值户新增构成let chartDom = document.getElementById('main');let myCh ...
echarts 环形图
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
echarts 环形图默认高亮展示某个数据
环形图默认高亮显示数据代码: data(){return {chart:null,} }, methods: {initChart() {this.chart = this.$echarts.ini ...
echarts 圆环图中间插图或文字
话不多说,直接上代码: option ={ tooltip: { trigger: 'item' // 鼠标悬浮显示 }, // legend: { // 图例 // top: '5%', // le ...

修改echarts环形图的牵引线及文字位置

修改echarts环形图的牵引线及文字位置相关推荐

最新文章

热门文章