layui图表用法介绍

一、前言

随着数据可视化需求的不断增长，图表组件成为了前端开发中不可或缺的一环。layui图表是一款轻量级的基于jquery和echarts的图表插件，它具有易于使用、交互性强等特点，适用于大部分图表场景。

本文主要介绍layui图表的使用方法、示例和扩展功能，帮助你更好地应对各种场景的图表需求。

二、基本使用

在使用layui图表之前，需要先引入相关依赖：

然后可以在页面中定义一个容器，用于放置图表：

在代码中引入 layui.js，加载模块代码：

// 加载图表模块
layui.use('echarts', function () {
  var echarts = layui.echarts;
 
  // 渲染图表
  var chart = echarts.init(document.getElementById('chart'));
 
  // 图表配置
  var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };
 
  chart.setOption(option);
});

如上所示的代码，首先使用 layui.use 方法加载 echarts 模块，然后通过 layui.echarts 获取 echarts 实例。接下来，我们定义一个图表容器并初始化 echarts 实例，然后配置 option 中的图表参数，最后通过 chart.setOption(option) 渲染图表。

三、图表类型

layui图表支持多种类型的图表，包括折线图、柱状图、饼图等。下面就来介绍一下这些图表的基本用法：

var option = { title: { text: '折线图' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] };

上述代码中，我们定义了一个 title， xAxis 和 yAxis 分别表示 x 轴和 y 轴，series 中用 data 来设置折线图的数据，设置类型为 line 即可生成折线图。

var option = { title: { text: '柱状图' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'bar' }] };

如上所示，我们同样定义了 title、xAxis 和 yAxis，series 中设置折线图的数据，type 设置为 bar 即可生成柱状图。

var option = { title: { text: '饼图', subtext: '纯属虚构' }, tooltip: { trigger: 'item', formatter: "{a}
{b}: {c} ({d}%)" }, legend: { orient: 'vertical', left: 10, data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] };

上述示例代码中，我们定义了一个 title，并设置了 tooltip 和 legend，series 中设置饼图数据，类型为 pie，同时设置起始角度、半径、圆心等属性。

四、扩展功能

除了基本的图表渲染外，layui图表还提供了许多扩展功能，满足复杂场景下的需求。

// 设置新的数据 var newData = [0, 0, 0, 0, 0, 0, 0]; // 更新图表 chart.setOption({ series: [{ data: newData }] });

var option = { ... series: [{ name: '销量', type: 'pie', center: ['50%', '60%'], radius: ['30%', '50%'], avoidLabelOverlap: false, // 设置饼图数据标签格式 label: { show: true, formatter: '{b}: {c} ({d}%)' }, data: [ {value: 335, name: '衬衫'}, {value: 310, name: '羊毛衫'}, {value: 234, name: '雪纺衫'}, {value: 135, name: '裤子'}, {value: 1548, name: '鞋子'} ] }] };

var option = { ... // 设置图例的点击事件 legend: { data: ['男', '女'], selectedMode: 'single' }, // 设置提示框的触发类型 tooltip: { trigger: 'axis' }, // 设置饼状图的选中效果 series: [{ name: '性别占比', type: 'pie', data: [{ value: 35, name: '男' }, { value: 65, name: '女' }], selectedMode: 'single', selectedOffset: 10, itemStyle: { normal: { label: { show: true, formatter: '{b}: {c} ({d}%)' }, labelLine: { show: true } } } }] };

五、总结

本文主要介绍了layui图表的基本使用和常见图表类型，以及图表的扩展功能。使用layui图表可以轻松快速地实现各种常见的图表需求，包括动态数据更新、数据格式化、图表交互等。希望此文能够帮助到你在前端开发中使用layui图表更加简单快捷。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com