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: ,
                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: [,,,,,,],
                         itemStyle: {
                             normal: { //柱子颜色
                                 color: 'red'
                             }
                         },
                     },{
                         name:'产量',
                         type:'bar',
                         data:[,,,,,,],
                         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: [, , , , , , ],
                     }, {
                         name: '产量',
                         type: 'line', //线性
                         data: [, , , , , , ],
                     }, {
                         smooth: true, //曲线 默认折线
                         name: '营业额',
                         type: 'line', //线性
                         data: [, , , , , , ],
                     }, {
                         smooth: true, //曲线
                         name: '单价',
                         type: 'line', //线性
                         data: [, , , , , , ],
                     }]
                 };

                 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: ,
                                 name: '单价'
                             },
                             {
                                 value: ,
                                 name: '总价'
                             },
                             {
                                 value: ,
                                 name: '销量'
                             },
                             {
                                 value: ,
                                 name: '产量'
                             }
                         ]
                     }]
                 };

在准备好的容器中显示出来

chartZhu.setOption(optionchart, true);

6.效果如下：