Echarts 图表显示错误: Uncaught TypeError: Cannot read properties of undefined (reading 'length')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echarts图表显示错误: Uncaught TypeError: Cannot read properties of undefined (reading 'length')</title>
<link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<script src="../layui/layui.js"></script>
<script src="../js/jquery/jQuery-2.2.0.min.js"></script>
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
<script src="../layui/echarts.min.js" ></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
layui.use(['jquery'], function () {
//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.clear();
var names = [];
var mydata = [];
$.ajax({
type:"get",
async: false,
url: "/getdDateils",
dataType: "json",
/*data:{
subject_sid:subject_sid
},*/
success: function (datas) {
var data = datas.data;
if (data !== undefined) {
for (var i=0;i<data.length;i++){
names.push(data[i].name);
mydata[i] = {value: data[i].value, name: data[i].name};
}
// 指定图表的配置项和数据
var option = {
title: {
text: '统计图显示',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: names
},
series: [
{
name: '题目',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: mydata,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option,true);
} else {
console.error("data is undefined.");
}
}
});
})
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/p3mK 著作权归作者所有。请勿转载和采集!