饼图（用ECharts绘制）

常见效果

显示数值 label.formatter

圆环设置两个半径radius:[50%, 70%] (百分比参照的是容器宽度和高度中较小的那一个的一半)

<!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="lib/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>

南丁格尔图 roseType:'radius'

//其它代码和上面一样
var option = {series: [{type: 'pie',data: pieData,label: {show: true,formatter: function(arg) {return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'}},roseType:'radius',}]}

选中效果

选中模式 selectedMode: single(点中某一块可偏移，但只能实现偏移一块)

selectedMode: multiple（可偏移多块）

选中偏移量 selectedOffset: 30

//其它代码和上面一样
var option = {series: [{type: 'pie',data: pieData,label: {show: true,formatter: function(arg) {return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'}},selectedMode: 'multiple',    //'single'selectedOffset: 30,}]}

饼图（用ECharts绘制）相关推荐

ECharts绘制饼图
ECharts绘制各种图表非常方便,首先去官网找到想要绘制的图表做参考 ,以下链接时官网示例 Examples - Apache EChartsECharts, a powerful, interac ...
技术图文：如何利用C# + Echarts 绘制「堆叠条形图」？
背景前几天,我们介绍了如何利用C# + Echarts 绘制 Bar Simple?,原以为把 Echarts 封装到这种程度就可以完成当前任务了. 可是,把软件原型提交给对方时,发现对方更希望& ...
用Vue和ECharts绘制问卷统计结果
用Vue和ECharts绘制问卷统计结果问卷设置了单选题.多选题以及文本题三中类型,分别使用了饼图.条形图.文本框来显示结果. 首先在html文件中,给div绑定一个"question-i ...
【H5】 echarts绘制条形统计图，饼状图
[H5] echarts绘制条形统计图表格需要引入echarts.js: https://echarts.baidu.com/dist/echarts.min.js 效果图如下: 引入结构: 实例化 ...
hdc mfc 画扇形图_使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图简单举例说明下echarts如何绘制条形图和扇形图代码示例 echarts绘制条形图和扇形图 var mychart1=echarts.init(documen ...
python画图代码彩虹-echarts绘制彩虹图
echarts绘制彩虹图 1.开发环境 vue+echarts 2.电脑系统 windows10专业版 3.在使用echarts开发的过程中,我们可能需要绘制彩虹图,下面是我进行的总结,希望对你有所帮 ...
Echarts绘制Tree树图的涟漪效果effectScatter
1. 问题描述 Echarts绘制图表是支持涟漪效果的,但是搜了材料,有地图.折线图.散点图等,不支持树图. 本文方法实现了一种可以任意Echarts图的涟漪效果 2. 效果展示将树图的一级节点全部 ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
Echarts — 绘制省级地图
版本:vue@3.0.5 + echarts@5.1.2 本文将介绍如何使用 echarts 绘制一个省级地图(以江西省为例) 一.安装 echarts npm i echarts --save-de ...
echarts绘制节点关系图
echarts绘制节点关系图 HTML代码 <!DOCTYPE html> <html><head><meta charset="UTF-8&quo ...

饼图（用ECharts绘制）

常见效果

饼图（用ECharts绘制）相关推荐

最新文章

热门文章