实现效果;
实现方法:
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等更多地配置项。