Java----Eachars报表统计通用插件

前言：经过几次对eachars的理解和应用，再次将eachars进行了封装和升级，本版本目前是封装相对之前来说是比较完善的一个js， 内部包含两个JS，myEacharsPage.js 和 echarts.js，myEacharsPage是本人自己进行封装的JS，目前是针对饼图（pie），折线图（line），柱状图（bar）等进行了再次封装，使用时候，请仔细看方法的参数说明

链接：https://pan.baidu.com/s/1GxHSytiQ_7YHP9u3AOVBlg 
提取码：44w0 

1，先将两个js文件放置项目工程目录下，然后在myEacharsPage.js里面的顶部引用 echarts.js路径，

然后 在需要的界面引用myEacharsPage.js即可

2，在界面先给定一个容器用来展示图形报表，一般使用div

<div style="width:73.4%;height: 600px; border: 1px solid #ddd;float: right;" id="container">
</div>

3，加载数据库也就是你需要展示的数据，封装成JSON数组，取名随意  dataJSON

4，然后调用方法将dataJson数组封装成报表需要的格式，当然也可以在上面一次性封装成报表需要的json格式，这个可以根据实际情况来

            //再次封装数据为图形需要的格式   封装X轴，和Y轴
            var timeJSON = [];   //X轴 时间
            var valueJSON = [];   //Y轴 数据

            //图形化的图例图标显示数据
            var legData = ['总金额','总净值','临近报废数量','临近报废金额','采购数量'];
            
            //Y轴的描述，可以根据实际情况来，这里是采用双坐标的概念 取坐标的时候是根据下标来取对        
            应的描述的，0是数量，1是金额
            var yAxis = [{
                name: '数量',
                type: 'value'
            },{
                name: '金额',
                type: 'value'
            }];

            //封装X轴值
            for(var i=0;i<dataJSON.length;i++){
                    timeJSON.push(dataJSON[i].xAxis); //对应X轴值
            }

                //封装Y轴值
                var index = 0;
                for(var i = 0;i < dataJSON[0].yAxis.length; i++){   //得到项目大小
                    //左边的数据
                    var scz = {};
                    scz.name = dataJSON[0].yAxis[index].name;

                    //指定那个Y轴
                    if(dataJSON[0].yAxis[index].name == '临近报废数量' || dataJSON[0].yAxis[index].name == '采购数量'){
                        scz.yAxisIndex = 0;
                    }else{
                        scz.yAxisIndex = 1;
                    }

                    //封装Y轴值
                    var da = [];
                    for(var j = 0; j < timeJSON.length; j++){  //2
                        da.push(Number(dataJSON[j].yAxis[index].value));  //value
                    }
                    scz.data = da;
                    valueJSON.push(scz); //对应y轴值
                    index++;//当前索引加 1
                }

           

5，将第四部封装好的X轴json 和Y轴Json，调用myEacharsPage.js里面的方法即可，对应的参数说明在下图，getBarOrLineCharts('container',timeJSON,valueJSON,'【单位资产】分析',legData, yAxis, 'bar', 'shadow',true);

6，效果图为：

如果是想换成折线图，请修改第五步里面的参数即可

如果是饼图：则调用myEacharsPage.js中的
getPieCharts方法即可，参数说明，请将鼠标放置方法上，就可以看到，也可以按ctrl，点击方法名跳转进去看到参数说明

饼图效果

 

最后注意几个细节：
当图形生成后，放置到容器中，若容器发生大小变化时候，则可以调用报表的resize()方法进行报表重置

若想使用自定义颜色的话，myEacharsPage.js最后，本人已经附上了十六进制的颜色代码，使用时候只管调用方法即可

如有问题，请联系QQ：1693940631