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" > </div>
5    </div>
6 </div>
2.引⼊layui包这个⼤家都懂得吧
3.Echart 作为layui的内部组件使⽤需要配置配置后才可以使⽤
version: 1,
setoption
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((harts = {})));
}
5.显⽰图表⾸先是layui内置模块
var element = layui.element,
$ = layui.jquery,
echarts = harts;
然后基于准备好dom元素创建Echart实例
var chartZhu = echarts.ElementById('EchartZhu'))；
指定图表配置项和数据
1//指定图表配置项和数据
2var 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
37var 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
74var 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.效果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。