echarts动态加载数据生成饼状图

112 阅读 0 评论 74 点赞

我是靠谱客的博主忐忑仙人掌，最近开发中收集的这篇文章主要介绍echarts动态加载数据生成饼状图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文简单介绍使用ajax从JSON文件加载数据，动态生产并状态，第一次写，供大家参考。欢迎大家提出优化意见和建议。

一下是前端的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8">
<title>Title</title>
<style>
.echarts {
margin: 0 auto;
width: 1000px;
height: 500px;
}
</style>
<script src="js/echarts.js"></script>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="database_chart" class="echarts"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('database_chart'));
myChart.showLoading({
text: '正在努力的读取数据中...',
});
function bindData() {
$.ajax({
url: 'js/data.json',
//url: '@Url.Action("GetDataBaseRecordNums", "Kluniv")',
// 读取控制器函数
type: 'get',
dataType: 'json',
data: {},
success: function (echartData) {
if (echartData) {
var legendData = "[";
for (var i = 0; i < echartData.list.length; i++) {
legendData += """;
legendData += echartData.list[i].name;
legendData += """;
legendData += ",";
}
var reg = /,$/gi;
legendData = legendData.replace(reg, "");
legendData += "]";
console.log(legendData);
console.log(echartData.list);
myChart.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
title: {
text: '特色库数据量统计',
x: 'center'
},
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
data: legendData.data
},
series: [
{
name: '数据量',
type: 'pie',
center: ['25%', '50%'],
radius: ['20%', '70%'],
label: {
normal: {
show: false,
position: 'center'
}
},
data: echartData.list
}
]
});
myChart.hideLoading();
}
}
})
}
bindData();
</script>
</body>
</html>

以下是JSON文件的内容：
{
“list”: [
{
“value”: 98,
“name”: “苗族侗族研究文献数据库”
},
{
“value”: 108,
“name”: “黔东南民族风情数据库”
},
{
“value”: 98,
“name”: “黔东南地方资源文献库”
},
{
“value”: 61,
“name”: “黔东南侗族音像数据库”
},
{
“value”: 1500,
“name”: “清水江文书数据库”
}
]
}