Echarts Waterfall Chart with MarkPoint on Expenses Data

Adding MarkPoint to Expenses Data in Echarts Waterfall Chart

This guide demonstrates how to add markPoint to Expenses data in an Echarts accumulated waterfall chart. This will help you visualize specific data points on the chart with custom text and icon.

Step-by-step guide:

1. Add markPoint to Expenses configuration:

   Inside the series array, locate the configuration for Expenses. Add the markPoint property to this configuration.

   series: [
     // ...
     {
       name: 'Expenses',
       type: 'bar',
       stack: 'Total',
       label: {
         show: true,
         position: 'bottom'
       },
       data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
       markPoint: { // Add markPoint property here
         data: [
           // ...
         ]
       }
     }
   ]
   

2. Define markPoint data:

   Within the markPoint property, define an array named data. This array will hold the details of each markPoint you want to display.

   markPoint: {
     data: [
       {
         name: '位置',
         symbol: 'pin',
         symbolSize: 20,
         coord: ['Nov 4', 108]
       },
       // ... (Other markPoint configurations)
     ]
   }
   

3. Set markPoint properties:

   • name: Text displayed next to the markPoint icon.
   • symbol: Icon used for the markPoint. Use 'pin' for a positioning icon.
   • symbolSize: Size of the markPoint icon.
   • coord: Array specifying the x and y coordinates of the markPoint.
     • First element: x-axis coordinate (category data).
     • Second element: y-axis coordinate (value data).

Example Code:

option = {
  title: {
    text: 'Accumulated Waterfall Chart'
  },
  // ... (Other chart configuration)
  series: [
    // ...
    {
      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]
          }
        ]
      }
    }
  ]
};

By following these steps, you can effectively add markPoint to your Expenses data, enhancing the visual representation of your waterfall chart.