腾讯云微搭低代码使用更多图表组件引用 Echarts 复杂图表-实践教程-文档中心-腾讯云

需求背景
微搭官方组件库已经提供了折线图、饼状图、柱状图图表组件，当这些图表组件不能满足实际业务需求时，可以用“更多图表”组件，这是一个通用的图表组件，可配置出多种复杂图表，使用该组件，可实现快速引入所有的 Echarts 图表。
实践步骤
更多图表组件引用复杂折线图
1. 在编辑器中使用更多图表组件，并将图表默认配置项清除。
﻿
﻿
﻿
2. 前往 Echarts 官网 查看应用示例，选择堆叠面积图。
﻿
﻿
﻿
3. 复制堆叠面积图示例 option 配置。
﻿
﻿
﻿
4. 返回微搭编辑器中，将上述步骤复制的 option 配置粘贴至图表配置项。
﻿
﻿
﻿
5. 图表配置项粘贴完成。
﻿
﻿
﻿
图表配置项示例：
(
  {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
}
)
6. 图表配置完成，效果展示。
﻿
﻿
﻿
更多图表组件引用柱状图
1. 在编辑器中使用更多图表组件，模板选择不使用模板，并将图表默认配置项清除。
﻿
﻿
﻿
2. 前往 Echarts 官网 查看应用示例，选择堆叠柱状图。
﻿
﻿
﻿
3. 复制堆叠柱状图示例完整代码下的配置内容。
﻿
﻿
﻿
4. 返回微搭编辑器，新建自定义 javascript 方法 setOption。
﻿
﻿
﻿
5. 将在步骤3复制的内容粘贴到setOption方法中。
export default function ({ event, data }) {
  let myChart = $w.chart1.echartsInstance;
  // There should not be negative values in rawData
  const rawData = [
    [100, 302, 301, 334, 390, 330, 320],
    [320, 132, 101, 134, 90, 230, 210],
    [220, 182, 191, 234, 290, 330, 310],
    [150, 212, 201, 154, 190, 330, 410],
    [820, 832, 901, 934, 1290, 1330, 1320]
  ];
  const totalData = [];
  for (let i = 0; i < rawData[0].length; ++i) {
    let sum = 0;
    for (let j = 0; j < rawData.length; ++j) {
      sum += rawData[j][i];
    }
    totalData.push(sum);
  }
  const grid = {
    left: 100,
    right: 100,
    top: 50,
    bottom: 50
  };
  const series = [
    'Direct',
    'Mail Ad',
    'Affiliate Ad',
    'Video Ad',
    'Search Engine'
  ].map((name, sid) => {
    return {
      name,
      type: 'bar',
      stack: 'total',
      barWidth: '60%',
      label: {
        show: true,
        formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
      },
      data: rawData[sid].map((d, did) =>
        totalData[did] <= 0 ? 0 : d / totalData[did]
      )
    };
  });
  const option = {
    legend: {
      selectedMode: false
    },
    grid,
    yAxis: {
      type: 'value'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series
  }
  option && myChart.setOption(option)
}
说明：
模仿 Echarts 的示例改造，替换对应组件属性， echarts 对应 $w.chart1.echarts， myChart 对应 $w.chart1.echartsInstance。
6. 更多图表组件图表 Ready 事件绑定 setOption 方法。
﻿
﻿
﻿
7. 图表配置完成，效果展示。
﻿
﻿
﻿
更多图表组件引用地图
1. 在编辑器中使用更多图表组件，并将图表默认配置项清除，并新建自定义 javascript 方法 function1。
﻿
﻿
﻿
2. 前往 Echarts 官网 查看应用示例，选择航班选座（SVG）。
﻿
﻿
﻿
3. 复制航班选座（SVG）示例完整代码下的配置内容。
﻿
﻿
﻿
4. 将在上述复制的内容粘贴到 function1 方法中。
export default async function ({ event }) {
  let res = await fetch('https://lowcode-0ghsfkoo8e3f415d-1258057692.tcloudbaseapp.com/resources/2024-06/lowcode-1834792', {
    headers: {
      'Content-Type': 'image/svg+xml'
    },
    method: 'GET'
  })
  const svg = await res.text()
  $w.chart1.echarts.registerMap('flight-seats', { svg: svg });
  const takenSeatNames = ['26E', '26D', '26C', '25D', '23C', '21A', '20F'];
  const option = {
    tooltip: {},
    geo: {
      map: 'flight-seats',
      roam: true,
      selectedMode: 'multiple',
      layoutCenter: ['50%', '50%'],
      layoutSize: '95%',
      tooltip: {
        show: true
      },
      itemStyle: {
        color: '#fff'
      },
      emphasis: {
        itemStyle: {
          color: undefined,
          borderColor: 'green',
          borderWidth: 2
        },
        label: {
          show: false
        }
      },
      select: {
        itemStyle: {
          color: 'green'
        },
        label: {
          show: false,
          textBorderColor: '#fff',
          textBorderWidth: 2
        }
      },
      regions: makeTakenRegions(takenSeatNames)
    }
  };
  function makeTakenRegions(takenSeatNames) {
    var regions = [];
    for (var i = 0; i < takenSeatNames.length; i++) {
      regions.push({
        name: takenSeatNames[i],
        silent: true,
        itemStyle: {
          color: '#bf0e08'
        },
        emphasis: {
          itemStyle: {
            borderColor: '#aaa',
            borderWidth: 1
          }
        },
        select: {
          itemStyle: {
            color: '#bf0e08'
          }
        }
      });
    }
    return regions;
  }
  $w.chart1.echartsInstance.setOption(option);
  // Get selected seats.
  $w.chart1.echartsInstance.on('geoselectchanged', function (params) {
    const selectedNames = params.allSelected[0].name.slice();
    // Remove taken seats.
    for (var i = selectedNames.length - 1; i >= 0; i--) {
      if (takenSeatNames.indexOf(selectedNames[i]) >= 0) {
        selectedNames.splice(i, 1);
      }
    }
    console.log('selected', selectedNames);
  });
}
说明：
模仿 Echarts 的示例改造，替换对应组件属性， echarts 对应 $w.chart1.echarts， myChart 对应 $w.chart1.echartsInstance。
Echarts 示例代码中的 $.get 请求需要进行相应的改造。
SVG 文件需要预先获取完整访问地址。
﻿
﻿
﻿
5. 更多图表组件图表 Ready 事件绑定 function1 方法。
﻿
﻿
﻿
6. 图表配置完成，效果展示。
﻿
﻿
﻿
使用更多图表组件引用 Echarts 复杂图表

本页目录：

需求背景

实践步骤

更多图表组件引用复杂折线图

更多图表组件引用柱状图

更多图表组件引用地图
