python画饼图存在的问题_解决echarts中饼图标签重叠的问题

饼图中的series有个avoidLabelOverlap属性,

avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠。

当avoidLabelOverlap设置为false时会出现以下情况

sad1bagopoa.jpg

改为true之后就不会重叠

yfs2oghcr1r.jpg

代码如下

var option = {

tooltip: {

trigger: "item",

formatter: "{a}
{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轴:

lfmdg5jkxdu.jpg

秘籍:

2y4rvanoypb.jpg

代码

// 基于准备好的dom,初始化echarts实例

var colors = ['#0089FF','#B865DF',/*'#5ADF63','#FFDD00',*/'#224666', '#675bba'];

// 指定图表的配置项和数据

option = {

/*grid:{

y:'25%'},*/

color: colors,

/* title: {

text: '各医院指标对比情况',

left: 16,

textStyle: {

fontSize: 18,

color:'#0089FF'

}

},*/

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,

/* lineStyle: {

color: '#05edfc'

}*/

},

axisLabel: {

show: true,

/* color: '#fff',*/

fontSize: 12,

interval: 0,

formatter:function(value)

{

return value;

}

//fontWeight: 'bold'

}

},

],

yAxis: [

{

type: 'value',

name: '组数整体指标',

position: 'left',

splitLine:{show: true},

axisLine: {

show: false,

/* lineStyle: {

color: '#E7E7E7'

}*/

},

axisLabel: {

show:true,

showMinLabel:true,

showMaxLabel:true,

formatter: '{value}'

},

},

{

type: 'value',

name: 'CMI',

position: 'right',

splitLine:{show: true},

axisLine: {

show: false,

/* lineStyle: {

color: '#E7E7E7'

}*/

},

axisLabel: {

show:true,

showMinLabel:true,

showMaxLabel:true,

formatter: '{value}'

},

},

],

series: [

{

name:'组数',

type:'bar',

barWidth : 20,

data:arr2,

yAxisIndex: 0,

/* markPoint : {

data : [

{type : 'max', name: '最大值'},

{type : 'min', name: '最小值'}

]

}*/

},

{

name:'CMI',

type:'bar',

barWidth : 20,

data:arr3,

yAxisIndex: 1,

/* markPoint : {

data : [

{type : 'max', name: '最大值'},

{type : 'min', name: '最小值'}

]

}*/

}

]

};

以上这篇解决echarts中饼图标签重叠的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

本文标题: 解决echarts中饼图标签重叠的问题

本文地址: http://www.cppcns.com/jiaoben/python/313536.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts 绘制饼图需要以下步骤: 1. 引入 ECharts 的 JavaScript 文件。 2. 在 HTML 创建一个用于显示图表的 DOM 元素。 3. 使用 ECharts 的 API 初始化图表。 4. 配置图表的基本信息,如标题、提示框等。 5. 配置饼图的数据和样式,如饼图的半径、颜色、标签等。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>ECharts 饼图示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 初始化图表 var chart = echarts.init(document.getElementById('chart')); // 配置基本信息 chart.setOption({ title: { text: '年龄分布', left: 'center' }, tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['20岁以下', '20-30岁', '30-40岁', '40岁以上'] }, series: [{ name: '年龄分布', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 20, name: '20岁以下'}, {value: 35, name: '20-30岁'}, {value: 25, name: '30-40岁'}, {value: 20, name: '40岁以上'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }); </script> </body> </html> ``` 在上述代码,我们使用 ECharts 的 `init` 方法初始化了一个图表,并使用 `setOption` 方法配置了饼图的基本信息和数据。其,`series` 属性的 `type` 属性指定了图表类型为饼图,`data` 属性指定了饼图的数据,`itemStyle` 属性指定了饼图的样式。 需要注意的是,上述代码ECharts 版本为 5.1.2,如果你使用的是其他版本的 ECharts,可能会有些许差异。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值