数据可视化----ECharts---饼图（六）

数据可视化----ECharts—饼图（六）

百度百科——饼图

Echarts系列文章

标题	地址
Echarts初体验	传送门
Echarts通用配置	传送门
柱状图	传送门
折线图	传送门
散点图	传送门
Echarts官网	传送门

饼图的基本实现

实现步骤

一. 搭建ECharts最基本的代码结构（这是实现任何一张图表都必须的第一步）

引入js文件（这个js文件可以去官网下载下来）
准备一个DOM容器
初始化一个echarts对象
设置配置项option
上面的具体操作可以去看下

二. 准备数据：

该组数据最外层是一个数组
数组的每一项元素都是一个对象
每个对象都包含有name和value这两个属性
例如：[{name:'早餐’,value:‘10’},{name:'午餐’,value:‘30’}]

三. 图表类型：

将配置项中的series下的type设置为pie

四. 代码实现：

<!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>饼状图的基本实现</title><script src="./lib/echarts.min.js"></script>
</head>
<body><div id="app" style="width: 600px;height: 400px;"></div><script>// 1.Echarts 基本结构的创建// 引入js文件---创建容器---初始化对象---配置配置项---// 2.准备数据[{name;???, value:???},{}]// 运动与健康：1100，餐饮：2800，外出与旅行：4500，衣物：2202，电子游戏：2421，医药：800// 3.将type设置为pievar myCharts = echarts.init(document.querySelector('#app'))// 需要设置给饼图的数据var pieData = [{name: '运动与健康',value: '1100'},{name: '餐饮',value: '2800'},{name: '外出与旅行',value: '4500'},{name: '衣物',value: '2202'},{name: '电子游戏',value: '2421'},{name: '医药',value: '800'}]var option = {// 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了series: [{type: 'pie',data: pieData}]}myCharts.setOption(option)</script>
</body>
</html>

饼状图的基本实现

效果图如下：

饼图的常见效果配置

一. 文字的显示（注意这段配置不是饼图所特有的，在柱状图，折线图，地图等图表中也可以使用），我们只需要在series下添加如下配置：

label: {//饼图文字的显示show: true, //默认  显示文字formatter: function (arg) {console.log(arg);return arg.name + ' 消费 ' + arg.value + " 元" +'\n'+ arg.percent + "%"}
}

在series中添加了这段配置之后，效果图：

有关formatter，在这里做一下补充：
formatter：用来格式化图例文本，支持普通字符串、字符串模板和回调函数等形式。
示例：

// 使用普通字符串
formatter: 'Legend'
// 使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {return 'Legend ' + name;
}

二. 半径以及圆环效果：

设置饼图半径，需要在series下加一个配置项radius，他的值可以是

准确的数字（单位：px
百分比（这里相对的是DOM容器宽高中小的那一个的一半来计算的）
数组（设置两个半径就可以实现圆环的效果）

// 在600x400的DOM容器中下面两个配置的图标大小是相同的
radius: 40 //饼图的半径
radius: '20%' //百分比参照的事宽度和高度中较小的那一部分的一半来进行百分比设置

圆环效果

//圆环
radius: ['50%','80%']

效果图：

三. 南丁格尔图：

百度百科–南丁格尔玫瑰图：南丁格尔图的主要效果就是我们根据不同的区域相对应的value值的不同，我们的饼图半径展示也会不同
想实现南丁格尔图只需要在series下添加这行代码：roseType: ‘radius’

看看效果图：

四. 选中的效果：

// selectedMode: 'single' //选中的效果，能够将选中的区域偏离圆点一小段距离
selectedMode: 'multiple',
selectedOffset: 30

下面的效果图是将selectedMode设置成multiple的，感兴趣的可以试试single，还可以改一下selectedOffset值，看一看什么效果

效果图：

最后，老规矩，完整的代码奉上

<!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>饼状图的基本实现</title><script src="./lib/echarts.min.js"></script>
</head>
<body><div id="app" style="width: 600px;height: 400px;"></div><script>// 1.Echarts 基本结构的创建// 引入js文件---创建容器---初始化对象---配置配置项---// 2.准备数据[{name;???, value:???},{}]// 运动与健康：1100，餐饮：2800，外出与旅行：4500，衣物：2202，电子游戏：2421，医药：800// 3.将type设置为pievar myCharts = echarts.init(document.querySelector('#app'))// 需要设置给饼图的数据var pieData = [{name: '运动与健康',value: '1100'},{name: '餐饮',value: '2800'},{name: '外出与旅行',value: '4500'},{name: '衣物',value: '2202'},{name: '电子游戏',value: '2421'},{name: '医药',value: '800'}]var option = {// 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了series: [{type: 'pie', // 类型： 饼图data: pieData,//数据label: {//饼图文字的显示show: true, //默认  显示文字formatter: function (arg) {console.log(arg);return arg.name + ' 消费 ' + arg.value + " 元" +'\n'+ arg.percent + "%"}},// radius: 20 //饼图的半径// radius: '20%' //百分比参照的事宽度和高度中较小的那一部分的一半来进行百分比设置// 圆环// radius: ['50%','80%']// 南丁格尔图  饼图的每一个部分的半径是不同的// roseType: 'radius',// selectedMode: 'single' //选中的效果，能够将选中的区域偏离圆点一小段距离selectedMode: 'multiple',selectedOffset: 30}]}myCharts.setOption(option)</script>
</body>
</html>

数据可视化----ECharts---饼图（六）相关推荐

Echarts数据可视化series-pie饼图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...
Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
数据可视化ECharts的七大常用图表，看完就会用(1)
本文的后半部分:数据可视化ECharts的常用图表,看完就会用(2) 文章目录数据可视化什么是数据可视化? 数据可视化的好处数据可视化的实现方式 ECharts ECharts的特性一个ECh ...
Django博客来访人员地域分布大数据可视化---echarts绘图、geoip2获取地理位置
文章目录 Django博客来访人员地域分布大数据可视化---echarts绘图.geoip2获取地理位置效果 echarts作图 geoip2获取地理位置 api接口开发 ajax前后端动态交互 D ...
数据可视化——echarts
目录一.可视化面板介绍二.可视化库介绍三.Echarts-体验 1.引入echarts 插件文件到html页面中 2.准备一个具备大小的DOM容器 3.初始化echarts实例对象 4.指定配置 ...
数据可视化echarts学习笔记
文章目录 echarts 使用渐变色一些配置项 dataset与transform数据过滤 dataset transform 动态排序时间轴更新数据极坐标系 echarts 官网https: ...
数据可视化Echarts学习指南
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. 01-使用技术完成该项目 ...
Vue中使用数据可视化Echarts图表展示
目录 Echarts--商业级数据图表 Echarts支持的图表 Echarts的使用方法 Echarts--商业级数据图表商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览 ...
数据可视化ECharts:ECharts使用
Echarts-介绍常见的数据可视化库: - D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) - ECharts.js 百度出品的一个开源 Javasc ...