ECharts 饼图绘制教程
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。ECharts 遵循 Apache-2.0 开源协议,免费商用。 |
饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目。因为不在直角坐标系上,所以也不需要 xAxis,yAxis。
实例
myChart.setOption({series : [{name: '访问来源',type: 'pie', // 设置图表类型为饼图radius: '55%', // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。data:[ // 数据数组,name 为数据项名称,value 为数据项值{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]}] })
尝试一下 »
我们也可以通过设置参数 roseType: 'angle' 把饼图显示成南丁格尔图。
实例
option = {series : [{name: '访问来源',type: 'pie',radius: '55%',roseType: 'angle',data:[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]}] };
尝试一下 »
阴影的配置
itemStyle 参数可以设置诸如阴影、透明度、颜色、边框颜色、边框宽度等:
实例
option = {series : [{name: '访问来源',type: 'pie',radius: '55%',data:[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}],roseType: 'angle',itemStyle: {normal: {shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}] };
尝试一下 »
ECharts 饼图绘制教程相关推荐
- ECharts 饼图切换数据源bug 开始没数据显示 切换或刷新后显示
1.出现问题原因 一个饼图,右上方两个按钮分别为今天和本月,分别调用不同接口控制,点击则调用不同接口同时饼图绑定数据源刷新:出现此问题原因点击今日按钮有一个饼图区域形没有数据不显示,对应数据值比例都没 ...
- echarts图表入门级教程(An introductory chart tutorial)
2022.10.12本人第一次使用echarts,接下来就让我和大家一起介绍echarts的用法. I am using echarts for the first time, so let me i ...
- vue+echarts+json绘制地图“绝对干货”
vue+echarts+json绘制地图"绝对干货" 不多说,直接干 该样式实现及其简单 跟着我做就好了 vue没安装的 回去看基础吧 echarts没安装的 npm instal ...
- Echarts饼图之数据展示
Echarts饼图之数据展示 1.组件简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,C ...
- 程序练习:Matlab 饼图绘制
Matalb小练习 练习饼图绘制,目标是画出一个饼图 可以展示三个产品市场份额的饼图 代码如下 function week13 %%饼图 h0=figure('toolbar','none','pos ...
- html一个页面同时加载多个饼图,Html5饼图绘制实现统计图的方法
Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图(统计图)的方法.先看一下饼图效果: 这个图是动态生成的,根据传入的比例参数( ...
- echart饼图标签重叠_怎么让ECharts饼图的label标签不重叠?
1.怎么让ECharts饼图的label标签不重叠? 使用ECharts饼图,如果有的项目占比很小,饼图所占空间也比较小的时候,会出现label标签重叠.标签被截断的情况(图1). 可以通过设置rad ...
- echarts饼图直观显示数值最实用的方式
默认:echarts饼图直接显示数值(如图 无需光标悬空触发) var optionOne = { title : { text ...
- echarts饼图自动显示数据
在做echarts饼图的时候,默认是不显示数据,现在要直接把数据显示在上面,代码如下: series: [{name: '处理状态',type: 'pie',radius: ['50%', '70%' ...
最新文章
- 居然还能这样——程序员加薪的新方法
- 使用Bootstrap后,关于IE与Chrome显示字体的问题
- Java 面试 1 小时,我看出了和月薪 3w 的差距
- Sweet Home 3D 是Web三维效果图
- pdfdom将pdf转成html,使用pdfdom将pdf转为html(示例代码)
- 前景检测算法(五)--GMM,GMM2,GMG
- Raki的读paper小记:An Effective Transition-based Model for Discontinuous NER
- 不用for循环快速合并txt文本文件
- boder sizing:boder-box的使用意义
- 影驰悍将120SSD盘只认20M,有时能认,有时认不到的修复
- MonthCalendar显示该年的12个月份
- 1051 电报加密
- 全球与中国二手服装市场现状及未来发展趋势
- python 加速下载
- 制作VOC格式数据集的train.txt、val.txt文件
- python excel 特定单元格加背景颜色 wlxt rlxt
- 服务器怎么删除游戏文件夹在哪里找,手机文件管理在哪里应该怎么清理(怎么删除手机没用的文件)...
- Echarts实现中国地图多级钻取-可实现四级
- 网络安全培训入门之0基础学网络安全要学哪些内容?
- DIY远程空调遥控(考研已断更)