【教程】ECharts饼图记录

确实蛮好用的，文档也非常详细和人性化。

记录一次简单的使用。

饼图：Examples - Apache ECharts

文档：Documentation - Apache ECharts

效果：

代码：

option = {title: {text: 'Total',subtext: '1096.109',x: 'center',y: 'center',top: '350',textStyle: {fontSize: '30',color: 'black',fontFamily: 'Times New Roman'},// 副标题样式subtextStyle: {fontSize: '28',// fontWeight: '800',color: 'black',fontFamily: 'Times New Roman'}},tooltip: {trigger: 'item'},legend: {top: '10%',left: 'center',textStyle: {fontSize: '22',fontFamily: 'Times New Roman'},},series: [{name: 'Access From',type: 'pie',radius: ['25%', '55%'],// avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},// label: {//   show: true,//   position: 'center'// },// emphasis: {//   label: {//     show: true,//     fontSize: 40,//     fontWeight: 'bold'//   }// },label:{formatter(ar){return ar.name+'('+ar.value+')'},fontSize: '28',fontFamily: 'Times New Roman'},data: [{ value: 0.001, name: 'NMS' },{ value: 0.005, name: 'NMS2' },{ value: 7.318, name: 'NMS3' },{ value: 59.418, name: 'NMS4' },{ value: 77.644, name: 'NMS5' },{ value: 83.511, name: 'NMS6' },{ value: 147.221, name: 'NMS7' },{ value: 340.984, name: 'NMS8' },{ value: 380.013, name: 'NMS9' },],}]
};

【教程】ECharts饼图记录相关推荐

java word 饼图_[Java教程]echarts标准饼图解读(一)——基本配置demo
[Java教程]echarts标准饼图解读(一)--基本配置demo 0 2016-11-21 17:00:18 echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title) ...
ECharts 饼图数据放在饼图内部显示
1.业务需求将数据显示在饼图内部,格式化百分比显示,鼠标放上去显示具体名称和数值原样式如下 2.业务实现调整代码如下,核心语句已标记注释 option = {title: {text: 'Ref ...
ECharts 饼图切换数据源bug 开始没数据显示切换或刷新后显示
1.出现问题原因一个饼图,右上方两个按钮分别为今天和本月,分别调用不同接口控制,点击则调用不同接口同时饼图绑定数据源刷新:出现此问题原因点击今日按钮有一个饼图区域形没有数据不显示,对应数据值比例都没 ...
使用Echarts饼图时将图例图标变成圆形
使用Echarts饼图时将图例图标变成圆形在echarts官方实例里,图例都是方形,今天碰到需求,需要是圆形图标,在此记录一下直接在legend中设置 icon:'circle' legend: ...
Echarts饼图之数据展示
Echarts饼图之数据展示 1.组件简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,C ...
echarts饼图指示器文字颜色设置不同
学习记录,平时开发时遇到过的问题 echarts饼图label文字颜色
Echarts学习记录——如何去掉网格线及网格区域颜色
关键属性 splitLine和splitArea,可以设置相关的属性示例代码 <!DOCTYPE html> <html lang="en"> <h ...
echart饼图标签重叠_怎么让ECharts饼图的label标签不重叠?
1.怎么让ECharts饼图的label标签不重叠? 使用ECharts饼图,如果有的项目占比很小,饼图所占空间也比较小的时候,会出现label标签重叠.标签被截断的情况(图1). 可以通过设置rad ...
echarts java动态数据_[ASP.net教程]ECharts Java 动态加载数据，echartsjava
[ASP.net教程]ECharts Java 动态加载数据,echartsjava 0 2015-12-18 00:00:05 1.前台jsp页面html PUBLIC "-//W3C// ...

【教程】ECharts饼图记录

【教程】ECharts饼图记录相关推荐

最新文章

热门文章