zaibei_charts/test/funnel/ChartFunnel4/index.js

import ChartFunnel from "../../../src/chart/funnel/ChartFunnel4/ChartFunnel4";
let chart=new ChartFunnel(document.getElementsByClassName('main')[0],{});
//
// console.log(chart);
//
window.addEventListener("resize", function () {
    chart.resize();
});
//chart.dispose();
//console.log(document.getElementsByClassName('main')[0].children)
//window.addEventListener("click", function () {
//  chart.setOption(option)
//});
const defaultOption = {
	color: ['#3f90ff','#3fffa7','#ffd657','#fa8444','#ff4e4e'],
	title: {},
	tooltip: {
		titleColor: '#fff',
		bgStyle: {
			borderColor: '#ccc',
			borderWidth: 0,
			backgroundColor: 'rgba(0,0,0,0.8)',
		}
	},
	legend: {
		show: true,
		left: "center",
		top: 'bottom',
		orient: 'horizontal',
		itemWidth: 12,
		itemGap: 35,
	},
	funnel: {
		type: 'funnel',
		left: '10%',
		top: '20%',
		bottom: '20%',
		width: '60%',
		// min: 0,
		// max: 100,
		minSize: '0%',
		maxSize: '100%',
		// gap: 0,
		percentLabel:{
			show: true,
			fontSize: 16,
			fontWeight: 'normal',
			color: '#ffffff'
		},
		changePercent:{
			show:true,
			distance:40,
			fontSize: 16,
			fontWeight: 'normal',
			color: '#bdbdbd'
		},
	},
	//  calculable: true,
	series: [ {
        value: 5000,
        name: '浏览网站'
    },{
        value: 6000,
        name: '放入购物车'
    },{
        value: 25000,
        name: '生成订单'
    },{
        value: 15000,
        name: '支付订单'
    },  {
        value: 8000,
        name: '完成交易'
	},{
        value: 5500,
        name: '生成订单'
	}
],
	bg:{
        backgroundColor:"#000000"
    },
};
const defaultOption2 = {
	color: ['#3f90ff','#3fffa7','#ffd657','#fa8444','#ff4e4e'],
	title: {},
	tooltip: {
		titleColor: '#fff',
		bgStyle: {
			borderColor: '#ccc',
			borderWidth: 0,
			backgroundColor: 'rgba(0,0,0,0.8)',
		}
	},
	legend: {
		show: true,
		left: "center",
		top: 'bottom',
		orient: 'horizontal',
		itemWidth: 12,
		itemGap: 35,
	},
	funnel: {
		type: 'funnel',
		left: '10%',
		top: '20%',
		bottom: '20%',
		width: '60%',
		// min: 0,
		// max: 100,
		minSize: '0%',
		maxSize: '100%',
		// gap: 0,
		percentLabel:{
			show: true,
			fontSize: 16,
			fontWeight: 'normal',
			color: '#ffffff'
		},
		changePercent:{
			show:true,
			distance:40,
			fontSize: 16,
			fontWeight: 'normal',
			color: '#bdbdbd'
		},
	},
	//  calculable: true,
	series: [ {
        value: 8000,
        name: '浏览网站'
    },{
        value: 35000,
        name: '放入购物车'
    },{
        value: 25000,
        name: '生成订单'
    } ],
	bg:{
        backgroundColor:"#000000"
    },
};
// setTimeout(()=>{
//     chart.setOption(defaultOption)
// },2000)
// setTimeout(()=>{
//     chart.setOption(defaultOption2)
// },3000)