eCharts实现漏斗图

需求:像漏斗那样进行层层筛选,进行一个可直接看见过程的图表

效果:eCharts实现漏斗图_第1张图片

代码:

option = {
//标题
  title: {
    text: 'Funnel',
    left: 'left',
    top: 'bottom'
  },
//刷新加下载
  toolbox: {
    orient: 'vertical',
    top: 'center',
    feature: {
      restore: {},
      saveAsImage: {}
    }
  },
//左侧标识
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
  },
//渲染区域
  series: [
    {
//名称加位置
      name: 'Funnel',
      type: 'funnel',
      width: '40%',
      height: '45%',
      left: '55%',
      top: '5%',
//将显示文字固定到图标上,并规定颜色
      label: {
        position: 'inside',
        formatter: '{c}%',
        color: '#fff'
      },
//鼠标移入显示的弹窗
      emphasis: {
        label: {
          position: 'inside',
          formatter: '{b}Actual: {c}%'
        }
      },
//数据
      data: [
        { value: 60, name: 'Visit' },
        { value: 30, name: 'Inquiry' },
        { value: 10, name: 'Order' },
        { value: 80, name: 'Click' },
        { value: 100, name: 'Show' }
      ]
    },
  ]
};

自己修改即可

你可能感兴趣的:(eCharts,echarts,前端,javascript)