PagePlug入门教程—Echart组件使用示例

一、背景：

PagePlug是一款面向研发开发使用、开源的、前后端一体的低代码工具，拥有强大的可视化建模和API集成能力，目前已有将近超千家企业将PagePlug低代码开发工具融入内部研发体系，相较于传统的产研开发，使用PagePlug可大幅提升研发效率，节省项目迭代维护成本。更多介绍可点击下方文章查阅：

国内优秀的开源低代码框架：PagePlug，面向研发使用，拒绝重复、低价值的工单循环开发-CSDN博客文章浏览阅读1.5k次，点赞2次，收藏7次。面向研发使用、更懂国内企业的开源低代码_低代码框架https://blog.csdn.net/AppsmithCN/article/details/131380008随着PagePlug的发展，除了内部工具开发及常用系统开发之外，企业用户对于可视化图表的制作需求也日益增长。本文将介绍如何使用PagePlug内置的Echart组件，将复杂的数据转化为有意义的可视化图表，并将其集成到您的应用程序或系统中。这将帮助您的用户更好地理解和分析数据，从而做出准确的决策和行动。

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari 等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、实战演示

2.1 创建一个新应用，拖入一个Echart组件

案例演示需要用到Echart库，我们可以复制这个链接进行安装：

https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js

2.2 新建一个JS对象

PagePlug中的 JavaScript 编辑器使您能够创建具有页面级范围的JS对象。JS 对象是与其关联的变量和函数的封装。它是一个类似于 Java 类的模板，其中包含用于执行操作的变量和方法。

之后我们将Echart官网示例的代码复制到JS对象中（考虑后续迭代的问题及代码逻辑的处理等等，建议在JS对象中编写，后续统一引用）

可以参考下下面的示例，看看在PagePlug中是如何使用Echart的

export default {
 myVar1: [],
 myVar2: {},
 myFun1 () {
  let xAxisData = [];
  let data1 = [];
  let data2 = [];
  let data3 = [];
  let data4 = [];
  for (let i = 0; i < 10; i++) {
   xAxisData.push('Class' + i);
   data1.push(+(Math.random() * 2).toFixed(2));
   data2.push(+(Math.random() * 5).toFixed(2));
   data3.push(+(Math.random() + 0.3).toFixed(2));
   data4.push(+Math.random().toFixed(2));
  }
  var emphasisStyle = {
   itemStyle: {
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.3)'
   }
  };
  const option = {
   legend: {
    data: ['bar', 'bar2', 'bar3', 'bar4'],
    left: '10%'
   },
   brush: {
    toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
    xAxisIndex: 0
   },
   toolbox: {
    feature: {
     magicType: {
      type: ['stack']
     },
     dataView: {}
    }
   },
   tooltip: {},
   xAxis: {
    data: xAxisData,
    name: 'X Axis',
    axisLine: { onZero: true },
    splitLine: { show: false },
    splitArea: { show: false }
   },
   yAxis: {},
   grid: {
    bottom: 100
   },
   series: [
    {
     name: 'bar',
     type: 'bar',
     stack: 'one',
     emphasis: emphasisStyle,
     data: data1
    },
    {
     name: 'bar2',
     type: 'bar',
     stack: 'one',
     emphasis: emphasisStyle,
     data: data2
    },
    {
     name: 'bar3',
     type: 'bar',
     stack: 'two',
     emphasis: emphasisStyle,
     data: data3
    },
    {
     name: 'bar4',
     type: 'bar',
     stack: 'two',
     emphasis: emphasisStyle,
     data: data4
    }
   ]
  };
  return option;
 },
 async myFun2 () {
  // use async-await or promises
  // await storeValue('varName', 'hello world')
 }
}