echart 圆饼图显示单位_ajax请求echarts圆饼图动态显示数据方法

旧城等待， 2022-12-31 08:29 227阅读 0赞

在最近项目中有个需求是统计出所有文件占比并用圆饼图展示。后台提供接口返回数据是这样的：![Image 1][]

返回的简单粗暴，key和value直接这样返回，前端接收。

在绘制饼状图时需要把这些数据动态加载出来。首先cdn引入echarts。

//饼状图数据

var myChart = echarts.init(document.getElementById('ring'));

$.ajax(\{

url:'spaceComFile',

type:'post',

dataType:'json',

success:function(data)\{

console.log(data);

var option = \{

tooltip : \{

trigger : 'item',

// formatter : "\{a\}  
\{b\} : \{c\} (\{d\}%)"//默认是这种方式显示，也可以自定义

formatter: function(params) \{

var res =params.seriesName+'  
'+params.name+':';

var num=parseInt(params.value / 1024);

var val=Number(num/1024).toFixed(2);

res+=val+'M'+'&nbsp'+params.percent+'%';

return res;

\}

\},

legend: \{

orient: 'vertical',

left: '0', //图例距离左

y: 'center', //图例上下居中

formatter: function (params) \{

/\* for (var i = 0; i < option.series\[0\].data.length; i++) \{

if (option.series\[0\].data\[i\].name == params) \{

return params +":"+ option.series\[0\].data\[i\].value+"M";

\}

\}\*/这种方法适用于有属性命名的数据

for(var key in data.result)\{

var num=parseInt(data.result\[key\]/ 1024);

var val=Number(num/1024).toFixed(2);

if (key== params) \{

return params +":"+val+"M";

\}

\}

\},

data:(function()\{

var res=\[\];

for(var key in data.result)\{

res.push(\{

name:key

\})

\}

return res;

\})(),

\},

series : \[

\{

name : '文件管理',

type : 'pie',

data:(function()\{

var res=\[\];

for(var key in data.result)\{

res.push(\{

name:key,

value:data.result\[key\]

\})

\}

return res;

\})(),

itemStyle : \{

emphasis : \{

shadowBlur : 10,

shadowOffsetX : 0,

shadowColor : 'rgba(0, 0, 0, 0.5)'

\}

\},

center : \[ '50%', '50%' \],

\}

\]

\};

myChart.setOption(option);

\}

\});

最终效果如下：![Image 1][]

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot+Echarts实现请求后台数据显示饼状图

场景 SpringBoot搭建后台获取数据，前端可视化使用echarts的饼状图。 Echarts3官网: [https://www.echartsjs.com/in

Love The Way You Lie/ 2023年10月18日 18:12/ 0 赞/ 141 阅读

相关 Echarts pie 饼图类型后显示数据

Echarts pie 饼图类型后显示数据 ![在这里插入图片描述][70] ![在这里插入图片描述][70 1] sysPie:function(libt

灰太狼/ 2023年10月18日 09:43/ 0 赞/ 152 阅读

相关 echarts圆饼图设置默认选中项并在中间显示文字

效果：![911071-20190919145009095-1066376304.png][] 代码： var myChart = echarts.init(doc

Bertha 。/ 2023年08月17日 15:38/ 0 赞/ 178 阅读

相关 echarts 饼状圆环图圆角

option = { title: { text: '75%', textStyle: { color: '48FFFF

古城微笑少年丶/ 2023年07月24日 02:11/ 0 赞/ 67 阅读

相关 echart 圆饼图显示单位_ajax请求echarts圆饼图动态显示数据方法

在最近项目中有个需求是统计出所有文件占比并用圆饼图展示。后台提供接口返回数据是这样的：![Image 1][] 返回的简单粗暴，key和value直接这样返回，前端接收。

旧城等待，/ 2022年12月31日 08:29/ 0 赞/ 228 阅读

相关 echarts饼图显示比例

var option1 = { title: { text: '性别占比',

阳光穿透心脏的1/2处/ 2022年12月25日 15:52/ 0 赞/ 333 阅读

相关 ECharts饼图实例

ECharts饼图实例 1、引入jQuery的js文件 2、引入echarts的js文件 test.html页面 <!DOCTYPE html PU

柔情只为你懂/ 2022年06月18日 12:29/ 0 赞/ 423 阅读

相关 Echarts饼图展示动态数据

Echarts饼图展示动态数据注：本例是在SSM框架基础上实现的，通过其他框架或ｓｅｒｖｌｅｔ也同样可以实现;（不要纠结于此） echarts.jsp文件 <%

﹏ヽ暗。殇╰゛Y/ 2022年05月11日 11:14/ 0 赞/ 400 阅读

相关 echarts饼图动态获取数据

　　饼图获取动态数据　　首先页面引入jquery.js和echarts.js ![1378915-20180710204609898-2114475955.png][]

Myth丶恋晨/ 2022年03月20日 13:46/ 0 赞/ 475 阅读

相关 echarts 饼图(圆环、南丁格尔图)

1、设置数据类型 [{name:'名称',value:数值}] 2、饼图的显示和样式 series:[ {

水深无声/ 2021年07月25日 02:33/ 0 赞/ 954 阅读