Echarts
- 01_Echarts入门案例
- 02_Echarts之折线图
- 03_Echarts之饼状图
- 04_Echarts之异步加载
01_Echarts入门案例
- 概念
- ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
- 官网
- https://echarts.apache.org/zh/index.html
- 开发流程
- 引入Echarts资源
- 定义具备宽高的Echarts容器
- 初始化Echarts对象
- 设置Echarts属性
- 代码实现
<head>
<title>echarts入门</title>
<%--1,引入echarts.js--%>
<script src="echarts/echarts.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
<%--3,初始化echarts容器--%>
var myChart = echarts.init(document.getElementById('main'));
<%--4,设定echarts的属性--%>
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
})
</script>
</head>
<body>
<%--2,设定一个具备宽高的echarts容器--%>
<div id="main" style="width: 600px;height: 400px">
</div>
</body>
02_Echarts之折线图
- 开发流程
- 引入Echarts资源
- 定义具备宽高的Echarts容器
- 初始化Echarts对象
- 设置Echarts属性
- 代码实现
<html>
<head>
<title>Echarts折线图</title>
<script src="echarts/echarts.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
var eCharts = echarts.init(document.getElementById("main"));
var option = {
xAxis: {
type: 'category',
data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
},
yAxis: {
type: 'value'
},
series: [{
data: [1000, 932, 901, 934, 1290, 1330, 2000],
type: 'line'
}]
};
eCharts.setOption(option);
})
</script>
</head>
<body>
<div id="main" style="width: 600px;height: 400px"></div>
</body>
03_Echarts之饼状图
<html>
<head>
<title>Echarts饼状图</title>
<script src="echarts/echarts.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
var eCharts = echarts.init(document.getElementById("main"));
var option = option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '60%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
eCharts.setOption(option);
})
</script>
</head>
<body>
<div id="main" style="width: 600px;height: 400px"></div>
</body>
04_Echarts之异步加载
- 概念
- 异步请求服务器中的数据，并将该数据设置到Echarts容器中
- 代码实现
<html>
<head>
<title>Echarts饼状图</title>
<script src="echarts/echarts.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
var eCharts = echarts.init(document.getElementById("main"));
$.get("${pageContext.request.contextPath}/demo01",{},function (data) {
console.log(data);
var option = {
xAxis: {
type: 'category',
data: data.list1
},
yAxis: {
type: 'value'
},
series: [{
data: data.list2,
type: 'line',
smooth: true
}]
};
eCharts.setOption(option);
},"json");
})
</script>
</head>
<body>
<div id="main" style="width: 600px;height: 400px"></div>
</body>
</html>
@WebServlet(name = "Demo01Servlet",urlPatterns = "/demo01")
public class Demo01Servlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("Demo01Servlet");
SaleService saleService = new SaleServiceImpl();
try {
List<Sale> saleList = saleService.selectSalesList();
List<String> weekList = new ArrayList<>();
List<Integer> salesList = new ArrayList<>();
for (Sale sale : saleList) {
weekList.add(sale.getWeekName());
salesList.add(sale.getSales());
}
Map<String,Object> map = new HashMap<>();
map.put("list1",weekList);
map.put("list2",salesList);
JsonUtils.writeJsonStr(response,map);
} catch (Exception e) {
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
