ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表

image

ECharts,柱状图,散点图,饼图,K线图,用于统计的盒形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

作为一个可以玩一下下Javascript的后端工程师,我是非常喜欢这个东西的。因为他简单、好用,你需要什么样式就去官网实例中找到类似的Demo,如下图所示,左边是代码,右边是效果,做了更改后,点击运行,即可看效果。调整到自己想要的代码后,引入到自己的项目中,获取数据即可。 image

我们做数据展示,肯定不是死数据,而官网给的是通过Json展示的数据,而前一段我想把后台的数据做个展示,因此,需要动态的获取Json,我的方案如下:

1.javaScript 导入echarts.js

2.通过AJAX访问服务器

3.服务器以Json形式(json内部为Map)返回


前端代码

    <script src="${prc }/js/echarts.js"></script>
    <script type="text/javascript">
    $(function() {
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

         // 异步请求
        $.post("你的请求地址",
                    function(data, status) {
                        if (status === "success") {
                            // 指定图表的配置项和数据

                            // data.json数据中map的key
                            var option = {
                                title : {
                                    text : data.title
                                },
                                tooltip : {},
                                legend : {
                                    //legnd的data 要与series的 name 值一致
                                    data : data.legend
                                },
                                xAxis : {
                                    data : data.xAxis
                                },
                                yAxis : {},
                                series : [ {
                                    name : data.legend,
                                    type : 'bar',
                                    data : data.series
                                } ]
                            };

                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);
                        } else {
                            alert("更新失败"+status+" data "+data);
                        }
                    },"json"); 

    });
</script>

服务器端代码

/**
     * echart
     * 
     * @author laysonx
     */
    @RequestMapping(value = "/echart", method = RequestMethod.POST)
    public @ResponseBody Map<String,Object> getEchartData() {

        try {
            Map<String,Object> map = new LinkedHashMap<String,Object>();
            String sale = "销量";
            String[] legend = sale.split(",");

            String x = "衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子";
            String[] xAxis = x.split(",");

            String s = "5,20,38,47,27,23";
            String[] series = s.split(",");

            map.put("title", "标题");
            map.put("legend", legend);
            map.put("xAxis", xAxis);
            map.put("series", series);

            return map;
        } catch (Exception e) {
            return null;
        }

    }
本文为 Laysonx 原创 文章,转载无需和我联系,但请注明来自 李鑫的杂货铺 或 李鑫博客