vue中echarts环形图:1.实现鼠标移入移出环形图中间显示不同的内容 2.环形图抖动
问题详细描述:制作echarts环形图,环形图中间默认显示总量,鼠标移入对应的部分,中间显示相对应的数量。问题解决方案:利用标题和副标题展示默认总量,再在series设置鼠标移入移出展示的数量以及位置。详细步骤如下:1.设置标题和副标题展示默认总量,设置位置以及样式。代码如下:title: {text: '总任务数',subtext: 2,left: 'center',top: '45%',
·
问题详细描述:制作echarts环形图,环形图中间默认显示总量,鼠标移入对应的部分,中间显示相对应的数量。
问题解决方案:利用标题和副标题展示默认总量,再在series设置鼠标移入移出展示的数量以及位置。
详细步骤如下:1.设置标题和副标题展示默认总量,设置位置以及样式。代码如下:
title: {
text: '总任务数',
subtext: 2,
left: 'center',
top: '45%',
itemGap: 2,
textStyle: { // 标题样式
fontSize: 20, // 字号
color: '#333' // 颜色
},
subtextStyle: { // 副标题样式
color: '#333', // 字体颜色
fontWeight: 700, // 字体加粗
fontSize: 18 // 字号
}
},
2. 设置鼠标移入移出展示的数据量
series: [
{
name: '文件清理情况',
type: 'pie',
radius: ['40%', '60%'], // 第一个为环形图的内半径 ,第二个值为环形图的外半径
data: [
{
value: 2,
name: '已完成',
itemStyle: {
color: '#4466d2'
},
label: {
textStyle: {
color: '#4466d2'
}
}
},
{
value: 0,
name: '未完成',
itemStyle: {
color: '#fdbb24'
},
label: {
textStyle: {
color: '#fdbb24'
}
}
}
],
label: {
normal: {
show: true,
position: 'center', // 设置居中
formatter: function (data) { // 设置圆饼图中间文字排版
return data.name + '\n' + data.value // 对应的名字和值
},
textStyle: {
fontSize: '0'
}
},
emphasis: {
show: true, // 文字至于中间时,这里需为true
textStyle: { // 设置文字样式
fontSize: '18',
color: '#333',
fontWeight: 700
}
}
}
}
]
3. 实现效果
第二个问题:鼠标移入环形图会抖动
解决方案:
tooltip: {
transitionDuration: 0
},
更多推荐
已为社区贡献3条内容
所有评论(0)