echarts 漏斗图

echarts 漏斗图_第1张图片

option = {
    title: {
        text: '漏斗图',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} 
{b} : {c}%" }, toolbox: { feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, legend: { data: ['展现','点击','访问','咨询','订单'] }, calculable: true, series: [ { name:'漏斗图', type:'funnel', left: '10%', top: 60, //x2: 80, bottom: 60, width: '80%', // height: {totalHeight} - y - y2, min: 0, max: 100, // minSize: '0%', // maxSize: '100%', minSize: '20%', //每一块的最小宽度 maxSize:'90%', //每一块的最大快递 一次去除掉尖角 sort: 'descending', gap: 10, //每一块之间的间隔 // label: { //设置每一块的名字是显示在图里面还是外面 // show: true, // position: 'inside' // }, labelLine: { length: 100, //设置每一块的名字前面的线的长度 lineStyle: { width: 1, //设置每一块的名字前面的线的宽度 type: 'solid' //设置每一块的名字前面的线的类型 } }, itemStyle: { normal: { borderColor: '#fff', //每一块的边框颜色 borderWidth: 0, //每一块边框的宽度 shadowBlur: 50, //整个外面的阴影厚度 shadowOffsetX: 0, shadowOffsetY: 50, //每一块的x轴的阴影 shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影颜色 } }, emphasis: { label: { fontSize: 20 } }, data: [ {value: 60, name: '访问',barHeight: 10,}, {value: 40, name: '咨询'}, {value: 20, name: '订单'}, {value: 80, name: '点击'}, {value: 100, name: '展现'} ] } ] };

你可能感兴趣的:(vue,echarts)