ECharts 饼图数据放在饼图内部显示

简介: ECharts 饼图数据放在饼图内部显示

1、业务需求

将数据显示在饼图内部,格式化百分比显示,鼠标放上去显示具体名称和数值

原样式如下

image.gif

2、业务实现

调整代码如下,核心语句已标记注释

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [{
    name: 'Access From',
    type: 'pie',
    radius: '50%',
    data: [{
      value: 1048,
      name: 'Search Engine'
    },
    {
      value: 735,
      name: 'Direct'
    },
    {
      value: 580,
      name: 'Email'
    },
    {
      value: 484,
      name: 'Union Ads'
    },
    {
      value: 300,
      name: 'Video Ads'
    }],
    radius: '50%',
    center: ['50%', '50%'], // 这个属性可以调整图像的位置,左面所示为中心
    label: {
      normal: {
        show: true,
        position: 'inner', // 数值显示在内部
        formatter: '{d}%', // 格式化数值百分比输出
      },
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

image.gif

更改后效果如下图所示

image.gif

3)附录

ECharts 提示框组件Tooltip属性大全(包含文本注释)

以上就是ECharts 饼图数据放在饼图内部显示的介绍,做此记录,如有帮助,欢迎点赞关注收藏!

目录
相关文章
|
30天前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
127 1
|
2月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
131 23
echarts地图数据信息流向图效果
|
1月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
58 2
|
2月前
|
数据格式
ECharts 饼图
本章节我们将绘制饼图。
56 15
|
30天前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
371 0
|
1月前
|
XML 前端开发 数据库
echarts饼图前后端代码SpringCloud+Vue3
echarts饼图前后端代码SpringCloud+Vue3
32 0
|
3月前
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示
|
3月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
3月前
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
50 0
|
5月前
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts进行一周跑步数据分析,通过雷达图展示多维度指标(如距离、速度、时间),颜色对比体现个人与平均表现。折线图则清晰显示每日里程趋势,代码示例展示了自定义的`radar`和`line`图表配置。图表交互性强,支持点击高亮,动画流畅,提供完整代码资源。#ECharts #跑步数据 #数据可视化
147 3
ECharts综合案例一:近七天跑步数据