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.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...
随机推荐
- 教你从零搭建Web漏洞靶场OWASP Benchmark
摘要:Owasp benchmark 旨在评估安全测试工具的能力(准确率.覆盖度.扫描速度等等),量化安全测试工具的扫描能力,从而更好得比较各个安全工具优缺点. 本文分享自华为云社区<Web漏洞 ...
- 火山引擎 DataTester：一个 A/B 测试，将一款游戏的核心收益提升了 8%
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 随着社会节奏及生活方式的改变,休闲游戏在移动游戏市场的占比逐渐升高,据伽马数据发布的<2022 年休闲游戏发 ...
- 高性能 Jsonpath 框架，Snack3 v3.2.44 发布
Snack3,一个高性能的 JsonPath 框架 借鉴了 Javascript 所有变量由 var 申明,及 Xml dom 一切都是 Node 的设计.其下一切数据都以ONode表示,ONode也 ...
- AI Studio 基本操作
https://aistudio.baidu.com/aistudio/projectdetail/6182202 项目启停 执行和调试 添加代码或文件 运行代码 %cd /home/aistudio ...
- STM32CubeMX教程15 ADC - 多重ADC转换
1.准备材料 开发板(正点原子stm32f407探索者开发板V2.4) STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) ST-LINK ...
- AtCoder Regular Contest 119 (ABC题)
比赛链接:Here A - 119 × 2^23 + 1 注意到 \(2^{60} > 10^{18}\) ,所以我们可以直接枚举 \(0\) ~ \(59\) int main() { ci ...
- 蓝桥杯历年省赛试题汇总 C/C++ A组
A组 省赛 B 组的题目可以在这里查看 → 刷题笔记: 蓝桥杯 题目提交网站:Here 2013 第四届 高斯日记 排它平方数 振兴中华 颠倒的价牌 前缀判断 逆波兰表达式 错误票据 买不到的数目 剪 ...
- springBoot项目打jar包
系列导航 springBoot项目打jar包 1.springboot工程新建(单模块) 2.springboot创建多模块工程 3.springboot连接数据库 4.SpringBoot连接数据库 ...
- lucene.net全文检索（一）相关概念及示例
相关概念 站内搜索 站内搜索通俗来讲是一个网站或商城的"大门口",一般在形式上包括两个要件:搜索入口和搜索结果页面,但在其后台架构上是比较复杂的,其核心要件包括:中文分词技术.页面 ...
- HTTP 及 http 请求解析过程
本文为博主原创,未经允许不得转载: HTTP 全称为:超文本传输协议(HyperText Transfer Protocol,HTTP),一种无状态的,以请求/应答方式运行的协议, 它使用可扩展的语义 ...