echarts动态加载data

最新推荐文章于 2025-06-10 17:07:46 发布

幻梦星空

最新推荐文章于 2025-06-10 17:07:46 发布

阅读量7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： eclipse echarts jquery html

本文链接：https://blog.youkuaiyun.com/qq_25214695/article/details/50511974

eclipse 同时被 3 个专栏收录

33 篇文章

订阅专栏

html

19 篇文章

订阅专栏

jquery

6 篇文章

订阅专栏

本文介绍了如何在Echarts中动态加载数据，特别是针对饼图的情况。通过JavaScript获取隐藏input中的值，利用split方法解析数据，然后构建Echarts饼图的data数组。示例代码展示了动态构建饼图系列数据的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一：在开发中，我们经常会遇到data中的value和name需要进行循环才能显示，那么下面来说一下实现的方法：

以饼图为例：

[#if aa??]
<input type="hidden" name="aa" id="aa" value="${aa!}"/>
[/#if]
[#if rrr??]
<input type="hidden" name="rrr" id="rrr" value="${rrr!}"/>
[/#if]
<script type="text/javascript">

// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

var option = {
title : {
text: '',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['总资产','姓名']
},
toolbox: {
show : false,
feature : {
mark : {show: false},
dataView : {show: false, readOnly: false},
magicType : {
show: false,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: false},
saveAsImage : {show: false}
}
},
calculable : true,
series : [{
name:['姓名','总资产'],
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:function(){
var res=[];
var aa=$("#aa").val();
var rrr=$("#rrr").val();
var aa1=aa.split(",");
var rrr1=rrr.split(",");
for(var i=0;i<rrr1.length;i++){
res.push({
value:aa1[i],
name:rrr1[i]
});
};
return res;
}()
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
<h2>客户个人总资产：</h2>
<div class="graph_box">

<div id="main" style="height:400px;"></div>
</div>

参考图片：

第二：我们有可能会循环多个饼图，那么代码如下：

series :function(){

     alert("1");
     var serie=[];
     var aa = collgename;
     for( var i=0;i < aa.length;i++){
     var item={
     name:aa[i],
     data:dataArr[i]
     };
     serie.push(item);
     };
     return serie;
     }()