echarts定义饼状图的指向线内容
定义饼状图的指向线内容
<!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定义饼状图的指向线内容的更多相关文章
- vue中使用echarts画饼状图
echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EC ...
- echarts中饼状图数据太多进行翻页
echarts饼状图数据太多 echarts 饼状图内容太多怎么处理 有些时候,我们饼状图中echarts的数据可能会很多. 这个时候展示肯定会密密麻麻的.导致显示很凌乱 我们需要'翻页'类似表格展示 ...
- Echarts生成饼状图、条形图以及线形图 JS封装
1.在我们开发程序中,经常会用到生成一些报表,比方说饼状图,条形图,折线图等.不多说了,直接上封装好的代码,如下Echarts.js所示 以下代码是封装在Echarts.js文件中 /** * Cre ...
- echarts pie饼状图绑定点击事件
var valueData = [ {value: 33,name: '诊所'}, {value: 29,name: '汽车服务相关'}, {value: 27, name: '洗衣店'}, {val ...
- echart中饼状图的高亮显示。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- Echarts动态加载饼状图实例（二）
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div class="ui-contai ...
- Echarts动态加载饼状图的实例
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...
- ECharts学习（2）--饼状图之南丁格尔图
1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...
随机推荐
- Spark 开源新特性：Catalyst 优化流程裁剪
摘要:为了解决过多依赖 Hive 的问题, SparkSQL 使用了一个新的 SQL 优化器替代 Hive 中的优化器, 这个优化器就是 Catalyst. 本文分享自华为云社区<Spark 开 ...
- CANN 5.0硬核技术抢先看
摘要:2021年12月,CANN5.0版本也将与大家正式见面,通过软硬件协同优化,该版本将会实现训练性能再翻倍,凭实力展现AI领域的「中国速度」! 本文分享自华为云社区<CANN 5.0硬核技术 ...
- DarkMode(5)：深色模式不同实现方案切换
sass自定义函数转 sass预处理 在<DarkMode(2):深色模式解决方案--css颜色变量实现Dark Mode>与<DarkMode(3):深色模式解决方案--颜色反转与 ...
- 听说火山引擎推出的 DataLeap，已经可以支持万级表的数据血缘图谱了！
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 数据来源广.量级大.场景多,导致数据之间关系变得异常复杂. 经过读取.清洗.存储.计算等一系列流程之后,数据最终汇 ...
- PPT 常规设置
高级设置 可以将撤销次数调大,最多 150次 默认拉到PPT中的图片是被压缩的,可以设置成不压缩(解压 PPT 可查看里面的图片大小) 字体嵌入 可将自动保存时间调短,默认保存目录我习惯先保存到桌面( ...
- Nacos 1.2.1 集群搭建(三） Nginx 配置 集群
配置 Nginx 可以把.conf 文件拉到本地,配置好再传上去 #gzip on; upstream cluster{ server 192.168.0.113:8848; server 192.1 ...
- 如临现场的视觉感染力，NBA决赛直播还能这样看？
在6月16日结束的NBA总决赛中,勇士4-2击败凯尔特人,问鼎总冠军!今年的NBA总决赛吸引了众多关注,互联网各大平台的赛事直播气氛也异常热烈. 平台如何既能展现专业的赛事解说,又能与球迷观众深入互动 ...
- Leaflet 地图偏移 地图纠偏
(地图瓦片纠偏最好的方法在这:https://www.cnblogs.com/s0611163/p/15606460.html) 地图区域是一个市,偏移量可以近似认为是固定不变的,通过修改Leafle ...
- （组合游戏）SG函数与SG定理详解
有一段时间没记录知识类的博客了,这篇博客就说一下SG函数和SG定理吧 SG函数是用于解决博弈论中公平组合游戏(Impartial Combinatorial Games,ICG)问题的一种方法. 什么 ...
- 成都站｜阿里云 Serverless 技术实战营邀你来玩！
活动简介 "Serverless 技术实战与创新沙龙 " 是一场以 Serverless 为主题的开发者活动,活动受众以关注Serverless 技术的开发者.企业决策人.云原生领 ...