使用echarts+ajax实现数据可视化统计

第一步 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<!-- 折线图 -->
<div class="el-col el-col-14">
<div class="ve-line" id="main"></div>
</div>

第二步 加载ECharts js
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

第三步 通过echarts.init初始化一个通过echarts 然后使用ajax加载后台数据

// 基于准备好的dom，初始化echarts实例
var myChart = document.getElementById('main');
var myContainer = echarts.init(myChart);

myContainer.setOption({
title: {
text: '用户积分统计',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}:{c}'
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [{
data: [],
type: 'line'
}]
});

myContainer.showLoading();
//声明数组用于数据
var keys = [];
var va = [];
$.ajax({
method:"POST",
dataType:"json",
url:"/admin/Conf/client_data",
data:'',
success:function(data){
//解析json，并将json数据放到声明的空数组中
console.log(data)
//将字符串转成json对象才能遍历
var data = JSON.parse(data);
console.log(data)
for(var i=0; i<data.length; i++){
console.log(i)
console.log(data[i].name)
keys.push(data[i].name)
va.push(data[i].integral)
}
console.log(keys)
console.log(va)
//隐藏加载动画
myContainer.hideLoading();
//填充数据
myContainer.setOption({
xAxis:{
type: 'category',
data : keys
},
yAxis: {
type: 'value'
},
series:[{
type: 'line',
data : va
}]
});
},
error:function(){
alert("图表请求数据失败!");
myContainer.hideLoading();
}
});

参考资料

1. https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

2. https://blog.csdn.net/rjkkaikai/article/details/87979212?utm_medium=distribute.pc_relevant_download.none-task-blog-baidujs-4.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-baidujs-4.nonecase