资讯

展开

ECharts:饼图中间title自定义,和鼠标划过时自定义

作者:快盘下载 人气:

实现效果;

ECharts:饼图中间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}%&nbsp;(${item.data.value}人)<b>;;
        return txtCon
      }
    },

还有backgroundColor,textStyle等更多地配置项。

加载全部内容

相关教程
猜你喜欢
用户评论
快盘暂不提供评论功能!