在很多项目当中,我们需要借助图像或者表格来存放或者展示数据。这个时候echarts就突显出了其重要地位。
示例
后台数据
需求: 需要将后台的json数据传递给前端,并且通过echarts呈现为折线图
- 前端:通过axios来获取其josn数据,将值传递给echarts,做图像展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w3cschool (www.w3cschool.cn) </title>
<!-- 引入 echarts.js -->
<script src="js/echarts.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="vue.js"></script>
<script src="js/axios.min.js"></script> //导入axios的js文件
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="main" style="400px;height:400px;"></div>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<script>
var ur1= "http://localhost:8082/";
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: {
type: 'category',
data: ['en', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
},
],
};
/* axios.get(url).then((res)=>{
console.log(res.data);
});
*/
myChart.setOption(option);
var a =[];
var b = [];
var li = ur1+"/itcast/userproportion"; //请求路径
axios.get(li).then((res)=>{ //通过axios来获取后端数据
console.log(res); //打印数据
for(var i=1;i<8;i++){ //for循环来或者其字段
a.push(res.data.data[i].address); //获取地址
b.push(res.data.data[i].population); //获取人数
}
console.log(b);
console.log(a);
myChart.setOption({
xAxis:{
data: a //将原先值给覆盖,用地址为x轴。
},
series: [
{
data: b
}
]
})
console.log(a);
});
</script>
</body>
</html>
效果展示