快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → ECharts:饼图中间title自定义,和鼠标划过时自定义

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

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

实现效果;

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等更多地配置项。

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。