ECharts:饼图中间title自定义,和鼠标划过时自定义
饼图中间title自定义,和鼠标划过时自定义
·
实现效果:
实现方法:
echats的配置项有很多,一般遇到什么问题去官网研究配置项就可以了,这里简单的记录几个小问题。
1.实现饼图中间title的自定义:
使用title
属性,通过偏移来定位显示的位置,设置主、副标题的内容和样式
title: [
{
text: num.toFixed(2) + '%', // 主标题
x: 'center',
y: 'center',
textStyle: { // 主标题样式
fontSize: '20',
color: '#06A17E',
fontweight: 'bold'
},
// subtext: 'xxx', // 副标题
// subtextStyle: { // 副标题样式
// color: 'red',
// fontSize: 13,
// fontWeight: 'bold'
// },
},
2.实现饼图鼠标划过时饼状图上显示的数据:
使用formatter,支持字符串模板和回调函数两种形式
tooltip: {
trigger: "item", //鼠标划过时饼状图上显示的数据
formatter:(item)=>{
let txtCon = `${item.data.name}</br><b>${item.percent}% (${item.data.value}人)<b>`;
return txtCon
}
},
还有backgroundColor,textStyle等更多地配置项。
更多推荐
已为社区贡献2条内容
所有评论(0)