百度ECharts图表展示动态数据

百度ECharts是个非常强大的图表工具,引入百度提供的echarts.min.js文件后,只需从后台获取数据便可以图表的形式展示数据,能够更直观的查看、比较、统计数据。

这里以一个柱状图展示动态数据的小例子讲解如何使用百度ECharts。

1.首先引入需要的js文件:

    <!-- jquery -->
	<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
    <!-- 百度ECharts -->
	<script src="<%=basePath%>js/echarts.min.js"></script>

echarts.min.js自行去百度下载

2.创建columnChart.jsp,(这里可以直接去百度ECharts下载,有各式各样的柱状图):

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>柱状图</title>
    <c:import url="resources.jsp"></c:import>
  </head>
  
  <body>
  	<!--为Echarts准备一个Div放置图表-->
    <div id="main" style="width:600px;height:400px;"></div>
  </body>
  <script type="text/javascript">
  	$(function () {
			//将echart初始化到div中
            var myChart=echarts.init(document.getElementById("main"));
            var dataAxis = [];
            var data = [];
            var yMax = 500;//y轴最大值
            var dataShadow = [];
            
            for (var i = 0; i < data.length; i++) {
                dataShadow.push(yMax);
            }

            var option = {
                title: {
                    text: '特性示例:渐变色 阴影 点击缩放',
                    subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
                },
                xAxis: {
                    data: dataAxis,
                    axisLabel: {
                        inside: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                series: [
                    { // For shadow
                        type: 'bar',
                        itemStyle: {
                            normal: {color: 'rgba(0,0,0,0.05)'}
                        },
                        barGap:'-100%',
                        barCategoryGap:'40%',
                        data: dataShadow,
                        animation: false
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#2378f7'},
                                        {offset: 0.7, color: '#2378f7'},
                                        {offset: 1, color: '#83bff6'}
                                    ]
                                )
                            }
                        },
                        data: data
                    }
                ]
            };

            var zoomSize = 6;
            myChart.on('click', function (params) {
                console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                myChart.dispatchAction({
                    type: 'dataZoom',
                    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                    endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                });
            });

            myChart.setOption(option)  ;
        });
  </script>
</html>

因为我的js文件都是在resources.jsp中引入的,所以这里在columnChart.jsp中引用resources.jsp就可以了,可以根据自己的习惯引入js文件,直接复制粘贴的小白出了问题自己解决。

另外这个时候是没有数据的,接下来写后台方法传递数据给jsp。我这里的例子是用水果的销量做展示,后台代码不做赘述,看看就好,这里最好自己写,不难。

ProductMapper.xml:

<!-- 查看所有商品销量 -->
    <select id="getSales" resultType="com.demo.model.Product">
    	select name,sales from t_product
    </select>

Dao层和Service层省略,其中name是水果名,sales是销量。

ProductController.java:

/**
	 * 获得柱状图数据
	 * @return
	 */
	@RequestMapping("/getColumnChart")
	@ResponseBody
	public List<Product> getColumnChart(){
		List<Product> list = productService.getSales();
		return list;
	}

最后,回到columnChart.jsp中,写上ajax方法调用刚刚写的方法,全部代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>柱状图</title>
    <c:import url="resources.jsp"></c:import>
  </head>
  
  <body>
  	<!--为Echarts准备一个Div放置图表-->
    <div id="main" style="width:600px;height:400px;"></div>
  </body>
  <script type="text/javascript">
  	function getData(dataAxis,data){
  		$.ajax({
  				async: false,
            	url:"getColumnChart",
            	type:"get",
            	dataType:"json",
            	success:function(list){
            		for(var i =0;i < list.length;i++){
            			dataAxis.push(list[i].name);
            			data.push(list[i].sales);
            		}
            	}
            })
  	}
  	$(function () {
			//将echart初始化到div中
            var myChart=echarts.init(document.getElementById("main"));
            var dataAxis = [];
            var data = [];
            getData(dataAxis,data);
            var yMax = 500;//y轴最大值
            var dataShadow = [];
            
            for (var i = 0; i < data.length; i++) {
                dataShadow.push(yMax);
            }

            var option = {
                title: {
                    text: '特性示例:渐变色 阴影 点击缩放',
                    subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
                },
                xAxis: {
                    data: dataAxis,
                    axisLabel: {
                        inside: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                series: [
                    { // For shadow
                        type: 'bar',
                        itemStyle: {
                            normal: {color: 'rgba(0,0,0,0.05)'}
                        },
                        barGap:'-100%',
                        barCategoryGap:'40%',
                        data: dataShadow,
                        animation: false
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#2378f7'},
                                        {offset: 0.7, color: '#2378f7'},
                                        {offset: 1, color: '#83bff6'}
                                    ]
                                )
                            }
                        },
                        data: data
                    }
                ]
            };

            var zoomSize = 6;
            myChart.on('click', function (params) {
                console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                myChart.dispatchAction({
                    type: 'dataZoom',
                    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                    endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                });
            });

            myChart.setOption(option)  ;
        });
  </script>
</html>

加粗特别注意:ajax方法里一定要写上async: false。async. 默认是true,即为异步方式。async设置为:false,请求为同步请求,async设置为:true,则不会等待ajax请求返回的结果,会直接执行ajax后面的语句。如果不加async:false则会导致未等ajax请求返回结果就会执行后面的语句从而导致data无值从而导致图表没有数据展示。切记切记!

效果图:

原文链接:加载失败,请重新获取