3D 漏斗图锥形图表echarts


let loadingFunnel = () => {//title标示文字,标示线loadingFunnel.title = (text, top, left, color, fontStyle, fontFamily, fontSize) => {return {text: text,top: top,left: left,textStyle:{color: color,fontStyle: fontStyle,fontFamily: fontFamily,fontSize: fontSize,}}};loadingFunnel.arrData = [20, 40, 60, 80, 100];var myChart = echarts.init(document.getElementById("chart1"));option = {title: [loadingFunnel.title('指标二', '25%', '21%', '#d1ecff', 'normal', 'sans-serif', '14'),loadingFunnel.title('40', '32%', '21%', '#EFC302', 'normal', 'Digital', '20'),loadingFunnel.title('指标一', '18%', '52%', '#d1ecff', 'normal', 'sans-serif', '14'),loadingFunnel.title('20', '24%', '55%', '#A5E104', 'normal', 'Digital', '20'),loadingFunnel.title('指标四', '43%', '16%', '#d1ecff', 'normal', 'sans-serif', '14'),loadingFunnel.title('80', '50%', '16%', '#0FE6BE', 'normal', 'Digital', '20'),loadingFunnel.title('指标三', '33%', '65%', '#d1ecff', 'normal', 'sans-serif', '14'),loadingFunnel.title('60', '39%', '68%', '#FF5A00', 'normal', 'Digital', '20'),loadingFunnel.title('指标五', '56%', '75%', '#d1ecff', 'normal', 'sans-serif', '14'),loadingFunnel.title('100', '62%', '78%', '#0078FF', 'normal', 'Digital', '20')],color: ['#bb0004', '#FFD48A'],tooltip: {show: true,formatter: function (params, ticket, callback) {switch (params.name) {case "指标一":return "指标一 :&emsp;" + loadingFunnel.arrData[0]break;case "指标二":return "指标二 :&emsp;" + loadingFunnel.arrData[1]break;case "指标三":return "指标三 :&emsp;" + loadingFunnel.arrData[2]break;case "指标四":return "指标四 :&emsp;" + loadingFunnel.arrData[3]break;default:return "指标五 :&emsp;" + loadingFunnel.arrData[4]}}},grid: {// containLabel: true,left: '10%',top: "19%",bottom: "15%",},xAxis: {show: false,data: ['一季度','二季度','三季度','四季度'],axisTick: {show: false},axisLabel: {color: '#5EA2ED',interval: 0},axisLine: {lineStyle: {color: '#1B5BBA',}}},yAxis: {show: false,splitLine: { show: false },axisLine: {lineStyle: {color: '#1B5BBA',}},axisLabel: {color: '#5EA2ED',interval: 0},},series: [{type: 'pictorialBar',// name: '案件归类',// z: 10,// label: {//     normal: {//         show: true,//         position: "top",//         formatter: "{c}",//         color: "#fff",//         fontSize: 13//     }// },/*data: [{name: '指标一',z: 100,value: 20,symbolSize: ['100%', '33%'],symbolPosition: 'center',symbolOffset: [142, '-1200%'],symbol: 'image://../img/Funnel1.png',}, {name: '指标二',z: 90,value: 40,symbolSize: ['75%', '33%'],symbolPosition: 'center',symbolOffset: [58.5, '-430%'],symbol: 'image://../img/Funnel2.png',}, {name: '指标三',z: 80,value: 60,symbolSize: ['125%', '33%'],symbolPosition: 'center',symbolOffset: [-28, '-165%'],symbol: 'image://../img/Funnel3.png',}, {name: '指标四',z: 70,value: 80,symbolSize: ['175%', '33%'],symbolPosition: 'center',symbolOffset: [-115, '-25%'],symbol: 'image://../img/Funnel4.png',},{name: '指标五',z: 60,value: 100,symbolSize: ['235%', '33%'],symbolPosition: 'center',symbolOffset: [-202, '65%'],symbol: 'image://../img/Funnel5.png',}]*/data: [{name: '指标一',z: 100,value: 20,symbolSize: ['100%', '63%'],symbolPosition: 'center',symbolOffset: [152, '-600%'],symbol: 'image://../img/Funnel1.png',}, {name: '指标二',z: 90,value: 40,symbolSize: ['200%', '33%'],symbolPosition: 'center',symbolOffset: [-9.5, '-400%'],symbol: 'image://../img/Funnel2.png',}, {name: '指标三',z: 80,value: 60,symbolSize: ['225%', '33%'],symbolPosition: 'center',symbolOffset: [-6, '-145%'],symbol: 'image://../img/Funnel3.png',}, {name: '指标四',z: 70,value: 80,symbolSize: ['275%', '33%'],symbolPosition: 'center',symbolOffset: [-179, '-10%'],symbol: 'image://../img/Funnel4.png',},{name: '指标五',z: 60,value: 100,symbolSize: ['335%', '33%'],symbolPosition: 'center',symbolOffset: [-175, '75%'],symbol: 'image://../img/Funnel5.png',}]}]};myChart.setOption(option);
};

3D 漏斗图锥形图表echarts相关推荐

新图表来袭，FineReport新增热力地图、漏斗图、图表切换新功能
12月初,报表软件FineReport更新了图表插件V8.30,新增了热力地图.漏斗图.图表切换等七大新功能.新增内容如下: 一.热力地图热力地图是用来展示地理空间中点分布密集情况的图表类型.其效果 ...
charts漏斗图表_ECharts漏斗图属性与实例介绍
ECharts漏斗图在 ECharts 系列中,漏斗图使用 series[i]-funnel 表示.漏斗图适用于业务流程比较规范.周期长.环节多的流程分析,通过漏斗各环节业务数据的比较,能够直观地发 ...
c语言输出漏斗图形7层,ECharts 教程漏斗图属性与实例介绍 - 闪电教程JSRUN
漏斗图属性与实例介绍 ECharts漏斗图在 ECharts 系列中,漏斗图使用 series[i]-funnel 表示.漏斗图适用于业务流程比较规范.周期长.环节多的流程分析,通过漏斗各环节业务数 ...
charts漏斗图表_漏斗图 | ECharts 数据可视化实验室
介绍漏斗图又叫倒三角图,漏斗图将数据呈现为几个阶段,每个阶段的数据都是整体的一部分,从一个阶段到另一个阶段数据自上而下逐渐下降,所有阶段的占比总计100%.与饼图一样,漏斗图呈现的也不是具体的数据, ...
Echarts 漏斗图
实例: 本节任务任务一:漏斗图或金字塔图任务描述漏斗图(funnel)是倒三角形的条形图,金字塔是正三角形的条形图,这两者适用于业务流程比较规范.周期较长.环节较多的流程分析.漏斗图也是常用的B ...
02 【eCharts样式定制系列】玫瑰图、环形饼图、漏斗图自定义各项数据的颜色
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.此次需要定制的 ...
echarts漏斗图
图表效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
ECharts漏斗图(详细示例——满满的注释)
图表效果如下: 代码如下: <!DOCTYPE html> <html><head><meta charset="UTF-8">&l ...
Pyecharts：pyecharts(图文+代码)实战(柱状图/条形图/散点图、漏斗图、仪表盘、折线/面积图、水球图、地图、平行坐标系、饼图、极坐标系、雷达图、词云图)之绘制各种吊炸天的图表
Pyecharts:pyecharts(图文+代码)实战(柱状图/条形图/散点图.漏斗图.仪表盘.折线/面积图.水球图.地图.平行坐标系.饼图.极坐标系.雷达图.词云图)之绘制各种吊炸天的图表目录 ...

3D 漏斗图锥形图表echarts

3D 漏斗图锥形图表echarts相关推荐

最新文章

热门文章

3D 漏斗图 锥形图表echarts

3D 漏斗图 锥形图表echarts相关推荐

最新文章

热门文章

3D 漏斗图锥形图表echarts

3D 漏斗图锥形图表echarts相关推荐