定义饼状图的指向线内容

<!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. webpack原理(2)：ES6 module在Webpack中如何Tree-shaking构建

    Tree-shaking 最早由打包工具 Rollup 提出 DCE 作用于模块内(webpack 的 DCE 通过 UglifyJS 完成),而 Tree-shaking 则是在打包的时候通过模块之 ...

  2. 使用appuploader工具发布证书和描述性文件教程

    使用APPuploader工具发布证书和描述性文件教程 之前用AppCan平台开发了一个应用,平台可以同时生成安卓版和苹果版,想着也把这应用上架到App Store试试,于是找同学借了个苹果开发者账号 ...

  3. 性能提升-如何设置Windows操作系统TIME_WAIT状态的TCP连接快速回收时间？

    大规模Windows环境下,采用Nginx反向代理服务后,操作系统会产生较多TIME_WAIT的TCP(Transmission Control Protocol)连接,操作系统默认TIME_WAIT ...

  4. Windows下的Linux子系统(WSL)

    什么是WSLWSL:Windows subsystem for Linux,是用于Windows上的Linux的子系统作用很简单,可以在Windows系统中获取Linux系统环境,并完全直连计算机硬件 ...

  5. 灵魂拷问std::enable_shared_from_this，揭秘实现原理

    参考博客: std::enable_shared_from_this原理浅析 引言 在C++编程中,使用智能指针是一种安全管理对象生命周期的方式.std::shared_ptr是一种允许多个指针共享对 ...

  6. 二、redis主从环境搭建

    系列导航 一.redis单例安装(linux) 二.redis主从环境搭建 三.redis集群搭建 四.redis增加密码验证 五.java操作redis 环境:centos7需要的安装包: redi ...

  7. P4913【橙】

    蕾姆了,上一道题做的好烦,结果直接把上一题的代码稍微改改就直接五分钟做出了另一道题,就是这道橙题.虽然只是一道橙题,但上一题代码得以复用显得自己没浪费那么多时间,显得自己还是有不少收获的.心里平摊多了 ...

  8. Redis 也支持全文搜索 了？这也太强了

    在 2021 年我就了解到 RediSearch 这个项目,并已经把它用于我的开源项目 newbee-mall-pro 中. 就我的使用体验来说,简单场景下,用来平替 Elasticsearch 的使 ...

  9. IDE暗黑主题推荐-Dracula

    作为程序员,我们一天中会花费大量时间在编码和阅读代码上.优秀的代码编辑器主题可以减轻眼睛的疲劳,提高工作效率.本文向大家推荐一款非常流行的 JetBrains IDE 主题插件 - Dracula.它 ...

  10. 关于编写C时的调试--VS，VSCODE，DEV-C++

    1.问题 VS最大的问题是不支持scanf函数,后面的调试部分我就没试了,主要用VS来写C++ VSCODE是服了他的C/C++插件,我死活卡在debug中scanf的输入部分,集成终端根本无法输入, ...