echarts 圆环 中间有默认的值,hover上去圆环中间也有某个数据的值
时间: 2024-03-17 10:46:38 浏览: 67
您好!关于您提到的 echarts 圆环中间有默认的值,hover 上去圆环中间也有某个数据的值,可以通过 echarts 的 tooltip 配置实现。具体步骤如下:
1. 在 echarts 的 option 中设置 series 中的 data 数据,并在 tooltip 中设置 trigger 为 'item',并添加 formatter 回调函数,返回需要展示的数据。
2. 在 tooltip 中设置 extraCssText,添加样式控制 tooltip 样式。
3. 在 series 中设置 label 和 emphasis,控制圆环中间的文字样式和 hover 样式。
下面是一个简单的示例代码:
```javascript
option = {
series: [
{
type: 'pie',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
radius: ['50%', '70%'],
label: {
show: true,
position: 'center',
formatter: '默认值',
fontSize: 20,
fontWeight: 'bold'
},
emphasis: {
label: {
show: true,
formatter: '{b}\n{c} ({d}%)',
fontSize: 16,
fontWeight: 'bold'
}
},
itemStyle: {
borderRadius: 4,
borderColor: '#fff',
borderWidth: 2
}
}
],
tooltip: {
trigger: 'item',
formatter: function (params) {
return `${params.name}: ${params.value} (${params.percent}%)`;
},
extraCssText: 'background-color: rgba(0, 0, 0, 0.7); color: #fff; font-size: 14px; padding: 5px;'
}
};
```
这样就可以实现 echarts 圆环中间有默认值,hover 上去圆环中间也有某个数据的值了。
阅读全文