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.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...
随机推荐
- 火山引擎 DataTester：如何做 A/B 实验的假设检验
A/B 实验的核心统计学理论是(双样本)假设检验,是用来判断样本与样本.样本与总体的差异是由 抽样误差 引起还是 本质差别 造成的一种统计推断方法. 假设检验,顾名思义,是一种对自己做出的假设进行数据 ...
- 【flask】flask请求上下文分析 threading.local对象 偏函数 flask1.1.4生命执行流程 wtforms
目录 上节回顾 今日内容 1 请求上下文分析(源码:request原理) 1.1 导出项目的依赖 1.2 函数和方法 1.3 threading.local对象 1.4 偏函数 1.5 flask 整 ...
- HDU - 1711：Number Sequence （KMP模板）
原题链接 KMP模板:AC,858ms,13112KB内存 消耗太大了 #include<bits/stdc++.h> using namespace std; using namespa ...
- BZOJ 2038: [2009国家集训队]小Z的袜子【莫队算法裸题】
作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿. 终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命. 具体来说,小Z把这N只袜子从1到N编号,然后从 ...
- 2023陕西省大学生信息安全竞赛web writeup
前言 早写好了,忘发了,题目质量还行,够我坐大牢 ezpop 简单的反序列化,exp如下 <?php class night { public $night; } class day { pub ...
- 12、SpringBoot-mybatis-plus-ehcache
系列导航 springBoot项目打jar包 1.springboot工程新建(单模块) 2.springboot创建多模块工程 3.springboot连接数据库 4.SpringBoot连接数据库 ...
- Redhat5 和Redhat6安装oracle11g
oralce安装本人认为最麻烦的就是oracle包的版本和oracle的依赖的包的问题,这个做不好后期安装过程就会出现很多诡异的问题,这里总结一下Redhat5 和Redhat6安装oracle11g ...
- 最简单的http文件服务器
概述 需求来了,部署一个简单方便的文件服务器,可以查看.下载文件,不需要鉴权,越简单越好. 环境 centos:CentOS release 7.0 (Final)或以上版本 httpd:2.4.6 ...
- 机器学习-无监督机器学习-kmeans衍生的算法-18
目录 1. k-Medoids 2. 二分KMEANS 3. KMeans++ 4. elkan KMeans 5. min batch KMeans算法 6.小结: 1. k-Medoids 之前的 ...
- 使用 nacos 搭建注册中心及配置中心
本文为博主原创,转载请注明出处: 在分布式微服务框架中,现在都流行使用 nacos 作为分布式框架的注册中心与配置中心.当我们搭建一套spring boot 框架的时候,默认会将配置文件 放在 res ...