layui 中echarts实现图表

一、建立div

<div class="layui-card-body">
	<div id="EchartOrder" style="width: 100%;height: 500px;"> </div>
</div>

二、引入配置

layui.config({】
    base: '../../layuiadmin/' //这个就是你放Echart.js的目录
}).extend({
    index: 'lib/index' //主入口模块
}).use(['element', 'echarts'], function() {
	var $ = layui.jquery ,
	echarts = layui.echarts;
});

三、js代码

    var echartOrder = echarts.init(document.getElementById('EchartOrder'));
	$.ajax({
	    url: homeGetOrderStatistics,
	    type: "GET",
	    content: "application/json",
	    data: {},
	    success: function (res) {
	        var data = res.data;
	        console.log(data);
	        var echartOrderZheYearMonthData = data.yearMonths;
	        var echartOrderZheTotalPriceData = data.totalPrices;
	        var echartOrderZhe = {
	            title: {
	                text: '订单金额统计'
	            },
	            tooltip: {},
	            xAxis: {
	                data: echartOrderZheYearMonthData
	            },
	            yAxis: {
	                type: 'value'
	            },
	            series: [{
	                name: '金额',
	                type: 'line', //线性
	                data: echartOrderZheTotalPriceData,
	            }]
	        };
	        echartOrder.setOption(echartOrderZhe, true);
	
	    }
	})

效果图:
在这里插入图片描述
前面只是0而已

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页