カスタムページechartsの導入

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

1. 使用シーン

カスタムページにecharts.jsを導入することで、内部データのビジュアル化を実現し、カスタムページに外部jsを導入して複雑なシーンニーズを実現する方法を紹介します。

2.機能を実現する

2.1カスタムページの作成

(1) ヒストグラムjsx構成

(2) 円グラフjsx構成

2.2カスタムページの設定

(1) データソースにリモートデータソースを追加する

参考ドキュメント:条件に基づいてフォームインスタンスの詳細リストを検索します

インタフェース構成図:

(2) echarts.jsをロードし、ヒストグラムと円グラフをレンダリングする

Echarts.js cdnアドレス: https://g.alicdn.com/code/lib/echarts/5.4.0/echarts.min.js

Echarts.js中国語ドキュメント:https://echarts.apache.org/examples/zh/index.html

コードは次のとおりです。

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.効果を実現する

4.オンラインで試してみます

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

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

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