定义饼状图的指向线内容

<!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. CANN AICPU算子耗时分析及优化探索

    摘要:本文以GreaterEqual作为测试算子,该算子计算逻辑较为简单(output = input1 >= input2),旨在尽可能降低计算耗时,使得算子耗时尽可能以数据操作和算子调度作为 ...

  2. 从银行数字化转型来聊一聊，火山引擎 VeDI 旗下 ByteHouse 的应用场景

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,火山引擎凭借云原生数据分析平台 ByteHouse,成功入围行业媒体 Internet Deep(互联网周刊 ...

  3. PPT 动画入门

    元素动画 进入动画 元素从无到有的过程 退出动画 元素从有到无的过程 退出动画和进入动画,一对一 强调动画 在元素上变化的过程(如放大) 动作路径 3D动画 三维动画 低版本不支持 组合动画 切换动画 ...

  4. -bash: /home/advert/bin/vim: No such file or directory

    今天advert用户使用vim时,突然报错 -bash: /home/advert/bin/vim: No such file or directory 之前还好好的,且其他用户都能用vim,查看也是 ...

  5. shell 里使用 sed awk

    1 在shell脚本里使用sed 需把''改为"" 2 在shell脚本里使用awk 正则里使用 变量加上单引 awk -F: '/^'$user_name'/{print $1, ...

  6. javascript yield

    代码: function delay(time) { return new Promise(function (resolve, reject) { setTimeout(() => { res ...

  7. 网传的Spring大漏洞

    昨天凌晨发了篇关于Spring大漏洞的推文,白天就有不少小伙伴问文章怎么删了. 主要是因为收到朋友提醒说可能发这个会违规(原因可参考:阿里云因发现Log4j2核弹级漏洞但未及时上报,被工信部处罚),所 ...

  8. 【MFC】CListCtrl 如何设置单元格颜色？

    CListCtrl默认可设置的内容很少,如单元格颜色默认无法设置.若想设置单元格颜色,需要对CListCtrl进行拓展,已有老外为我们写好demo,这里对其中原理.设置方法进行一个解析. 其原理是:设 ...

  9. 小白学标准库之 log

    日常开发中,日志 log 几乎是必不可少.本文旨在介绍 log 的使用和内部实现等. 1. log 使用及实现 package main import ( "fmt" " ...

  10. RabbitMQ .net core 客户端 EasyNetQ 的使用

    依赖注入 var connectionConfiguration = new ConnectionConfiguration { Hosts = new List<HostConfigurati ...