Methodot低代码实战教程（一）——熟悉可视化Echart组件

news2024/10/7 10:18:20

一、产品介绍：

Methodot是行云创新旗下一款面向研发使用的一站式云原生开发及应用托管平台，产品内有大量开箱即用的服务和开发工具，例如：

支持开发团队进行微服务架构设计（例如一个袜子商店管理系统），服务参数以模块的形式传递

支持绑定git、镜像、代码进行云原生模式开发及部署

无需额外配置编译环境，大量开箱即用的环境模板，开箱即可云端编码，编码结束后推送git保存

支持低代码应用开发，快速开发企业及团队内部工具

大量已安装的中间件等工具，开箱即用

本次案例将介绍如何使用低代码板块中的Echart组件，将复杂的数据转化为有意义的可视化图表，并将其集成到您的应用程序或系统中。这将帮助您的用户更好地理解和分析数据，从而做出准确的决策和行动。

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

二、实战演示

2.1 创建新项目—低代码应用

选择PC端应用

选择在线开发，进入开发工作区

2.2 拖入一个Echart组件

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

https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js

2.3 新建一个JS对象

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

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

可以参考下下面的示例，看看在Methodot中是如何使用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')
 }
}