ECharts:饼图中间title自定义,和鼠标划过时自定义
作者:快盘下载 人气:42实现效果;
实现方法:
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等更多地配置项。
加载全部内容