定义饼状图的指向线内容

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

</head>

<body>

  <div style="width: 600px;height: 400px"></div>

  <script>

      var mCharts = echarts.init(document.querySelector('div'))

      var pieData = [

        {

          name: '淘宝',

          value: 11231

        },

        {

          name: '京东',

          value: 22673

        },

        {

          name: '唯品会',

          value: 6123

        },

        {

          name: '聚美优品',

          value: 6700

        }

      ]

      var option = {

        series: [

          {

            type: 'pie',

            data: pieData,

            label: {

              show: true,

              formatter: function(arg) {

                return arg.name + arg.value + '元\n' + arg.percent + '%'

              }

            },

            //第一个代表内圆半径，第二个代表外圆半径

            radius: ['50%', '70%']

          }

        ]

      }

      mCharts.setOption(option)

  </script>

</body>

</html>

echarts定义饼状图的指向线内容的更多相关文章

  1. vue中使用echarts画饼状图

    echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EC ...

  2. echarts中饼状图数据太多进行翻页

    echarts饼状图数据太多 echarts 饼状图内容太多怎么处理 有些时候,我们饼状图中echarts的数据可能会很多. 这个时候展示肯定会密密麻麻的.导致显示很凌乱 我们需要'翻页'类似表格展示 ...

  3. Echarts生成饼状图、条形图以及线形图 JS封装

    1.在我们开发程序中,经常会用到生成一些报表,比方说饼状图,条形图,折线图等.不多说了,直接上封装好的代码,如下Echarts.js所示 以下代码是封装在Echarts.js文件中 /** * Cre ...

  4. echarts pie饼状图绑定点击事件

    var valueData = [ {value: 33,name: '诊所'}, {value: 29,name: '汽车服务相关'}, {value: 27, name: '洗衣店'}, {val ...

  5. echart中饼状图的高亮显示。

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  7. Echarts动态加载饼状图实例（二）

    一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div class="ui-contai ...

  8. Echarts动态加载饼状图的实例

    一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...

  9. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  10. ECharts学习（2）--饼状图之南丁格尔图

    1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...

随机推荐

  1. ​五大不良 coding 习惯，你占了几样？

    在之前的文章中,我们一起解读了2021年数据成本报告.根据 IBM 和 Ponemon Institute 2021年的报告,全球平均数据泄露成本约为424万美元.为了降低数据泄露造成的成本,企业可以 ...

  2. SBOM落地的关键一步——漏洞可利用性交流（VEX）

    SolarWinds 网络安全事件的影响,加上 Log4j 漏洞对众多知名企业产生难以估量的后果,使软件供应链安全成为安全领域的热门话题,并且SBOM现在成为网络安全漏洞计划的一个重要组成部分. SB ...

  3. OpenFeign 各种用法、 logger 日志记录

    <spring-cloud-openfeign.version>2.2.6.RELEASE</spring-cloud-openfeign.version>对应的SpringB ...

  4. ChatGPT插件权限给Plus用户放开了

    大家好,我是章北海mlpy ChatGPT插件权限给Plus用户放开了 我稍微测试了俩,感觉还行,后续我会对一些热门插件深入测测,敬请期待. 官方对插件的介绍如下: 1.插件由非由OpenAI控制的第 ...

  5. MP4 视频“只闻其声，不见其人”，是怎么回事呢？

    艾瑞巴蒂大家好,我二狗子又来啦!这段时间关于疫情的好消息不断,各个地区的疫情都得到了有效的控制,做到了新增病例个位数增长甚至连续多天零增长!这不,二狗子也终于可以出村回到大城市上班啦!由于要坐很久的火 ...

  6. OS | 文件系统总结

    文件系统总结 逻辑文件面向用户,学习时应该掌握不同的逻辑文件之间的特点 目录文件时链接逻辑文件和物理文件的桥梁,学习时应该体会到目录文件时如何优化访问时间 物理文件是指文件的数据如何存储在磁盘等存储设 ...

  7. JSP | IDEA 配置 JSP 模板

    新建 jsp 文件时的模板 在第 5 步输入下面模板代码: <%-- Created by IntelliJ IDEA. User: ${USER} Date: ${DATE} Time: ${ ...

  8. 供应链安全情报 | cURL最新远程堆溢出漏洞复现与修复建议

    漏洞概述 cURL 是一个支持多种网络协议的开源项目,被广泛集成到自动化构建.网络测试.网络数据采集以及其他网络相关的任务中,备受开发者和系统管理员青睐. cURL在2023年10月11日下午紧急发布 ...

  9. 【驱动】串口驱动分析（三）-serial driver

    简介 前两节我们介绍串口驱动的框架和tty core部分.这节我们介绍和硬件紧密相关的串口驱动部分. UART驱动部分依赖于硬件平台,而TTY驱动和具体的平台无关.虽然UART部分依赖于平台,但是不管 ...

  10. 配置项目按eslint规范格式化代码

    配置项⽬按eslint规范格式化代码 vscode下载 ESlint,Prettier,Vetur 插件 打开vscode的设置 添加如图配置(window系统,mac系统配置稍有不同) 可⾃定义es ...