LayUI+Echart实现图表

1.首先 定义一个容器存放图表  需要指定这个容器的大小

1 <div class="layui-card">
2     <div class="layui-card-header">柱形图</div>
3     <div class="layui-card-body">
4         <div id="EchartZhu" style="width: 500px;height: 500px;"> </div>              
5     </div>
6 </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'))；

指定图表配置项和数据

  1 //指定图表配置项和数据
  2                 var optionchart = {
  3                     title: {
  4                         text: '商品订单'
  5                     },
  6                     tooltip: {},
  7                     legend: {
  8                         data: ['销量']
  9                     },
 10                     xAxis: {
 11                         data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
 12                     },
 13                     yAxis: {
 14                         type: 'value'
 15                     },
 16                     series: [{
 17                         name: '销量',
 18                         type: 'bar', //柱状
 19                         data: [100,200,300,400,500,600,700],
 20                         itemStyle: {
 21                             normal: { //柱子颜色
 22                                 color: 'red'
 23                             }
 24                         },
 25                     },{
 26                         name:'产量',
 27                         type:'bar',
 28                         data:[120,210,340,430,550,680,720],
 29                         itemStyle:{
 30                             normal:{
 31                                 color:'blue'
 32                             }
 33                         }
 34                     }]
 35                 };
 36 
 37                 var optionchartZhe = {
 38                     title: {
 39                         text: '商品订单'
 40                     },
 41                     tooltip: {},
 42                     legend: { //顶部显示 与series中的数据类型的name一致
 43                         data: ['销量', '产量', '营业额', '单价']
 44                     },
 45                     xAxis: {
 46                         // type: 'category',
 47                         // boundaryGap: false, //从起点开始
 48                         data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
 49                     },
 50                     yAxis: {
 51                         type: 'value'
 52                     },
 53                     series: [{
 54                         name: '销量',
 55                         type: 'line', //线性
 56                         data: [145, 230, 701, 734, 1090, 1130, 1120],
 57                     }, {
 58                         name: '产量',
 59                         type: 'line', //线性
 60                         data: [720, 832, 801, 834, 1190, 1230, 1220],
 61                     }, {
 62                         smooth: true, //曲线 默认折线
 63                         name: '营业额',
 64                         type: 'line', //线性
 65                         data: [820, 932, 901, 934, 1290, 1330, 1320],
 66                     }, {
 67                         smooth: true, //曲线
 68                         name: '单价',
 69                         type: 'line', //线性
 70                         data: [220, 332, 401, 534, 690, 730, 820],
 71                     }]
 72                 };
 73 
 74                 var optionchartBing = {
 75                     title: {
 76                         text: '商品订单',
 77                         subtext: '纯属虚构', //副标题
 78                         x: 'center' //标题居中
 79                     },
 80                     tooltip: {
 81                         // trigger: 'item' //悬浮显示对比
 82                     },
 83                     legend: {
 84                         orient: 'vertical', //类型垂直,默认水平
 85                         left: 'left', //类型区分在左 默认居中
 86                         data: ['单价', '总价', '销量', '产量']
 87                     },
 88                     series: [{
 89                         type: 'pie', //饼状
 90                         radius: '60%', //圆的大小
 91                         center: ['50%', '50%'], //居中
 92                         data: [{
 93                                 value: 335,
 94                                 name: '单价'
 95                             },
 96                             {
 97                                 value: 310,
 98                                 name: '总价'
 99                             },
100                             {
101                                 value: 234,
102                                 name: '销量'
103                             },
104                             {
105                                 value: 135,
106                                 name: '产量'
107                             }
108                         ]
109                     }]
110                 };

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

chartZhu.setOption(optionchart, true);

6.效果如下：