echars概念
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求
以各种类型的图标来真实数据集
echars官网：https://echarts.apache.org/examples/zh/index.html
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VliZuU22-1682298174300)(imgs/image-20210514124208210.png)]
2 第一个案例
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option1 = {
title: {
text: '第一个 ECharts 实例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 120]
}]
}
//设置颜色的柱状图
var option2 ={
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, {
value: 200,
itemStyle: {
color: '#33ccff'
}
}, 150, 80, 70, 110, 130],
type: 'bar'
}]
}
//饼状图
var option3={
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
//多个折线
var option4={
title : {
text : '折线图堆叠'
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ]
},
grid : {
left : '3%',
right : '4%',
bottom : '3%',
containLabel : true
},
toolbox : {
feature : {
saveAsImage : {}
}
},
xAxis : {
type : 'category',
boundaryGap : false,
data : [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
},
yAxis : {
type : 'value'
},
series : [ {
name : '邮件营销',
type : 'line',
stack : '总量',
data : [ 120, 132, 101, 134, 90, 230, 210 ]
}, {
name : '联盟广告',
type : 'line',
stack : '总量',
data : [ 220, 182, 191, 234, 290, 330, 310 ]
}, {
name : '视频广告',
type : 'line',
stack : '总量',
data : [ 150, 232, 201, 154, 190, 330, 410 ]
}, {
name : '直接访问',
type : 'line',
stack : '总量',
data : [ 320, 332, 301, 334, 390, 330, 320 ]
}, {
name : '搜索引擎',
type : 'line',
stack : '总量',
data : [ 820, 932, 901, 934, 1290, 1330, 1320 ]
} ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
根据需求 选择不同的option 即可显示不同的样式
分析option中数据的：那些数据需要我们提供 那些数据是固定不变的
数据区主要是：series的data
3 显示指定年 客户的注册量
jsp:show_customer.jsp
<!-- 引入echars的js文件 -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<div style="width: 520px;float:left; border:1px solid blue; ">
<h1>客户月增量统计</h1>
选择年份:<select name="sel_year" style="clear:both;"></select><br/>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="data_year" style="width: 500px;height:400px; "></div>
</div>
<script type="text/javascript">
$(function(){
//获取最早注册的用户的年份minYear
//把minYear和当前年每个年对应一个option 写入 name="sel_year" 当前年默认被选中
$.get("<c:url value='/showCustomer/getMinYearAjax.action'/>",function(data){
//获取当前年
var year=new Date().getYear()+1900;
for(var i=parseInt(data);i<=year;i++){
$("select[name='sel_year']").append("<option value="+i+">"+i+"</option>");
}
$("select[name='sel_year'] option[value="+year+"]").attr("selected","selected");
},"text");
//给name="sel_year"注册onchange事件
$("select[name='sel_year']").bind("change",function(){
//获取select的值
var selYear=$("select[name='sel_year']").val();
getData(selYear);//通过ajax请求 获取响应 数据 通过响应数据修改xdata和ydata
var option = myChart.getOption();
option.series[0].data = ydata;//更改y轴数据
//option.xAxis.data = xdata;//设置x轴数据
myChart.setOption(option); //刷新数据
});
});
</script>
<script type="text/javascript">
var xdata,ydata;
//由year 通过ajax获取数据：给xdata和ydata赋值
function getData(year){
$.ajax({
data:"year="+year,
dataType:"json",
cache:false,
async:false,
url:"<c:url value='/showCustomer/getDataByYearAjax.action'/>",
success:function(data){
xdata=data.xdata;
ydata=data.ydata;
// 基于准备好的dom，初始化echarts实例
}
});
}
</script>
<script type="text/javascript">
var year=new Date().getYear()+1900;//获取当前年
//期待其传递 2021年每个月的注册人数
//期待服务器传递一个json：{xdata:[],ydata:[]}
//通过ajax请求 获取一个ShowData对象 必须发送同步请求
getData(year);
var myChart = echarts.init(document.getElementById('data_year'));
option = {
xAxis: {
type: 'category',
data: xdata
},
yAxis: {
type: 'value'
},
series: [{
data: ydata,
type: 'line'
}]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
//刷新图形的数据
function refreshData(){
//刷新数据
var option = myChart.getOption();
option.series[0].data = ydata;//更改y轴数据
//option.xAxis.data = xdata;//设置x轴数据
myChart.setOption(option);
}
</script>
action:ShowCustomerController.java
package com.zhiyou100.controller;
@Controller
@RequestMapping("/showCustomer")
public class ShowCustomerController {
@Autowired
private CustomerService customerService;
//ajax请求 响应需要的
@RequestMapping("/getDataByYearAjax.action")
@ResponseBody
public ShowData<String, Object> getDataByYearAjax(Integer year) {
if(year==null) {
year=new Date().getYear()+1900;
}
System.out.println("year+"+year);
ShowData<String, Object> data=customerService.getDataByYear(year);
return data;
}
//ajax请求 响应需要的
@RequestMapping("/getMinYearAjax.action")
@ResponseBody
public String getMinYearAjax() {
return customerService.getMinYear()+"";
}
}
service：CustomerServiceImp.java
package com.zhiyou100.service;
...
@Service
public class CustomerServiceImp implements CustomerService {
....
@Override
public ShowData<String, Object> getDataByYear(Integer year) {
ShowData<String, Object> data=new ShowData<String, Object>();
List<String> xdata=Arrays.asList(new String[] {"一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"});
data.setXdata(xdata);
Object[] value=new Object[xdata.size()];
Arrays.fill(value, 0);
List<Map<String,Object>> list=customerMapper.selectDataByYear(year);
for (Map<String, Object> map : list) {
Integer month=(Integer)map.get("month");
Object con=map.get("con");
value[month-1]=con;
}
data.setYdata(Arrays.asList(value));
return data;
}
@Override
public int getMinYear() {
return customerMapper.getMinYear();
}
}
mapper:CustomerMapper.java
@Select("SELECT MONTH(customer_time) month,COUNT(*) con FROM tab_customer WHERE YEAR(customer_time)=#{year} GROUP BY MONTH(customer_time)")
List<Map<String,Object>> selectDataByYear(int year);
@Select("select min(year(customer_time)) from tab_customer")
int getMinYear();
效果
4 统计客户的其他信息
jsp:show_customer.jsp
<div style="width: 520px;float:right; border:1px solid blue; ">
<h1>客户数据统计</h1>
选择属性:<select name="sel_field">
<option value="sex" selected="selected">性别</option>
<option value="province">省份</option>
<option value="job">工作</option>
</select>
<br/>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="data_field" style="width: 500px;height:400px; "></div>
</div>
<script type="text/javascript">
var myChart2 = echarts.init(document.getElementById('data_field'));
var text,name,field,data=[];//定义变量记录所有的未知数
//定义option：只有不把option设置给myChart2 myChart2就不会显示数据
//此时的option是空架子
var option2 = {
title: {
text: text,
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: name,
type: 'pie',
radius: '50%',
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//写一个方法通过ajax获取data 把数据设置给option：重新刷新myChart2即可显示新的数据
function setBieData(){
//通过ajax发送请求给action 获取指定属性对应的数据
field=$("select[name='sel_field']").val();
$.ajax({data:"field="+field,
dataType:"json",
url:"<c:url value='/showCustomer/getDataByFieldAjax.action'/>",
async:false,
cache:false,
success:function(data){
if(field=="sex"){
text="客户性别属性统计"; name="客户性别";
}else if(field=="province"){
text="客户省份属性统计"; name="客户省份";
}else if(field=="job"){
text="客户工作属性统计"; name="客户工作";
}
option2.title.text=text;//更改option中的text
option2.series[0].name=name;//更改option中的name
//刷新饼图的数据
option2.series[0].data=data;
myChart2.setOption(option2);
}
});
}
//文档加载时 执行一次 此时获取的是默认值sex
setBieData();
</script>
<script type="text/javascript">
$(function(){
//给sel_field添加onchange事件
$("select[name='sel_field']").bind("change",setBieData);
});
</script>
实体类：ShowDataPie.java
public class ShowDataPie {
private String name;
private Integer value;
...
}
action:ShowCustomerController.java
//ajax请求 响应需要的
@RequestMapping("/getDataByFieldAjax.action")
@ResponseBody
public List<ShowDataPie> getDataByFieldAjax(String field) {
return customerService.getDataByField(field);
}
service:CustomerServiceImp.java
@Override
public List<ShowDataPie> getDataByField(String field) {
if(field.equalsIgnoreCase("sex")) {
//按性别分组 获取count
return customerMapper.selectCountBySex();
}else if(field.equalsIgnoreCase("job")) {
//按工作分组 获取count
return customerMapper.selectCountByJob();
}else {
//按省份分组 获取count
return customerMapper.selectCountByProvince();
}
}
mapper:CustomerMapper.java
@Select("SELECT customer_sex name, COUNT(*) value FROM tab_customer GROUP BY customer_sex ORDER BY value DESC")
List<ShowDataPie> selectCountBySex();
@Select("SELECT customer_job name, COUNT(*) value FROM tab_customer GROUP BY customer_job ORDER BY value DESC")
List<ShowDataPie> selectCountByJob();
@Select(" SELECT REPLACE(SUBSTRING(customer_address,1,INSTR(customer_address,'-')-1),'省','') name, COUNT(*) value FROM tab_customer GROUP BY name ORDER BY value DESC")
List<ShowDataPie> selectCountByProvince();
效果图
1613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
