LayUI使用Echarts实现统计图

统计图"/>

LayUI使用Echarts实现统计图

引入 echarts.min.js包

<div id="main" style="width: 1000px;height:700px;"></div>

<script>layui.use(['form', 'laydate', 'layer'], function () {var laydate = layui.table;var form = layui.form;var layer = layui.layer;var laydate = layui.laydate;//加载数据Getdatachart();});function Getdatachart() {var dataAxis = []; //X轴namevar dataYis = []; //y轴数据设计值$.get(Url + "/UserInfo/BackupRecovery/LoadStatistic",function (data) {console.log(data);if (data) {for (var i in data) {var ptype = data[i].P_Name;dataAxis.push(ptype);dataYis.push(data[i].P_TotalCost);}GetChart(dataAxis, dataYis);}else {layer.msg("暂无数据！");}});}function GetChart(dataAxis, dataYis) {var myChart = echarts.init(document.getElementById('main'));var titletxt = "工程模块统计图";myChart.setOption({color: ['#3398DB'],title: {left: 'center',text: titletxt,textStyle: {fontSize: 20,fontWeight: 'normal',fontFamily: "微软雅黑"}},toolbox: {itemGap: 15,feature: {saveAsImage: { show: true }}},tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: dataAxis,axisTick: {alignWithLabel: true}},yAxis: {type: 'value'},series: [{type: 'bar',barWidth: '30%',data: dataYis}]});window.onresize = myChart.resize;}
</script>