Echarts在线免费图表

 
            /*********************** 饼图构造相关 ***********************/
// 饼图配色（自定义）
const chartColorList = ["#5470c6", "#91cc75", "#ffdc60", "#ee6666", "#73c0de"];
// 饼图测试数据
let testData = [
	{value: 1048, name: 'Search Engine'},
	{value: 735, name: 'Direct'},
	{value: 580, name: 'Email'},
	{value: 484, name: 'Union Ads'},
	{value: 300, name: 'Video Ads'}
];

// 由于这套饼图中除了“大饼”外的饼图构造非常相似（只有“大饼”高亮时显示中间的标签）
// 可以用一个数组存储其中不相同的配置，然后遍历配置数组自动生成所有serie
const pieSeriesSettings = [
	{
		name: '内部小饼', // 饼图名称
		radius: ['46%', '53%'], // 饼图内径/外径尺寸
		opacity: 0.56, // 普通状态下的透明度
		empyOpacity: 0.6, // 高亮状态下的透明度
		scaleSize: 14, // 高亮状态下图形放大的尺寸
		isBorder: false // 是否是外圈（外圈只有一条数据，否则与“大饼”数据相同）
	},
	{
		name: '外圈', radius: ['80%', '82%'], opacity: 0.6, empyOpacity: 0.6, scaleSize: 10, isBorder: true
	},
	{
		name: '大饼阴影1', radius: ['50%', '65%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影2', radius: ['51%', '66%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影3', radius: ['52%', '67%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影4', radius: ['53%', '68%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影5', radius: ['54%', '69%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影6', radius: ['55%', '70%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	}
];

let serieList = [];
serieList.push({
	name: '大饼',
	z: 10, // 放在最上层
	type: 'pie',
	radius: ['56%', '63%'], // 通过设置内径与外径将饼图变为圆环饼图
	itemStyle: {
		borderRadius: 40 // 设置圆环的圆角弧度
	},
	emphasis: { // 设置高亮时显示标签
		label: {
			show: true
		},
		scale: true, // 设置高亮时放大图形
		scaleSize: 18
	},
	label: { // 设置图形标签样式
		show: false, // 未高亮时不显示标签，否则高亮时显示的标签会与静态的标签重叠
		position: 'center',
		// 设置标签展示内容,其中{d}、{b}为echarts标签内容格式器
		formatter: '{d_style|{d}}{per_style|%}\n{b_style|{b}}',
		// 为标签内容指定样式，只能设置series-pie.label支持的样式
		rich: {
			d_style: {
				fontSize: 80
			},
			per_style: {
				fontSize: 60
			},
			b_style: {
				fontSize: 42
			}
		}
	},
	data: testData
});

for (let pieSetting of pieSeriesSettings) {
	serieList.push({
		name: pieSetting.name,
		z: 1, // 放在最下层
		type: 'pie',
		radius: pieSetting.radius, // 通过设置内径与外径将饼图变为圆环饼图
		itemStyle: {
			color: pieSetting.isBorder ? '#fff' : null,
			borderRadius: 40, // 设置圆环的圆角弧度
			opacity: pieSetting.opacity // 设置普通状态下圆环的透明度
		},
		emphasis: { // 设置高亮时不显示标签
			disabled: pieSetting.isBorder, // 外圈需关闭高亮效果
			itemStyle: {
				opacity: pieSetting.empyOpacity // 设置高亮状态下圆环的透明度
			},
			label: {
				show: false
			},
			scale: !pieSetting.isBorder, // 外圈需关闭高亮放大效果
			scaleSize: pieSetting.scaleSize
		},
		label: { // 设置图形标签样式
			show: false // 未高亮时不显示标签，否则高亮时显示的标签会与静态的标签重叠
		},
		data: pieSetting.isBorder ? [{value: 1, name: 'border'}] : testData
	});
}

option = {
	backgroundColor: "#000002",
	color: chartColorList, // 设置饼图全局配色
	tooltip: { // 设置悬停标签
		trigger: "item",
		formatter: params => {
			// console.log(params)
			if(params.seriesName === "大饼") { // 只有在大饼上悬停时显示提示框
				return `${params.name}<br/>数量：${params.value}<br/>占比：${params.percent}`
			} else {
				return ''
			}
		}
	},
	series: serieList
};
console.log(option); // 可以打印出具体的option便于理解其结构

/*********************** 饼图轮播相关 ***********************/
let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
let changePieInterval = setInterval(selectPie, 1000); // 设置自动切换高亮图形的定时器

function highlightPie() { // 取消所有高亮并高亮当前图形
	// 显示当前图形的tooltip
	myChart.dispatchAction({ // 隐藏所有tooltip
		type: 'hideTip'
	})
	myChart.dispatchAction({ // 显示当前图形的tooltip
		type: 'showTip',
		seriesIndex: 0, // 大饼在序列列表第一个
		dataIndex: currentIndex
	})

	for (let optIdx in option.series) {
		let opt = option.series[optIdx].data;
		if (opt.length < 2) // 外圈（只有一条数据）
			continue;

		// 遍历饼图数据，取消所有图形的高亮效果, 高亮当前图形
		for (let idx in opt)
			myChart.dispatchAction({
				type: idx != currentIndex ? 'downplay' : 'highlight',
				seriesIndex: optIdx,
				dataIndex: idx
			});
	}
}

myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
	if (params.seriesName === "外圈") // 鼠标悬浮到外圈时，不进行交互
		return;
	if(changePieInterval)
		clearInterval(changePieInterval);
	currentIndex = params.dataIndex;
	highlightPie();
});

myChart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
	if(changePieInterval)
		clearInterval(changePieInterval);
	changePieInterval = setInterval(selectPie, 1000);
});

function selectPie() { // 高亮效果切换到下一个图形
	var dataLen = testData.length;
	currentIndex = (currentIndex + 1) % dataLen;
	highlightPie();
}