第一步 在繪圖前我們需要為 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