CNCEC_APP/pages/index/board/safe/emergencyCard.vue

<template>
	<ChartCard margin="0 0 30rpx 0" title="应急数据">
		<view class="emergencyCard">
			<qiun-data-charts type="column" :opts="opts" :canvas2d="false" :chartData="chartData" @getIndex="handleTap" />
		</view>
	</ChartCard>
</template>

<script setup>
import ChartCard from '@/components/chartCard.vue';
import { ref, onMounted } from 'vue';

const opts = ref({
	padding: [15, 15, 0, 5],
	enableScroll: false,
	legend: { show: false },
	xAxis: {
		disableGrid: true,
		rotateLabel: true,
		fontSize: 10,
		rotateAngle: -30
	},
	yAxis: {
		data: [
			{
				min: 0
			}
		]
	},
	extra: {
		column: {
			type: 'group',
			width: 20,
			activeBgColor: '#000000',
			activeBgOpacity: 0.08
		}
	}
});

const chartData = ref({});

const handleTap = (e) => {
	console.log(e);
};

onMounted(() => {
	let res = {
		categories: ['综合预案', '专项预案', '现场处置\n预案', '演练次数	', '参演人数'],
		series: [
			{
				data: [35, 36, 31, 33, 13],
				color: '#eef82f'
			}
		],
		formatter: function (value, index, series, opts) {
			console.log(value);
			console.log(index);
			console.log(series);
			console.log(opts);
		}
	};
	chartData.value = JSON.parse(JSON.stringify(res));
});
</script>

<style lang="scss">
.emergencyCard {
	width: 100%;
	height: 400rpx;
}
</style>