菜单 搜索
首页 前端知识 echars：数据可视化:(跟着宝哥学java)

echars：数据可视化:(跟着宝哥学java)

2024-05-30 10:05:59 前端知识 前端哥 934 513 我要收藏

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();

效果图

image-20210514130354591

转载请注明出处或者链接地址：https://www.qianduange.cn//article/10118.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

JQuery-JavaScript代码库-遍历篇—我耀学IT

2024-06-06 00:06:31

html()和text()和val()方法、attr()和prop()方法

2024-06-06 00:06:08

用点jquery实现的登录页面

2024-06-06 00:06:07

如何在textarea中插入提示文本

2024-06-06 00:06:06

echarts-锥型柱状图

2024-06-06 00:06:05

echarts的使用

2024-06-06 00:06:00

Vue Echarts实现中国疫情地图

2024-06-06 00:06:59

vue项目中使用echarts和china.js实现中国地图

2024-06-06 00:06:56

echarts地图移动缩放卡顿问题

2024-06-06 00:06:56

Vue 开发中的一些问题简单记录，Cannot find module ‘webpack/lib/RuleSet‘

2024-06-06 00:06:49

大家推荐的文章
1

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
2

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
3

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
4

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
5

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
6

UE4.27支持HTML5

2024-05-07 13:05:261000
7

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
8

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
9

jQuery事件处理

2024-03-12 01:03:321000
10

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！