echarts 简述和饼图动态赋值_请求接口给饼图value赋值-优快云博客

本文简要介绍了如何使用ECharts库在网页中创建饼图，并通过AJAX从后台动态获取数据进行赋值。首先，在HTML中导入ECharts的JS文件，并在页面中设置一个div作为图表容器。接着初始化ECharts实例，定义图表配置，包括类型、半径、中心位置等。然后，使用AJAX异步请求数据，成功后将返回的值动态填充到图表的data属性中，完成饼图的绘制。这种方法同样适用于其他类型的ECharts图表。

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

使用echarts，先导入一个js，js要在form表单的下部，然后弄一个div放到jsp中，

var myChart = echarts.init(document.getElementById('myEchart')); myEchart是放置表的div的id
option = {

option里的内容从官网直接copy。
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

饼图赋值

series : [
             {
                 name: '访问来源',
                 type: 'pie',
                 radius : '55%',
                 center: ['50%', '60%'],
                 data : (function(){
                 var arrNum = [];
                $.ajax(
                {
                   type: "POST",
                         url: "${pageContext.request.contextPath}/w01070OrderBoard/zhenCeshi" ,
                         dataType : 'json',
                         async:false,
                         success: function (result) {
                         var obj = result.DZQ;
                         var objNum = result.DZQNUM;
                            for (var i = 0; i < obj.length; i++) {
                                           arrNum.push({"value": objNum[i],"name":obj[i]});
                                       }
                         }
                      });
                return arrNum;
                })(),