Funnel Chart implementation

Implementation of Funnel Chart

A funnel chart is a common data visualization tool used to display conversion rates or quantity changes at various stages of a process. It intuitively reflects the递减 of data at different stages through the size of trapezoidal areas, often used in scenarios like sales conversion analysis and user behavior path tracking. ECharts provides robust support for funnel charts, allowing flexible configuration of styles, labels, and interactive effects.

Basic Configuration of Funnel Chart

To create a funnel chart in ECharts, set the type of series to 'funnel'. Here is a simple example of a funnel chart configuration:

option = {
  title: {
    text: 'Sales Conversion Funnel',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: 'Conversion Rate',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside'
      },
      data: [
        { value: 100, name: 'Visits' },
        { value: 80, name: 'Clicks' },
        { value: 60, name: 'Add to Cart' },
        { value: 40, name: 'Orders' },
        { value: 20, name: 'Payments' }
      ]
    }
  ]
};

Customizing Funnel Chart Styles

ECharts allows deep customization of various parts of the funnel chart:

Color Settings

Configure the color of each trapezoid via itemStyle:

series: [{
  // ...other configurations
  itemStyle: {
    color: function(params) {
      // Custom colors
      const colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'];
      return colorList[params.dataIndex];
    },
    borderWidth: 1,
    borderColor: '#fff'
  }
}]

Label Display

Adjust the position and format of labels flexibly:

label: {
  show: true,
  position: 'inside',
  formatter: function(params) {
    return `${params.name}\n${params.value}%`;
  },
  fontSize: 14,
  color: '#fff'
},
labelLine: {
  length: 10,
  lineStyle: {
    width: 1,
    type: 'solid'
  }
}

Multi-Series Funnel Chart

ECharts supports displaying multiple funnel series in the same chart for comparative analysis:

series: [
  {
    name: '2022',
    type: 'funnel',
    data: [
      { value: 100, name: 'Visits' },
      { value: 75, name: 'Clicks' },
      { value: 50, name: 'Orders' }
    ]
  },
  {
    name: '2023',
    type: 'funnel',
    data: [
      { value: 120, name: 'Visits' },
      { value: 90, name: 'Clicks' },
      { value: 65, name: 'Orders' }
    ]
  }
]

Dynamic Sorting Funnel Chart

Control the sorting method of the funnel chart via the sort property:

series: [{
  sort: 'ascending', // Options: 'ascending', 'descending', 'none'
  // ...other configurations
}]

Interactive Features of Funnel Chart

ECharts provides rich interactive features for funnel charts:

Highlight Effects

emphasis: {
  label: {
    fontSize: 16,
    fontWeight: 'bold'
  },
  itemStyle: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
}

Data Filtering

Use the legend component to filter series:

legend: {
  data: ['2022', '2023']
},
series: [
  {
    name: '2022',
    // ...configurations
  },
  {
    name: '2023',
    // ...configurations
  }
]

Combining Funnel Chart with Other Charts

Funnel charts can be combined with other chart types for richer data presentation:

option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Conversion Rate', 'Growth Rate']
  },
  grid: [
    {
      left: '55%',
      top: '10%',
      width: '40%',
      height: '40%'
    }
  ],
  xAxis: [
    {
      type: 'category',
      data: ['Visits', 'Clicks', 'Orders'],
      gridIndex: 0
    }
  ],
  yAxis: [
    {
      type: 'value',
      gridIndex: 0
    }
  ],
  series: [
    {
      name: 'Conversion Rate',
      type: 'funnel',
      data: [
        { value: 100, name: 'Visits' },
        { value: 80, name: 'Clicks' },
        { value: 60, name: 'Orders' }
      ]
    },
    {
      name: 'Growth Rate',
      type: 'bar',
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: [10, 15, 20]
    }
  ]
};

Advanced Applications of Funnel Chart

Custom Shapes

Adjust the shape of the funnel chart via funnelAlign and shape properties:

series: [{
  funnelAlign: 'left',
  shape: 'diamond', // Options: 'funnel', 'diamond', 'triangle', 'pyramid'
  // ...other configurations
}]

Animation Effects

Configure rich animation effects:

series: [{
  animation: true,
  animationDuration: 1000,
  animationEasing: 'cubicInOut',
  animationDelay: function(idx) {
    return idx * 200;
  }
}]

Data Processing for Funnel Chart

Data Transformation

Preprocess data before passing it in:

function processData(rawData) {
  return rawData.map(item => {
    return {
      name: item.stage,
      value: item.count,
      // Additional fields can be added
      rate: item.rate + '%'
    };
  });
}

const chartData = processData([
  { stage: 'Visits', count: 1000, rate: 100 },
  { stage: 'Clicks', count: 800, rate: 80 }
]);

Dynamic Updates

Update data dynamically via the setOption method:

function updateChart(newData) {
  myChart.setOption({
    series: [{
      data: newData
    }]
  });
}

Performance Optimization for Funnel Chart

For funnel charts with large datasets, the following optimization measures can be taken:

series: [{
  large: true, // Enable optimization for large datasets
  largeThreshold: 1000, // Enable optimization when data exceeds 1000
  progressive: 200, // Progressive rendering
  progressiveThreshold: 3000, // Enable progressive rendering when data exceeds 3000
  // ...other configurations
}]

Internationalization of Funnel Chart

Support for multilingual configurations:

option = {
  title: {
    text: i18n.t('funnel.title')
  },
  tooltip: {
    formatter: params => {
      return `${i18n.t(params.name)}: ${params.value}%`;
    }
  },
  series: [{
    data: [
      { value: 100, name: i18n.t('funnel.stage1') },
      { value: 80, name: i18n.t('funnel.stage2') }
    ]
  }]
};

Responsive Design for Funnel Chart

Ensure the funnel chart displays well on different devices:

function resizeChart() {
  const width = window.innerWidth;
  const option = {
    series: [{
      width: width > 768 ? '80%' : '95%',
      left: width > 768 ? '10%' : '2.5%'
    }]
  };
  myChart.setOption(option);
  myChart.resize();
}

window.addEventListener('resize', resizeChart);