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而已