LayUI+Echart實現圖表

1.首先 定義一個容器存放圖表  需要指定這個容器的大小

<div class="layui-card">
    <div class="layui-card-header">柱形圖</div>
    <div class="layui-card-body">
        <div id="EchartZhu" style="width: 500px;height: 500px;"> </div>              
    </div>
</div>

2.引入layui包 這個大家都懂得吧

3.Echart 作為layui的內部組件使用 需要配置 配置后才可以使用

layui.config({
                version: 1,
                base: '..' //這個就是你放Echart.js的目錄
}).use(['element', 'echarts'], function() {});

4.Echart.js 也需要配置 這個網上有很多例子 大家可以去看一下 這里簡單的列一下

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    window.layui && layui.define ? layui.define(function(exports){exports('echarts',factory(exports))}) :
    (factory((global.echarts = {})));
}

5.顯示圖表 首先是layui內置模塊

var element = layui.element,
$ = layui.jquery,
echarts = layui.echarts;

然后基於准備好dom元素 創建Echart實例

var chartZhu = echarts.init(document.getElementById('EchartZhu'))；

指定圖表配置項和數據

//指定圖表配置項和數據
                var optionchart = {
                    title: {
                        text: '商品訂單'
                    },
                    tooltip: {},
                    legend: {
                        data: ['銷量']
                    },
                    xAxis: {
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '銷量',
                        type: 'bar', //柱狀
                        data: [100,200,300,400,500,600,700],
                        itemStyle: {
                            normal: { //柱子顏色
                                color: 'red'
                            }
                        },
                    },{
                        name:'產量',
                        type:'bar',
                        data:[120,210,340,430,550,680,720],
                        itemStyle:{
                            normal:{
                                color:'blue'
                            }
                        }
                    }]
                };

                var optionchartZhe = {
                    title: {
                        text: '商品訂單'
                    },
                    tooltip: {},
                    legend: { //頂部顯示 與series中的數據類型的name一致
                        data: ['銷量', '產量', '營業額', '單價']
                    },
                    xAxis: {
                        // type: 'category',
                        // boundaryGap: false, //從起點開始
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '銷量',
                        type: 'line', //線性
                        data: [145, 230, 701, 734, 1090, 1130, 1120],
                    }, {
                        name: '產量',
                        type: 'line', //線性
                        data: [720, 832, 801, 834, 1190, 1230, 1220],
                    }, {
                        smooth: true, //曲線 默認折線
                        name: '營業額',
                        type: 'line', //線性
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                    }, {
                        smooth: true, //曲線
                        name: '單價',
                        type: 'line', //線性
                        data: [220, 332, 401, 534, 690, 730, 820],
                    }]
                };

                var optionchartBing = {
                    title: {
                        text: '商品訂單',
                        subtext: '純屬虛構', //副標題
                        x: 'center' //標題居中
                    },
                    tooltip: {
                        // trigger: 'item' //懸浮顯示對比
                    },
                    legend: {
                        orient: 'vertical', //類型垂直,默認水平
                        left: 'left', //類型區分在左 默認居中
                        data: ['單價', '總價', '銷量', '產量']
                    },
                    series: [{
                        type: 'pie', //餅狀
                        radius: '60%', //圓的大小
                        center: ['50%', '50%'], //居中
                        data: [{
                                value: 335,
                                name: '單價'
                            },
                            {
                                value: 310,
                                name: '總價'
                            },
                            {
                                value: 234,
                                name: '銷量'
                            },
                            {
                                value: 135,
                                name: '產量'
                            }
                        ]
                    }]
                };

在准備好的容器中顯示出來

chartZhu.setOption(optionchart, true);

6.效果如下：