关于Echarts漏斗图

实现的效果：

主要实现了漏斗图内和外侧同时能显示内容。

代码：

<template><div><div ref="chart" style="width: 100%; height: 260px"></div></div>
</template><script>
import * as echarts from 'echarts'export default {name: 'Funnel',data () {return{}},mounted () {this.echartsInit()},methods: {echartsInit () {const chartDom = this.$refs.chartconst myChart = echarts.init(chartDom)const option = {tooltip: {trigger: 'item',formatter: '{b} : {c}%'},labelLine: {show:true},series: [{name: '漏斗',  //名字type: 'funnel', //echarts类型top: 0, bottom: 0,left:-60,// 距左侧的距离width: '90%',  //宽height:'100%',  //高min: 0,  //max: 100,minSize: '20%', //漏斗最小值的宽度maxSize: '60%', //漏斗最大值的宽度sort: 'descending', // 金字塔形:'ascending',  漏斗图形:'descending'gap: 0,  //图例之间的间隔color: ['rgba(255,188,71,1)', 'rgba(21,194,195,1)', 'rgba(111,209,136,1)', 'rgba(47,142,224,1)'],  //每一层的颜色label: {//漏斗外部显示的position: 'right',  //位置formatter: '{b}({c}%)', //显示的内容fontStyle: 'normal',fontSize:16,textBorderColor:'#000',},         emphasis: {  //鼠标移入数据项的tooltip设置show: false},data: [{ value: 10, name: '53,141' },{ value: 30, name: '96,310' },{ value: 40, name: '816,234' },{ value: 100, name: '3,123,456' },]},{name: '漏斗',type: 'funnel',top: 0,bottom: 0,left:-60,width: '90%',height:'100%',min: 0,max: 100,minSize: '20%',maxSize: '60%',sort: 'descending',gap: 0,color: ['rgba(255,188,71,1)','rgba(21,194,195,1)','rgba(111,209,136,1)','rgba(47,142,224,1)'], label: {  //设置字体放在漏斗内部position: 'inside',formatter: '{b}',color: '#fff' },emphasis: {label: {fontSize: 14   //鼠标移入字体变大 显示toolList}},itemStyle: { opacity: 1,//图形透明度borderColor: '#fff', //图形边框颜色borderWidth: 0//图形边框宽度},data: [   //我的数据是根据需求自己设置的name{ value: 10, name: '用户1' },{ value: 30, name: '用户2' },{ value: 40, name: '用户3' },{ value: 100, name: '用户4' },],z: 100}]};option && myChart.setOption(option);}}
}
</script>

关于Echarts漏斗图相关推荐

Echarts 漏斗图
实例: 本节任务任务一:漏斗图或金字塔图任务描述漏斗图(funnel)是倒三角形的条形图,金字塔是正三角形的条形图,这两者适用于业务流程比较规范.周期较长.环节较多的流程分析.漏斗图也是常用的B ...
echarts漏斗图自定义漏斗颜色、粗细、大小、间隔缝隙
目录 1.官网找样例 2.初步改造示例,有个雏形 3.细节改造和优化 4.全部代码 5.原始效果和完成效果对比碎碎念: UI效果图是这样的看到之后我一脸懵,按照常规阶梯思路,我又开始了度娘之旅. ...
echarts漏斗图
图表效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
vue + echarts 漏斗图实现里面数据外面标签漏斗不随值改变而变形
vue echarts 漏斗最近有一个需求漏斗统计,采用的echarts来实现需要实现如下效果最初版本旁边有描述,里面要有值: 第一步首先在项目里安装echarts; npm install ...
ECharts漏斗图(详细示例——满满的注释)
图表效果如下: 代码如下: <!DOCTYPE html> <html><head><meta charset="UTF-8">&l ...
html页面漏斗图,echarts 漏斗图示例
option = { color: ['#298DFF', '#2EC25B', '#FBD337'], backgroundColor: '#FFFFFF', barWidth: 8, title: ...
echarts 漏斗图
option = {title: {text: '漏斗图',subtext: '纯属虚构'},tooltip: {trigger: 'item',formatter: "{a} <br ...
echarts漏斗图配置
option = { color : [ 'rgba(255, 69, 0, 0.5)', 'rgba(255, 150, 0, 0.5)', 'rgba(255, 200, 0, 0.5)', 'r ...
echarts 漏斗图funnel
1.配置datadata:[{name:'xx',value:n,...}]2.配置seriesseries:[{min:n, 指定数据的最小值max:n, 指定数据的最大值minSize:'0%', ...

关于Echarts漏斗图

关于Echarts漏斗图相关推荐

最新文章

热门文章