要在Expenses的数据上方显示markPoint,可以在series中的Expenses的配置中添加markPoint属性。markPoint中的data属性可以设置markPoint的位置和样式。

以下是修改后的代码:

option = {
  title: {
    text: 'Accumulated Waterfall Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params) {
      let tar;
      if (params[1] && params[1].value !== '-') {
        tar = params[1];
      } else {
        tar = params[2];
      }
      return tar && tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
    }
  },
  legend: {
    data: ['Expenses', 'Income']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: (function () {
      let list = [];
      for (let i = 1; i <= 11; i++) {
        list.push('Nov ' + i);
      }
      return list;
    })()
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Income',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
    },
    {
      name: 'Expenses',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'bottom'
      },
      data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
      markPoint: {
        data: [
          {
            name: '位置',
            symbol: 'pin',
            symbolSize: 20,
            coord: ['Nov 4', 108]
          },
          {
            name: '位置',
            symbol: 'pin',
            symbolSize: 20,
            coord: ['Nov 5', 154]
          },
          {
            name: '位置',
            symbol: 'pin',
            symbolSize: 20,
            coord: ['Nov 10', 361]
          },
          {
            name: '位置',
            symbol: 'pin',
            symbolSize: 20,
            coord: ['Nov 11', 203]
          }
        ]
      }
    }
  ]
};

在Expenses的配置中添加了markPoint属性,并在markPoint的data属性中设置了四个markPoint的位置和样式。coord属性可以设置markPoint的位置,其中'Nov 4'、'Nov 5'、'Nov 10'和'Nov 11'是x轴的坐标,108、154、361和203是y轴的坐标。

通过设置symbol属性为'pin',可以设置markPoint的图标样式为定位图标。

通过设置symbolSize属性,可以设置markPoint的图标大小。

这样,Expenses的数据上方就会显示markPoint,由文字“位置”图标“定位”组成


原文地址: https://www.cveoy.top/t/topic/iRP5 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录