[干货·前端]LayuiAdmin使用echarts的两种方式

做网站类的开发，少不了需要各种在线图表展示，在这里不再单独长篇介绍LayuiAdmin 和 Echarts ，直入主题，看看最方便的LayuiAdmin使用echarts的两种方式：

1.使用LayuiAdmin内嵌的echarts模块

首先确保页面中引入layui.js 和 layui.css

需要得到的效果：

在LayuiAdmin页面中展现一个订单统计图表

实现代码：

Html代码

<div class="layui-card">

<div class="layui-card-header">数据概览</div>

<div class="layui-card-body">

<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-allanalysis-dataview">

<div carousel-item id="LAY-allanalysis-dataview" style="width: 100%;height: 300px;">

<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>

<div></div>

<div></div>

</div>

</div>

</div>

</div>

JS代码：

<script type="text/javascript">

layui.use(['admin','echarts', 'carousel'], function() {

var $ = layui.$,

admin = layui.admin,

element = layui.element,

carousel = layui.carousel,

device = layui.device(),

echarts = layui.echarts;

//轮播切换

$('.layadmin-carousel').each(function(){

var othis = $(this);

carousel.render({

elem: this

,width: '100%'

,arrow: 'none'

,interval: othis.data('interval')

,autoplay: othis.data('autoplay') === true

,trigger: (device.ios || device.android) ? 'click' :'hover'

,anim: othis.data('anim')

});

});

element.render('progress');

//百度图表-----------------------------划重点-下方为整合百度图表核心 方法---------------------------------------

var echartsApp = [], options = [

//平台订单概况

{

title: {

text: '平台订单概况',

x: 'center',

textStyle: {

fontSize: 14

}

},

tooltip : {

trigger: 'axis'

},

legend: {

data:['','']

},

xAxis : [{

type : 'category',

boundaryGap : false,

data: ['06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30']

}],

yAxis : [{

type : 'value'

}],

series : [{

name:'订单量',

type:'line',

smooth:true,

itemStyle: {normal: {areaStyle: {type: 'default'}}},

data: [111,222,333,444,555,666,3333,33333,55555,66666,33333,3333,6666,11888,26666,38888,56666,42222,39999,28888,17777,9666,6555,5555,3333,2222,3111,6999,5888,2777,1666,999,888,777]

},{

name:'出车量',

type:'line',

smooth:true,

itemStyle: {normal: {areaStyle: {type: 'default'}}},

data: [11,22,33,44,55,66,333,3333,5555,12666,3333,333,666,1188,2666,3888,6666,4222,3999,2888,1777,966,655,555,333,222,311,699,588,277,166,99,88,77]

}]

},

//订单客户分布

{

title : {

text: '订单客户分布',

x: 'center',

textStyle: {

fontSize: 14

}

},

tooltip : {

trigger: 'item',

formatter: "{a} <br/>{b} : {c} ({d}%)"

},

legend: {

orient : 'vertical',

x : 'left',

data:['海峡阳光','国旅','青年旅行','海外旅游','其他旅游']

},

series : [{

name:'客户名称',

type:'pie',

radius : '55%',

center: ['50%', '50%'],

data:[

{value:9052, name:'海峡阳光'},

{value:1610, name:'国旅'},

{value:3200, name:'青年旅行'},

{value:535, name:'海外旅游'},

{value:1700, name:'其他旅游'}

]

}]

},

//新增的用户量

{

title: {

text: '最近一周新增的订单',

x: 'center',

textStyle: {

fontSize: 14

}

},

tooltip : { //提示框

trigger: 'axis',

formatter: "{b}<br>新增订单：{c}"

},

xAxis : [{ //X轴

type : 'category',

data : ['11-07', '11-08', '11-09', '11-10', '11-11', '11-12', '11-13']

}],

yAxis : [{//Y轴

type : 'value'

}],

series : [{ //内容

type: 'line',

data:[200, 300, 400, 610, 150, 270, 380],

}]

}

]

,EelemDataView = $('#LAY-allanalysis-dataview').children('div') //指定渲染的容器

,renderDataView = function(index){

echartsApp[index] = echarts.init(EelemDataView[index],layui.echartsTheme);

echartsApp[index].setOption(options[index]);

window.onresize = echartsApp[index].resize;

};

renderDataView(0);//渲染第一个div

//监听数据概览轮播

var carouselIndex = 0;

carousel.on('change(LAY-allanalysis-dataview)', function(obj){

renderDataView(carouselIndex = obj.index);

});

-----------------------------划重点-上方为整合百度图表核心 方法---------------------------------------

});

</script>

因为上方案例中，我使用了LayuiAdmin中的轮播模块，所以js代码中的options是一个包含了三个options的json数组，其实如果只需要一个图表的话，方法就是：

<script type="text/javascript">

layui.use(['echarts'], function() {

var $ = layui.$,

element = layui.element,

echarts = layui.echarts;

//百度图表

var echartsApp = [], options = [

//平台订单概况（此处options只包含一个元素）

{

title: {

text: '平台订单概况',

x: 'center',

textStyle: {

fontSize: 14

}

},

tooltip : {

trigger: 'axis'

},

legend: {

data:['','']

},

xAxis : [{

type : 'category',

boundaryGap : false,

data: ['06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30']

}],

yAxis : [{

type : 'value'

}],

series : [{

name:'订单量',

type:'line',

smooth:true,

itemStyle: {normal: {areaStyle: {type: 'default'}}},

data: [111,222,333,444,555,666,3333,33333,55555,66666,33333,3333,6666,11888,26666,38888,56666,42222,39999,28888,17777,9666,6555,5555,3333,2222,3111,6999,5888,2777,1666,999,888,777]

},{

name:'出车量',

type:'line',

smooth:true,

itemStyle: {normal: {areaStyle: {type: 'default'}}},

data: [11,22,33,44,55,66,333,3333,5555,12666,3333,333,666,1188,2666,3888,6666,4222,3999,2888,1777,966,655,555,333,222,311,699,588,277,166,99,88,77]

}]

}

]

,EelemDataView = $('#LAY-allanalysis-dataview');

echartsApp[0] = echarts.init(EelemDataView[0],layui.echartsTheme);

echartsApp[0].setOption(options[0]);

});

</script>

2.直接使用echarts模块

打开Echarts官网，下载echarts.min.js

按照官网说明，首先在页面中写出一个图表容器，html代码如下：

<div id="ecsharts" style="width: 800px;height: 300px;"> </div> <!--建立图表容器-->

引入echarts.min.js

<script src="public/static/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>

按照官方文档开始写js代码，例如：

<script type="text/javascript">

// 基于准备好的容器，初始化echarts实例，id为上方html中div的id

var myChart = echarts.init(document.getElementById('ecsharts'));

// 指定图表的配置项和数据，这部分参数在官网上均有示例

var option =

{

title: {

text: '平台订单概况',

x: 'center',

textStyle: {

fontSize: 14

}

},

tooltip : {

trigger: 'axis'

},

legend: {

data:['','']

},

xAxis : [{

type : 'category',

boundaryGap : false,

data: ['06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30']

}],

yAxis : [{

type : 'value'

}],

series : [{

name:'订单量',

type:'line',

smooth:true,

itemStyle: {normal: {areaStyle: {type: 'default'}}},

data: [111,222,333,444,555,666,3333,33333,55555,66666,33333,3333,6666,11888,26666,38888,56666,42222,39999,28888,17777,9666,6555,5555,3333,2222,3111,6999,5888,2777,1666,999,888,777]

},{

name:'出车量',

type:'line',

smooth:true,

itemStyle: {normal: {areaStyle: {type: 'default'}}},

data: [11,22,33,44,55,66,333,3333,5555,12666,3333,333,666,1188,2666,3888,6666,4222,3999,2888,1777,966,655,555,333,222,311,699,588,277,166,99,88,77]

}]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

至此，两种方式介绍完毕