layui实现数据可视化，给出例子

当使用layui框架时，可以使用其自带的模块`echarts`来实现数据可视化。

以下是一个简单的例子，展示如何使用layui和echarts来实现一个简单的柱状图：

HTML代码：

<div class="layui-col-md6">
  <div class="layui-card">
    <div class="layui-card-header">柱状图</div>
    <div class="layui-card-body">
      <div id="chart"></div>
    </div>
  </div>
</div>

JavaScript代码：

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

  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('chart'));

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '销售统计'
    },
    tooltip: {},
    legend: {
      data: ['销售量']
    },
    xAxis: {
      data: ['苹果', '香蕉', '橙子', '西瓜', '葡萄']
    },
    yAxis: {},
    series: [{
      name: '销售量',
      type: 'bar',
      data: [5, 20, 36, 10, 10]
    }]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
});

在上述代码中，我们首先引入了layui的`echarts`模块，并在回调函数中初始化了一个echarts实例。接着，我们指定了图表的配置项和数据，并使用`setOption`方法将其显示在页面上。

这只是一个简单的例子，echarts支持的图表类型和配置项非常丰富，可以根据需求来进行调整和定制。