实现效果:

 实现方法:

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐