多功能echarts柱状图

数据结构:

data = [
    {
        name: '类别1',
        value: 15,
        children: [
            {
                name: '项目1-1',
                value: 87,
                value2: 3.3,
            },
            {
                name: '项目1-2',
                value: 80,
                value2: 2.6,
            },
            {
                name: '项目1-3',
                value: 79,
                value2: 3.8,
            },
        ]
    },
    {
        name: '类别2',
        value: 15,
        children: [
            {
                name: '项目2-1',
                value: 70,
                value2: 1.5,
            },
            {
                name: '项目2-2',
                value: 60,
                value2: 2.1,
            },
            {
                name: '项目2-3',
                value: 65,
                value2: 1.6,
            },
        ]
    },
    {
        name: '类别3',
        value: 25,
        children: [
            {
                name: '项目3-1',
                value: 80,
                value2: 3.1,
            },
            {
                name: '项目3-2',
                value: 68,
                value2: 2.5,
            },
        ]
    },
    {
        name: '类别4',
        value: 25,
        children: [
            {
                name: '项目4-1',
                value: 67,
                value2: 2.7,
            },
            {
                name: '项目4-2',
                value: 70,
                value2: 1.8,
            },
            {
                name: '项目4-3',
                value: 77,
                value2: 2.3,
            },
        ]
    },
    {
        name: '类别5',
        value: 20,
        children: [
            {
                name: '项目5-1',
                value: 50,
                value2: 9.1,
            },
        ]
    },
];
options:
initChart() {
	let myChart = this.$echarts.init(this.$refs.echarts);
	let corlor = ['#4594F9','#7BFBE9','#7D7446','#5E76DE','#4FE4A2'];
	let data = [];
	let nameList = [];
	let markPointData = [];
	let imgList = [
		'image://data:image/png;base64,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',
		"image://data:image/png;base64,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",
		"image://data:image/png;base64,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",
		"image://data:image/png;base64,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",
		"image://data:image/png;base64,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",
	];
	let num = 0;
	this.factorAnalysisList.forEach((item,i) => {
		item.children.forEach(k => {
			data.push({
				name: k.name,
				name2: item.name,
				valueAll: item.value || 0,
				value: (k.value2 * 100).toFixed(2) || 0,
				value2: k.value || 0,
				itemStyle: {
					color: corlor[i]
				}
			});
			nameList.push(k.name)
		});
		let size = 0;
		num += item.children.length;
		let leftNum = num - (item.children.length - 1) / 2 - 1;
		if (item.children.length % 2 !== 1) {
			size = -40
		}
		markPointData.push(
			{
				coord: [leftNum,100],
				type: 'max',
				data: item,
				symbol: imgList[i],
				symbolSize: [54*item.children.length, 20],
				symbolOffset: [size, -10],
				label: {
					show: true,
					distance: 80,
					formatter: () => {
						return '{name|' + item.name + '}' + '\n' + '{name2|' + item.value + '分}'
					},
					rich: {
						name: {
							align: 'center',
							color: corlor[i],
							fontWeight: 'bold',
							marginBottom: '12px',
							fontSize: '12px'
						},
						name2: {
							align: 'center',
							color: '#fff',
							padding: [6,0,50,0],
						},
					}
				}
			},
		);
	});
	let option = {
		tooltip: {
			// trigger: 'axis',
			backgroundColor: 'rgba(7,20,54,0.8)',
			textStyle: {
				color: '#fff',
				lineHeight: 100,
				fontSize: 13,
			},
			borderColor: '#2FD5FF',
			formatter: (params) => {
				let html = "";
				if (params.seriesType === 'bar') { //
					html += `${params.data.name}</br>`;
					html += `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#F1A305"></span> 得分率:${params.data.value || 0}% </br>`;
					html += `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#4BF804"></span> 得分:${params.data.value2 || 0}分</br>`;
					return `<div style="line-height:22px">${html}</div>`;
				} else {
					if (params.data.data) {
						html += `${params.data.data.name}</br>`;
						html += `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#BFC413"></span> 分值:${params.data.data.fullMark || 0}分</br>`;
						html += `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#206366"></span> 得分:${params.data.data.grade || 0}分</br>`;
						html += `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#2391FF"></span> 得分率:${Number((params.data.data.gradeRate * 100).toFixed(2))}%</br>`;
						return `<div style="line-height:22px">${html}</div>`;
					}
				}
			},
			axisPointer: {
				type: 'shadow'
			}
		},
		grid: {
			top: '15%',
			left: '3%',
			right: '3%',
			bottom: '0%',
			containLabel: true
		},
		calculable: true,
		xAxis: [
			{
				type: 'category',
				data: nameList,
				axisLabel: {
					color: '#fff',
					fontSize: 10,
					width: 50,
					interval: 0,
					overflow: 'break',
					lineHeight: 15,
					// rotate: 40,
					margin: 8,
				},
				axisTick: {
					show: false
				},
			}
		],
		yAxis: [
			{
				max: 100,
				splitNumber: 10,
				name: '得分率',
				type: 'value',
				splitLine: {
					show: false,
				},
				// nameGap: 20,
				nameTextStyle: {
					color: '#fff',
					fontSize: 12,
					align: 'right'
				},
				axisLabel: {
					color: '#fff',
					fontSize: 10,
					// interval: 0,
					margin: 10,
					formatter: (params) => {
						return params + '%'
					},
				},
			}
		],
		series: [
			{
				name: '',
				type: 'bar',
				barWidth: '12', // 统计条宽度
				data: data,
				markPoint: {
					emphasis: {
						disabled: false,
					},
					data: markPointData
				},
				label: {
					show: true,
					precision: 1,
					position: 'top',
					color: '#fff',
					fontSize: 12,
					distance: 4,
					formatter: (params) => {
						return params.data.value2
					},
				},
				markLine: {
					symbol: 'none',
					data: [
						{
							yAxis: 60,
							name: '合格',
							lineStyle: {
								color: '#D42B31',
							},
							label: {
								formatter: '合格',
								color: '#fff',
							}
						},
						{
							yAxis: 70,
							name: '一般',
							lineStyle: {
								color: '#E9AB34',
							},
							label: {
								formatter: '一般',
								color: '#fff',
							}
						},
						{
							yAxis: 80,
							name: '良好',
							lineStyle: {
								color: '#378494',
							},
							label: {
								formatter: '良好',
								color: '#fff',
							}
						},
						{
							yAxis: 90,
							name: '优秀',
							lineStyle: {
								color: '#61F941',
							},
							label: {
								formatter: '优秀',
								color: '#fff',
							}
						},
					]
				}
			}
		]
	};
	myChart.clear();
	myChart.setOption(option, true);
},

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值