修改后的echarts文件

https://gitee.com/kong_qing_rong/daily-component-library/tree/master/echarts

配置Module，base中的内容是项目中存放echarts文件的位置

    //config的设置是全局的
    layui.config({base:'${contextPath}/plugins/echarts/',debug: true});
    //设置模块的名称
    layui.extend({ echarts: 'echarts'});

引入模块代码：

layui.use(['jquery', 'echarts'], function () {
    var table = $ = layui.jquery,
        echarts = layui.echarts;
});

圆柱图容器

 <div id="columnContent" class="layui-tab-item" style="width: 600px;height: 400px;">
            <div id="columnCharts"  style="width: 600px;height: 400px;"></div>
 </div>

生成圆柱图

//圆柱图
    var chartZhu = echarts.init(document.getElementById('columnCharts'));
    //指定图表配置项和数据
    var optionChart = {
        title: {
            text: '文件各环节办理时间'
        },
        tooltip: {
            formatter: function (params) {
               //鼠标移上去tips，先查看params里的内容，在编辑
                return params.name + '  ' + '<br>' + '办理人：' + params.data.name + '<br>' + '用时：' + params.data.value + '秒';
            }
        },
        xAxis: {
            data: xAxisArray //列名,样例[‘测试1’,'测试2']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '耗时',
            type: 'bar',
            data: objArray, //封装的对象数组，样例：[{value:5000,name:'测试'}]
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                ])
            }
        }]
    };

    chartZhu.setOption(optionChart, true);

样图

image.png

饼图容器

 <div id="pieContent" class="layui-tab-item" style="width: 600px;height: 400px;">
</div>

生成饼图

//饼图
    var chartPie = echarts.init(document.getElementById('pieContent'));
    //指定图表配置项和数据
    var option = {
        title: {
            text: '各环节办理时间'
        },
        tooltip: {
                formatter: function (params) {
                    //鼠标移上去tips，先查看params里的内容，在编辑
                    return params.name + '  ' + '<br>' + '办理人：' + params.data.name + '<br>' + '用时：' + params.data.value + '秒'  + '<br>' + '百分比：' + params.percent + '%';
                }
        },
        series: [
            {
                name: '耗时',
                type: 'pie',
                radius: '50%',
                data: objArray, //封装的对象数组，样例：[{value:5000,name:'测试'}]
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    chartPie.setOption(option);

饼图样图

image.png