怎么用layui展示一个统计图
时间: 2024-05-08 09:19:40 浏览: 126
可以使用layui的echarts模块来展示统计图。首先需要引入echarts的相关文件,然后在layui的模块中使用echarts来绘制图表。具体代码可以参考以下示例:
HTML代码:
```
<div id="chart" style="height: 400px;"></div>
```
JavaScript代码:
```
layui.use(['echarts'], function () {
var echarts = layui.echarts;
// 基于准备好的dom,初始化echarts实例
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
// 指定图表的配置项和数据
var option = {
title: {
text: '统计图表'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
```
阅读全文