ECharts：饼图中间title自定义，和鼠标划过时自定义

时间:2022-10-13 11:28:51 作者:快盘下载人气:

实现效果;

实现方法:

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}%&nbsp;(${item.data.value}人)<b>;;
        return txtCon
      }
    },
 
还有backgroundColor,textStyle等更多地配置项。


  
  加载全部内容