Apache Echarts常用图表之饼状图

您所在的位置：网站首页 › 如何用两种不同的方法动态绘制饼状图形图 › Apache Echarts常用图表之饼状图

Apache Echarts常用图表之饼状图

2023-07-26 21:26| 来源: 网络整理| 查看: 265

文章目录 Echarts常用图表饼图1. 饼图的实现步骤2. 饼图的常见效果

Echarts常用图表

在这里插入图片描述每个图表均配有对应的源代码以及知识点~~~~ 详情可点开对应的图表学习！各类常用图表总结在此！配合使用更方便~ https://blog.csdn.net/diviner_s/article/details/116072584 官方对应文件工具，有更详细的工具使用方法： https://echarts.apache.org/zh/option.html

饼图

饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。

1. 饼图的实现步骤

1.先上Echarts经典基本代码框架~~

var mCharts = echarts.init(document.querySelector("div")) var option = {} mCharts.setOption(option)

此时option对象是空的。

2.准备数据：

var pieData = [ { value:11231, name:"淘宝", }, { value:22673, name:"京东", }, { value:6123, name:"唯品会", }, { value:8981, name:"1号店", }, { value:6700, name:"聚美优品", }, ] 准备配置项在series下设置type:pie var option = { series:[ { type: 'pie', //类型为饼图 data: pieData } ] }

最终效果图如下：在这里插入图片描述

var mCharts = echarts.init(document.querySelector("div")) var pieData = [ { value:11231, name: '淘宝' }, { name: '京东', value: 22673 }, { name: '唯品会', value: 6123 }, { name: '1号店', value: 8989 }, { name: '聚美优品', value: 6700 } ] var option = { series:[ { type:'pie', data:pieData } ] } mCharts.setOption(option)

注意：

饼图的数据是由name和value组成的字典所形成的数组饼图无需配置xAxis和yAxis 2. 饼图的常见效果

显示数值

label.show：显示文字

label.formatter：格式化文字

var option = { series:[ { type:'pie', data:pieData, label:{ show:true, formatter:function(arg){ return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%' } } } ] }

在这里插入图片描述

南丁格尔图南丁格尔图指的是每一个扇形的半径随之额数据的大小而不同，数值占比越大，扇形的半径就越大

roseType 是否展示成南丁格尔图，通过半径区分数据大小，可选择两种模式：radius/area radius扇区圆心角展现数据的百分比，半径展现数据的大小。area所有扇区圆心角相同，仅通过半径展现数据大小。 var option = { series:[ { type:'pie', data:pieData, label:{ show:true, formatter:function(arg){ return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%' } }, roseType:'radius' } ] }

在这里插入图片描述选中效果

selectedMode:'multiple' 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，分别表示单选还是多选。

selectedoffset:30 选中扇区的偏移距离

var option = { series:[ { type:'pie', data:pieData, selectedMode:'multiple', selectedOffset:50 } ] }

在这里插入图片描述

圆环

radius 饼图的半径。可以为如下类型： number ：直接指定外半径值。 string ：例如，'20%' ，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。 Array：数组的第一项是内半径，第二项是外半径, 通过 Array, 可以将饼图设置为圆环图

var option = { series:[ { type:'pie', data:pieData, radius:['25%','50%'] } ] }

在这里插入图片描述

声明：学习内容来自黑马程序员，为学习笔记。仅供学习交流。

【本文地址】

Apache Echarts常用图表之饼状图

Apache Echarts常用图表之饼状图

今日新闻

推荐新闻