定义饼状图的指向线内容

<!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. Karmada v1.2发布：开启全文本搜索新纪元

    摘要:Karmada v1.2 版本对调度器能力做了较大增强,初步提供了分布式搜索引擎支持,此外还借助聚合API提供了诸如 logs, watch等实用的命令行工具,资源解释器(Resource In ...

  2. 鲲鹏BoostKit虚拟化使能套件，让数据加密更安全

    摘要:借助华为鲲鹏BoostKit虚拟化使能套件(简称鲲鹏BoostKit虚拟化),可加速迈向云计算之旅.本次KAE加速引擎让数据加密更安全直播将介绍鲲鹏BoostKit加速库全景,基于BoostKi ...

  3. css过去及未来展望—分析css演进及排版布局的考量

    读初二的时候,学校有了计算机,也简单地介绍了下网页,不过那是的html 都是table,也没有去细看.到了高中,qq空间有个html模式,为了让文章好看点.也浅尝辄止地学了下css css简介 在HT ...

  4. Solon 问答：项目如何直接添加 https 支持？

    app.yml 添加两行配置即可: #设定SSL证书(支持:solon.boot.jdkhttp 或 solon.boot.jlhttp 或 solon.boot.jetty 或 solon.boot ...

  5. Kubernetes(K8S) helm 安装

    Helm 是一个 Kubernetes 的包管理工具, 就像 Linux 下的包管理器, 如 yum/apt 等, 可以很方便的将之前打包好的 yaml 文件部署到 kubernetes 上. Hel ...

  6. 微服务网关 —— SpringCloud Gateway

    Gateway 简介 Spring Cloud Gateway 基于 Spring 5.Spring Boot 2 和 Project Reactor 等技术,是在 Spring 生态系统之上构建的 ...

  7. 【数据库】E-R图向关系模型转换的规则

    E-R图向关系模型转换的规则: (1) 一个实体型转换为一个关系模式,实体的属性就是关系的属性,实体的码(关键字)就是关系的码. (2) 一个 1:1 联系可以转换为一个独立的关系模式,也可以与任意一 ...

  8. [VS Code] 入门-自定键盘快捷键

    Keyboard Shortcuts 自訂鍵盤快捷鍵 開啟設定面板 :點擊左下角管理圖示〉選擇「鍵盤快速鍵」. 編輯器開啟後,滑鼠移至變更項目上,點擊出現的變更圖示(橘框處),輸入要變更的快捷鍵組合. ...

  9. Codeforces Round #697 (Div. 3) A - G个人题解记录

    Codeforces Round #697 (Div. 3) 1475A. Odd Divisor 问一个数是否有奇除数. 对 2 不断除,如果最后 n == 1即不可能存在,否在存在. int ma ...

  10. 单线程 Redis 如此快的 4 个原因

    本文翻译自国外论坛 medium,原文地址:https://levelup.gitconnected.com/4-reasons-why-single-threaded-redis-is-so-fas ...