vue + echarts 漏斗图实现里面数据外面标签漏斗不随值改变而变形

vue echarts 漏斗

最近有一个需求漏斗统计，采用的echarts来实现

需要实现如下效果

最初版本

旁边有描述，里面要有值；

第一步首先在项目里安装echarts;

npm install echarts --save

echarts官网地址

第二步在 main.js 里面引入echarts(可以按需引入,这里就不做按需引入)；

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

第三部在相关页面中使用echarts；

<template><div class='wrap'><div ref="myechart" style="width: 500px; height: 800px"></div></div>
</template>//script
mounted() {//挂载后初始化echartsthis.echartsInit();
},
methods:{echartsInit(){let that = thisvar myChart = that.$echarts.init(that.$refs.myechart);var option = {//  title: {//    text: 'Funnel'//  },tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c}%'},// toolbox: {//   feature: {//     dataView: {//       readOnly: false//     },//     restore: {},//     saveAsImage: {}//   }// },// legend: {//   data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']// },series: [{name: 'Funnel',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: 'left',fontSize:18},labelLine: {length: 10,lineStyle: {width: 1,type: 'solid'}},itemStyle: {borderColor: '#fff',borderWidth: 1},emphasis: {label: {fontSize: 20}},data: [{value: 60,name: 'Visit'},{value: 40,name: 'Inquiry'},{value: 20,name: 'Order'},{value: 80,name: 'Click'},{value: 100,name: 'Show'}]},{name: 'Funnel',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',formatter:'{c}%',color:'#fff'},labelLine: {length: 10,lineStyle: {width: 1,type: 'solid'}},itemStyle: {borderColor: '#fff',borderWidth: 1},emphasis: {label: {fontSize: 20}},data: [{value: 60,name: 'Visit'},{value: 40,name: 'Inquiry'},{value: 20,name: 'Order'},{value: 80,name: 'Click'},{value: 100,name: 'Show'}],z: 100}]}myChart.setOption(option);}
}

实现这个功能实际上是套了两层数据，如果有更好的方法，可以留言

又是漏斗，昨天实现完这个功能后发现了一个问题，如果数值小的情况下，或者相等；漏斗图就会改变，
变成奇奇怪怪具体看下图

所以优化了一下这个漏斗图；不随值的改变去改变他的形状；
最后的效果图如下：

具体看代码
在上面的代码基础上；

option里面需要修改tooltip //提示框
tooltip: {trigger: 'item',formatter(e){return `${e.name} : ${e.data.values}`//将他动态设置 name就是名字 values是我给他新添加的真实数据} },
data里面需要新增一个字段 //values
data: [{value: 80,name: '访客数',values:100},{value: 60,name: '加购人数',values:80},{value: 40,name: '下单人数',values:60},{value: 20,name: '支付人数',values:80},],
// 弹窗 和 真实字段都有了 现在金字塔内也需要显示这个真实数据
label: {show: true,position: 'inside',formatter(e){return `${e.data.values}`},color:'#fff',size:22,textBorderColor:'#fff'},

这样就大功告成了！

最终完整代码

<template><div class='headerBox'><div class='title'>交易漏斗模型</div><div class='flexstart' style="position:relative;width:1200px; height: 400px"><div ref="myechart" style="position:relative;width: 1200px; height: 400px;z-index:2"></div><div class='conversionBoxAsk flexstart coversionBox'><div class='lineBox'><i style='color:#c0c0c0;' class='el-icon-arrow-left icons'></i><div class='lines'></div><div class='line'></div></div><div><div class='titles'>访问加购转化率</div><div class='nums'>53.13%</div></div></div><div class='conversionBoxAdd flexstart coversionBox'><div class='lineBox'><i style='color:#c0c0c0;' class='el-icon-arrow-left icons'></i><div class='lines'></div><div class='line'></div></div><div><div class='titles'>访问加购转化率</div><div class='nums'>53.13%</div></div></div><div class='conversionBoxBuy flexstart coversionBox'><div class='lineBox'><i style='color:#c0c0c0;' class='el-icon-arrow-left icons'></i><div class='lines'></div><div class='line'></div></div><div><div class='titles'>访问加购转化率</div><div class='nums'>53.13%</div></div></div><div class='conversionBoxOut flexstart coversionBox'><div class='lineBox'><i style='color:#c0c0c0;' class='el-icon-arrow-left icons'></i><div class='lines'></div><div class='line'></div></div><div><div class='titles'>访问加购转化率</div><div class='nums'>53.13%</div></div></div></div></div>
</template><script>export default {data() {return {}},mounted() {this.echartsInit();},methods: {echartsInit() {let that = thisvar myChart = that.$echarts.init(that.$refs.myechart);var option = {tooltip: {trigger: 'item',formatter(e){return `${e.name} : ${e.data.values}`} },color: [new that.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#64F0FF'},{offset: 1,color: '#3785FF'}]),new that.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#74C8FF'},{offset: 1,color: '#338BFE'}]),new that.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#09E3E1'},{offset: 1,color: '#06B6B5'}]),new that.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#61E38E'},{offset: 1,color: '#33C550'}]),],series: [{name: 'Funnel',type: 'funnel',left: '10%',top: 60,bottom: 60,width: '41%',min: 0,max: 100,minSize: '0%',maxSize: '0%',sort: 'descending',gap: 10,label: {show: true,position: 'left',fontSize:14},labelLine: {length: 250,lineStyle: {width: 1,type: 'dashed'},},itemStyle: {borderColor: '#fff',borderWidth: 1},emphasis: {label: {fontSize: 24}},data: [{value: 80,name: '访客数',values:100},{value: 60,name: '加购人数',values:80},{value: 40,name: '下单人数',values:60},{value: 20,name: '支付人数',values:80000000},]},{name: 'Funnel',type: 'funnel',left: '10%',top: 60,bottom: 60,width: '41%',min: 0,max: 100,minSize: '0%',maxSize: '100%',sort: 'descending',gap: 10,label: {show: false},itemStyle: {borderColor: '#fff',borderWidth: 1},emphasis: {label: {fontSize: 24}},data: [{value: 80,name: '访客数',values:100},{value: 60,name: '加购人数',values:80},{value: 40,name: '下单人数',values:60},{value: 20,name: '支付人数',values:40},]},{name: 'Funnel',type: 'funnel',left: '10%',top: 60,bottom: 60,width: '41%',min: 0,max: 100,minSize: '0%',maxSize: '100%',sort: 'descending',gap: 10,label: {show: true,position: 'inside',formatter(e){return `${e.data.values}`},color:'#fff',size:22,textBorderColor:'#fff'},labelLine: {length: 10,lineStyle: {width: 1,type: 'solid'}},itemStyle: {borderColor: '#fff',borderWidth: 1},emphasis: {label: {fontSize: 24,color:'#000'}},data: [{value: 80,name: '访客数',values:100},{value: 60,name: '加购人数',values:80},{value: 40,name: '下单人数',values:60},{value: 20,name: '支付人数',values:80000000},],z: 100}]}myChart.setOption(option);this.series = option.series[0]},}}
</script><style lang="less"scoped>.flexstart{display: flex;justify-content: flex-start;align-items: center;}.headerBox {min-width: 1200px;padding: 20px 24px;margin-bottom: 16px;background: #fff;.title{color: #2E3458;font-size: 15px;padding-bottom: 10px;border-bottom: 1px solid #F0F0F0;margin-bottom: 20px;}.fgLine{width: 1px;height: 42px;background: #D8D8D8; margin-right: 50px;}.dataBox {min-width: 180px;margin-right:40px;.titlt{color:#A7A7A7;font-size: 14px;}.line {width: 1px;height: 24px;border-left: 2px solid #1064FF; margin-right: 5px;}.newBox {color: #333333;font-size: 26px;font-weight: bold;}.remark{color: #7d7d7d;font-size: 14px;}.rateBox{padding: 5px;margin-left: 7px;background: #F7F8FA;img{width: 8px;height: 14px;margin-left: 5px;}}}.conversionBoxAsk{position: absolute;left: 42%;top: 25%;.lineBox{position: relative;display: flex;justify-content: flex-start;align-items: flex-end;margin-right: 20px;.lines{width: 15px;height: 2px;border-bottom: 1px dashed #c0c0c0;margin-left: 5px;}.line{width: 30px;height: 60px;border: 1px dashed #c0c0c0;transform: skew(-20deg);border-left: 0;}.icons{position: absolute;bottom: -7px;left: -10px;}}}.conversionBoxAdd{position: absolute;left: 38%;top: 45%;.lineBox{position: relative;display: flex;justify-content: flex-start;align-items: flex-end;margin-right: 20px;.lines{width: 20px;height: 2px;border-bottom: 1px dashed #c0c0c0;}.line{width: 50px;height: 50px;border: 1px dashed #c0c0c0;transform: skew(-20deg);border-left: 0;}.icons{position: absolute;bottom: -7px;left: -10px;}}}.conversionBoxBuy{position: absolute;left: 35%;top: 64%;.lineBox{position: relative;display: flex;justify-content: flex-start;align-items: flex-end;margin-right: 20px;.lines{width: 10px;height: 2px;border-bottom: 1px dashed #c0c0c0;}.line{width: 70px;height: 40px;border: 1px dashed #c0c0c0;transform: skew(-20deg);border-left: 0;}.icons{position: absolute;bottom: -7px;left: -10px;}}}.conversionBoxOut{position: absolute;left: 33%;top: 20%;.lineBox{position: relative;display: flex;justify-content: flex-start;align-items: flex-end;margin-right: 20px;.line{width: 200px;height: 240px;border: 1px dashed #c0c0c0;border-left: 0;transform: skew(-20deg);}.lines{width: 120px;height: 2px;border-bottom: 1px dashed #c0c0c0;}.icons{position: absolute;bottom: -7px;left: -10px;}}}.coversionBox{.titles,.nums{color: #333333;font-size: 14px;}}
}
</style>

最后附上Echarts官方API地址

vue + echarts 漏斗图实现里面数据外面标签漏斗不随值改变而变形相关推荐

Echarts 折线图对接后台数据
项目场景:Echarts 折线图对接后台数据想要使用Echarts折线图来对接后台返回的数据,因为第一次使用这个图表库还不是很熟练,在对接数据时遇到了一些小问题问题描述后台返回的数据看起来也没什 ...
R语言使用epiDisplay包shapiro.qqnorm函数执行Shapiro-Wilk检验并可视化QQ图、整合假设检验和可视化结果判断数据是否符合正态分布、pch参数在可视化图中显示数据点标签
R语言使用epiDisplay包的shapiro.qqnorm函数执行Shapiro-Wilk检验并可视化QQ图.整合假设检验和可视化结果判断数据是否符合正态分布.配置pch参数在可视化图中显示数据点 ...
02 【eCharts样式定制系列】玫瑰图、环形饼图、漏斗图自定义各项数据的颜色
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.此次需要定制的 ...
Vue绘制折线图并渲染数据
本文讲解vue项目中使用ECharts快速绘制折线图,并将服务器传来的数据渲染上去,提供源代码,可以直接复制粘贴使用. 效果展示: Vue 通常使用ECharts 生成图表,官网地址: Apache ...
Echarts折线图获取数据库数据展示
Echarts折线图获取mysql中的数据展示需求: 1 设计思路: 2 数据表设计 3 需求分析 4 后端接口开发 5 前端数据展示需求: 将数据库活动表的4种信息状态以 echarts表格展 ...
vue echarts 水球图多个水球图并存配置
echarts 水球图下面介绍为vue-cli开发环境下 npm下载 npm install echarts --save npm install echarts-liquidfill --save ...
vue echarts 多个图表后台数据填充到页面，并自适应
<el-tab-pane v-for="(statret, index) in STATFIGURELIST" :key="index" v-bind:l ...
vue echarts 折线图多Y轴显示，加动态配置Y轴颜色
1.效果图 2.引入依赖 npm install echarts --save 3.在mian.js中引入 import * as echarts from 'echarts'; Vue.protot ...
vue echarts 沙漏图（金字塔）实现
效果图使用插件echarts 类型pictorialBar:象形柱图本文只讲述关键代码第一步.准备三张图第二步. 对data 数据位置和大小进行微调需微调的属性symbolSize,s ...

vue + echarts 漏斗图实现里面数据外面标签漏斗不随值改变而变形

vue echarts 漏斗

vue + echarts 漏斗图实现里面数据外面标签漏斗不随值改变而变形相关推荐

最新文章

热门文章

vue + echarts 漏斗图 实现里面数据 外面标签 漏斗不随值改变而变形

vue echarts 漏斗

vue + echarts 漏斗图 实现里面数据 外面标签 漏斗不随值改变而变形相关推荐

最新文章

热门文章

vue + echarts 漏斗图实现里面数据外面标签漏斗不随值改变而变形

vue + echarts 漏斗图实现里面数据外面标签漏斗不随值改变而变形相关推荐