Custom page introduction ECharts

创建自定义页面 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版自定义页面不支持不支持支持支持未升级到新版信息架构的组织，请 点此查看 使用手册1. 操作步骤在应用管理界面，提供了两个创建自定义页面的入口1.1 通过【新建页面】下拉菜单创建左上角新建页面，在下拉菜单中选择【新建自定义页面(Beta)】，开始创建新建自定义页面1....

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

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. Implement functions

2.1 create a custom page

(1) JSX configuration of bar chart

(2) JSX configuration of pie chart

2.2 configure custom pages

(1) add a remote data source at the data source

Reference documents:Search form instance details by criteria

The interface configuration is as follows:

(2) load ECharts.js and render histogram and pie chart

ECharts.js CDN address: https://g.alicdn.com/code/lib/echarts/5.4.0/echarts.min.js

ECharts.js Chinese documentation:https://echarts.apache.org/examples/zh/index.html

The code is as follows:

export function didMount() {
  this.utils.loadScript("https://g.alicdn.com/code/lib/echarts/5.4.0/echarts.min.js").then(() => {
    console.log("success");
    //此处写三方JS资源
    const { getDatas } = this.state;
    this.bar(this.handleBarData(getDatas));
    this.pie(this.handlePieData(getDatas));
  });
}

// 柱状图数据格式处理
export function handleBarData(content) {
  const { data } = content;
  const { xAxis, yAxis } = this.state;
  const result = {};
  data.forEach(item => {
    const { formData = {} } = item;
    if (!result[formData[xAxis]]) {
      result[formData[xAxis]] = (formData[yAxis] || 0);
      return;
    };
    result[formData[xAxis]] += (formData[yAxis] || 0);
  });
  console.log('bar', result);
  return result;
}

// 饼图数据格式处理
export function handlePieData(content) {
  const { data } = content;
  const { name, value } = this.state;
  const dataObj = {};
  data.forEach(item => {
    const { formData = {} } = item;
    if (!dataObj[formData[name]]) {
      dataObj[formData[name]] = (formData[value] || 0);
      return;
    };
    dataObj[formData[name]] += (formData[value] || 0);
  });
  const result = Object.keys(dataObj).map(item => {
    return {
      name: item,
      value: dataObj[item]
    }
  });
  console.log('pie', result);
  return result;
}

// 柱状图
export function bar(datas) {
  var chartDom = document.getElementById('bar');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    title: {
      text: '柱状图',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
    },
    xAxis: {
      type: 'category',
      data: Object.keys(datas),
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '总数：',
        data: Object.values(datas),
        type: 'bar',
        label: {
          show: true,
          position: 'inside'
        }
      }
    ]
  };

  option && myChart.setOption(option);
}

// 饼图
export function pie(datas) {
  var chartDom = document.getElementById('pie');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    title: {
      text: '饼图',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: datas,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);
}

3. Achieve results

4. Try it online

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_LKDZLMHOEQXQ1D82UQ00&from=yuque_subject