ECharts的使用方法
程序员文章站
2024-02-12 18:03:34
...
No.1 下载资源Js库:
官网下载:https://echarts.apache.org/zh/index.html
在线定制:https://echarts.apache.org/zh/builder.html
No.2 在页面中引用 echarts.js
No.3 创建dom容器,存储报表
No.4 写js初始化echarts,并setOption()设置报表参数
No.5 完成,打开测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
项目中使用Echarts
No.1:点击月营业额页面,页面加载函数中发Ajax请求到后台
No.2:后台接收请求,去查询得到每个月的营业额,并且将其放入数组中,返回
No.3前端使用Ajax的回调中获得返回的数组,将数组的值赋值到echarts的data中
前端代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript" src="/Js/jquery.js"></script>
<script type="text/javascript" src="/Js/echarts.min.js"></script>
<script>
// 页面加载事件
$(document).ready(function(){
$.ajax({
url:"http://localhost:8080/ajax/month.do",
type:"get",
success:function (res) {
console.log(res.data)
if (res.code == 200) {
var myChart = echarts.init($('#main')[0]);
var option = {
title: {
text: '月营业额'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: res.data
}]
};
myChart.setOption(option);
}
},
error:function () {
alert("失败");
}
});
});
</script>
</body>
</html>
后台代码如下:
/**
* @ResponseBody 可以将java代码中的List集合,数组
* 变成数组返回.
*/
@RequestMapping("/month")
@ResponseBody
public ResultObject month() {
ArrayList<Double> list = new ArrayList<Double>( );
list.add(50.0);
list.add(40.0);
list.add(60.0);
list.add(90.0);
list.add(1000.0);
list.add(466.0);
list.add(345.4);
list.add(123.4);
list.add(452.3);
list.add(12.3);
list.add(343.4);
list.add(15.3);
return new ResultObject(200,"成功",list);
}
上一篇： while(){}的高级用法