定义饼状图的指向线内容

<!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. 从java到JavaScript(2)：对比Java/Go/Swift/Rust看Dart

    Dart与Java的一些直观区别 Dart和java以及C#都差不多,基本上不用学习可以直接使用,从这里可以你可以了解Dart有些特别之处.其实对于Java开发人员来说Dart,还是相对好理解的 基本 ...

  2. 熔断、限流、降级 —— SpringCloud Alibaba Sentinel

    Sentinel 简介 Sentinel 是阿里中间件团队开源的,面向分布式服务架构的高可用流量防护组件,主要以流量为切入点,从限流.流量整形.熔断降级.系统负载保护.热点防护等多个维度来帮助开发者保 ...

  3. 【HZERO】安全体系

    安全体系 https://open.hand-china.com/community/detail/521336056218521600#前言前言open&doc-0

  4. #2102：A计划（DFS和BFS剪枝搜索）

    题意: 有几个比较坑的地方总结一下, 很容易误解: 遇到#就必须走 #不消耗时间 #对面如果也是#也不能走, 要不然无限循环了 最短路径剪枝时, 发现不能走的#是要把两步都标注为-1并跳出 题解: 一 ...

  5. 【每日一题】21.边的染色 （DFS连通图 + 思维）

    补题链接:Here 思维不够,看到这种陌生的题目无从下手. 这题应该做过一次的人会觉得它其实并不难. 主要思想:把边权->点权. 这样做的好处是,无论你怎么分配点权,在环内的异或值一定为 \(0 ...

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

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

  7. 为什么我要迁移SpringBoot到函数计算

    前言 为什么要迁移? 我们的业务有很多对外提供服务的 RESTful API,并且要执行很多不同的任务,例如同步连锁 ERP 中的商品信息到美团/饿了么等平台,在线开发票等.由于各种 API 和任务执 ...

  8. sprint-boot 存储图片的base64

    需求:将前端上传的图片转换成base64码发送到后端存储到数据库中(oracle或者mysql) 问题:当图片大小比较大(大概是超过1M)后端接收到的数据就会有错误. 解决方法:  sprint-bo ...

  9. sipp3.6带媒体测试方案

    概述 SIP压测工具sipp,免费,开源,功能足够强大,配置灵活,优点多. 本文档介绍sipp工具如何带媒体测试,并介绍如何制作可用的媒体文件(G729和PCMA). 环境 centos7.9 fre ...

  10. freeswitch配置SBC的方案

    概述 freeswitch 是一款好用的开源软交换平台. 但是,fs不是专为SBC而开发的,所以需要做一些定制化的配置和开发. 本文主要介绍如何利用fs的基本功能配置一个简单的SBC方案,满足一般化需 ...