echarts饼图 mouseover中间部分文字样式设置，默认显示总和

最新推荐文章于 2023-04-22 20:31:37 发布

原创

最新推荐文章于 2023-04-22 20:31:37 发布 · 5.3k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍如何使用ECharts的饼图功能实现企业数量的可视化统计，包括自定义样式、鼠标悬停交互效果及代码实现细节。

需求描述

需求要求利用echarts的饼图对企业数量进行统计，要求默认饼图中间显示全部企业数量，鼠标移动上去，则显示对应部分的企业数量，并且设置样式。

效果图
在这里插入图片描述

具体代码

let TrendCharts = this.$echarts.init(
        document.getElementById("trendChart1")
      );

  var options = {
   
   
    //设置主副标题
    title: {
   
   
      show: true,
      text: "企业数量", //主标题
      subtext: this.totalNum, //副标题：企业数量值，此处用标题方式来显示
      left: "center",
      top: "40%", 
      z: 0,
      zlevel: 100,
      textStyle: {
   
    //设置主标题的 样式
        textAlign: "center",
        color: "rgba(145,213,255,0.85)",
        fontSize: 14
      },
      subtextStyle: {
   
    //设置副标题的样式
        textAlign: "center",
        color: "#fff",
        fontSize: 30,
        fontWeight: 600
      }
    },

    tooltip: {
   
   
      show: