Echarts创建动态图表

   偶然的机会，发现echarts可以制作比较精美的图表，进而小小学习了一下，也算知道了一些基本的常识，现与大家进行分享。    

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

    然而我们只是想要用这一项技术单纯的去实现相应的图表展现的功能即可。在这里我将用echarts中的柱状图和饼状图作为例子，连接数据库，为大家展示动态的数据。

一，动态展示柱状图

   首先让大家看看整体的效果：

     怎么连接数据库我就不详细说了，这边我将后台整体介绍一下。

    1.后台新建一张表，共三个字段：id,count name

    2.通过sql语句查询出所有的数据，存放在list集合中

    3.通过数据的组装，将值以特定的类型反馈给前台进行展示，前台拿到值后解析赋值即可。

------------------------------------------------------------------------------------------------------------------------------------------

   现在是后台数据的组装代码

@Override
    public Map queryBarGraphList(){
        //查询出所有柱状图的数据
        List list = bargraphMapper.queryList();
        log.info("查询出数据库柱状图数据共{}条",list.size());
        //装载查询出的不同的数据
        Map maps = new HashMap<>();
        String [] counts = new String[list.size()];
        String [] names = new String[list.size()];
        int i=0;
        for(Bargraph bargraph:list){
            counts[i] = bargraph.getCount();
            names[i] = bargraph.getName();
            i++;
        }
        maps.put("counts",counts);
        maps.put("names",names);
        return maps;
    }

通过map的形式给到前台，前台分别将值输送到相应的地方

----------------------------------------------------------------------------------------------------------------------------------------

现在是前台数据的展现代码

注意：哪里需要赋值，就先定义需要赋值的地方为一个数组格式，然后将后台传递过来的值显示在相应的地方即可，事实证明，echarts就是将后台数据进行灵活的展现，借此达到高度可定制的目的。

二：动态展示扇形图

依旧先看下整个的效果图：

这里很难受，这边定义的扇形图的区域名称就是出不来，但是可以出图，这个问题我还是要仔细研究下。

后台代码和上方大同小异，只是前端代码有所改动，这边我就将前端统一代码上一段吧。

-------------------------------------------------------------------------------------------------------------------------------------------------

现在是前台数据的展现代码

这边定义了一个peimain的div，将值直接定义进去即可，这边定义的names为50，30，20这样的数字，然后前台拿到后进行内部解析，但是这里为什么值中文显示不出来，希望前端大佬看到后可以为我解惑。

    这次算是初步了解了下，知道整体的大致流程，同时也知道了echarts是一款强大的图形化制作工具，等以后真正在项目中实战的时候再继续积累更加充足的技巧。