修改后的echarts文件

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

配置Module松申，base中的內(nèi)容是項(xiàng)目中存放echarts文件的位置

    //config的設(shè)置是全局的
    layui.config({base:'${contextPath}/plugins/echarts/',debug: true});
    //設(shè)置模塊的名稱
    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'));
    //指定圖表配置項(xiàng)和數(shù)據(jù)
    var optionChart = {
        title: {
            text: '文件各環(huán)節(jié)辦理時(shí)間'
        },
        tooltip: {
            formatter: function (params) {
               //鼠標(biāo)移上去tips激捏，先查看params里的內(nèi)容太援，在編輯
                return params.name + '  ' + '<br>' + '辦理人：' + params.data.name + '<br>' + '用時(shí)：' + params.data.value + '秒';
            }
        },
        xAxis: {
            data: xAxisArray //列名,樣例[‘測試1’,'測試2']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '耗時(shí)',
            type: 'bar',
            data: objArray, //封裝的對(duì)象數(shù)組偿警，樣例：[{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'));
    //指定圖表配置項(xiàng)和數(shù)據(jù)
    var option = {
        title: {
            text: '各環(huán)節(jié)辦理時(shí)間'
        },
        tooltip: {
                formatter: function (params) {
                    //鼠標(biāo)移上去tips尊浪，先查看params里的內(nèi)容典予，在編輯
                    return params.name + '  ' + '<br>' + '辦理人：' + params.data.name + '<br>' + '用時(shí)：' + params.data.value + '秒'  + '<br>' + '百分比：' + params.percent + '%';
                }
        },
        series: [
            {
                name: '耗時(shí)',
                type: 'pie',
                radius: '50%',
                data: objArray, //封裝的對(duì)象數(shù)組堕油，樣例：[{value:5000,name:'測試'}]
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    chartPie.setOption(option);

餅圖樣圖

image.png