时间:2021-05-22
饼图中的series有个avoidLabelOverlap属性,
avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠。
当avoidLabelOverlap设置为false时会出现以下情况
改为true之后就不会重叠
代码如下
var option = { tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { //orient: "vertical", x: "0%", //y: "25%", //y: "5%", itemWidth: 14, itemHeight: 14, align: "left", data: xData, textStyle: { color: "#fff" } }, series: [ { name: "危险源状态", type: "pie", radius: ["25%", "45%"], center: ["50%", "60%"], avoidLabelOverlap: true,//对,就是这里avoidLabelOverlap label: { normal: { show: true, position: "center" }, emphasis: { show: true, textStyle: { fontSize: "12", fontWeight: "bold" } } }, labelLine: { normal: { show: true } }, data: pieData } ] };补充知识:echarts柱状图轻松实现分别采用两个不同单位的y轴
echarts柱状图轻松实现分别采用两个不同单位的y轴:
秘籍:
代码
// 基于准备好的dom,初始化echarts实例 var colors = ['#0089FF','#B865DF','#224666', '#675bba']; // 指定图表的配置项和数据 option = { color: colors, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, legend: { data:['组数','CMI'], x:'80%' }, xAxis: [ { type: 'category', data: arr, axisPointer: { type: 'shadow' }, axisLine: { show: true, }, axisLabel: { show: true, fontSize: 12, interval: 0, formatter:function(value) { return value; } //fontWeight: 'bold' } }, ], yAxis: [ { type: 'value', name: '组数整体指标', position: 'left', splitLine:{show: true}, axisLine: { show: false, }, axisLabel: { show:true, showMinLabel:true, showMaxLabel:true, formatter: '{value}' }, }, { type: 'value', name: 'CMI', position: 'right', splitLine:{show: true}, axisLine: { show: false, }, axisLabel: { show:true, showMinLabel:true, showMaxLabel:true, formatter: '{value}' }, }, ], series: [ { name:'组数', type:'bar', barWidth : 20, data:arr2, yAxisIndex: 0, }, { name:'CMI', type:'bar', barWidth : 20, data:arr3, yAxisIndex: 1, } ] };以上这篇解决echarts中饼图标签重叠的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
场景SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图。Echarts3官网获取Echarts从官网下载界面选择你需要的版本下载,根据开
Echarts是现在程序员做图表用到比较多的一种技术,前段时间,我就用了一下Echarts,我原本是将饼图先隐藏,然后点击按钮让它再显示出来,但是再显示时,饼状
ppt中想要设计一款简单的人形图标,该怎么制作人形剪影重叠效果的图标呢?重叠人形,图标利用了拆分图形功能,相对比较简单,下面我们就来看看详细的教程。软件名称:P
本文实例讲述了JavaScript使用百度ECharts插件绘制饼图操作。分享给大家供大家参考,具体如下:百度ECharts是一款由百度前端团队开发与维护的,基
说明我用echars很久了,如果出现如上图所示样式的饼图,我用echarts很难实现,官方给的文档没有这种模式的饼图。试过用d3和canvas分别画饼图,因为本