eCharts实现漏斗图

简介: eCharts实现漏斗图

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


效果:

代码:


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' }
      ]
    },
  ]
};

自己修改即可

相关文章
|
7月前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
141 0
echarts迁徙图
前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个
|
6月前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
279 0
 ECharts 雷达图案例001-自定义节点动画
|
6月前
|
数据可视化 黑灰产治理
📊 ECharts 雷达图案例002 - 诈骗性质分析
**ECharts 案例展示了诈骗性质的雷达图分析,以创新可视化揭示诈骗模式。定制化雷达图配色鲜明,多维度剖析不同诈骗手段,如网络刷单、冒充公检法。交互式设计允许用户深入探究细节。[点击这里](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454384)查看完整案例。#ECharts #数据可视化 #雷达图 #诈骗分析**
66 0
📊 ECharts 雷达图案例002 - 诈骗性质分析
|
5月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
466 0
|
JSON 数据格式
echarts关系图
echarts关系图
81 0
Echarts饼图之-玫瑰图数据交互
Echarts饼图之-玫瑰图数据交互
117 0
|
JSON 数据格式
Echarts的饼状图变成环形图
Echarts的饼状图变成环形图
55 0
Echarts去掉叠堆折线区域图的区域颜色
Echarts去掉叠堆折线区域图的区域颜色
132 0
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
76 1

热门文章

最新文章