Custom page introduction ECharts

1. Usage scenarios

This topic describes how to introduce external js to a custom page by introducing ECharts. JS to achieve visual display of internal data in YIDA.

2. Video tutorial

此处为语雀视频卡片，点击链接查看：自定义页面引入Echarts.mov

Custom page introduction ECharts video tutorial

3. Procedure

3.1 Step 1: Configure JSX component properties

Create a custom page and drag a JSX component from the component library to the middle canvas of the page to set id properties and styles.

Operation method:

1. On the page, click Select jsx component. In the property bar on the right, click edit JSX code.
2. Add after divid="main"Field.
3. Click the style bar on the right, click Edit source code, and enter#main {height:400px}Field.

(The operation method is shown in Figure 3.2-1)

Figure 3.2-1 configure id attributes and styles for JSX components

3.2 Step 2: bind didmount on the custom page and call the method

Procedure:

1. Click Select page.
2. In the property bar on the right, click the bind action button when the page is loaded.
3. In the dialog box that appears, selectdidMountAction.
4. Copy the following code to the JS panel didMount function.

(The operation method is shown in Figure 3.2-2)

Figure 3.2-2 custom page binding didmount

The code introduced below can be copied directly into the JS panel.

export function didMount() {
  loadScript();
}

//loadScript方法，创建一个script标签并引入外部JS，执行成功后配合代码快速开发
export function loadScript() {
  //创建script标签并引入echarts.js
  ////当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
  new Promise((resolve, reject) => {
    const src = "https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js";
    const script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.src = src;
    document.body.appendChild(script);
    //script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的。
    script.onload = () => {
      resolve("成功");
    };
    script.onerror = reject;

  }).then(() => {
    //引用成功后加载雷达图js
    radar();
  })
}

//雷达图js方法
export function radar() {
  //雷达图js
  var chartDom = document.getElementById('main');
  //为ECharts准备一个具备大小（宽高）的Dom，在JSX组件的样式中自定义设置宽高度
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(chartDom);
  // 指定图表的配置项和数据
  var option;
  option = {
    //data使用了变量数据源，也可以直接写入
    title: {
      text: '员工综合能力'
    },
    legend: {
      data: state.nameArr
      // data: ["宜搭-ly"]
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '业绩绩效', max: 100 },
        { name: '综合能力', max: 100 },
        { name: '反应能力', max: 100 },
        { name: '专业能力', max: 100 },
        { name: '判断能力', max: 100 },
        { name: '服务能力', max: 100 }
      ]
    },
    series: [{
      name: '员工综合能力',
      type: 'radar',
      data: state.dataArr
      // data: [
      //   {
      //     value: [80, 85, 90, 90, 88, 92],
      //     name: '宜搭-ly'
      //   }
      // ]
    }]
  };
  // 使用刚指定的配置项和数据显示图表。
  option && myChart.setOption(option);
}

3.3 Step 3: Set the variable data source

Operation method:

1. Click the data source button on the left side of the page to open the data source configuration dialog box.
2. Click Add and selectVariableOption, add the namesnameArrAnddataArrThe variable data source.
3. In the data column, fill in the corresponding data as shown in the figure.
4. Click save to close the data source configuration dialog box.

(The operation method is shown in Figure 3.2-3)

Figure 3.2-3 setting variable data sources

4. Effect demonstration

4-1 effect demonstration

5. Try it online

For online experience, please go to the Developer Center.👉Custom page introduction ECharts

https://www.aliwork.com/bench/coe? tplUuid=TPL_LKDZLMHOEQXQ1D82UQ00

-------------------- Get the latest information YIDA, welcome to follow US--------------------