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

最新推荐文章于 2024-05-16 09:00:00 发布

JuS巨山超力霸

最新推荐文章于 2024-05-16 09:00:00 发布

阅读量5.2k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_49623851/article/details/127284512

版权

实现效果：

实现方法:

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