121 lines
3.5 KiB
Vue
121 lines
3.5 KiB
Vue
<template>
|
|
<custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" :is-series="true" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from 'vue';
|
|
|
|
const rawData = [
|
|
{ name: '勐撒镇', type: '种子农药', value: 15 },
|
|
{ name: '勐撒镇', type: '化肥', value: 30 },
|
|
{ name: '勐撒镇', type: '农药', value: 22 },
|
|
{ name: '勐永镇', type: '种子农药', value: 18 },
|
|
{ name: '勐永镇', type: '化肥', value: 28 },
|
|
{ name: '勐永镇', type: '农药', value: 20 },
|
|
{ name: '孟定镇', type: '种子农药', value: 21 },
|
|
{ name: '孟定镇', type: '化肥', value: 25 },
|
|
{ name: '孟定镇', type: '农药', value: 24 },
|
|
{ name: '勐简乡', type: '种子农药', value: 13 },
|
|
{ name: '勐简乡', type: '化肥', value: 20 },
|
|
{ name: '勐简乡', type: '农药', value: 15 },
|
|
{ name: '贺派乡', type: '种子农药', value: 17 },
|
|
{ name: '贺派乡', type: '化肥', value: 18 },
|
|
{ name: '贺派乡', type: '农药', value: 16 },
|
|
{ name: '芒洪乡', type: '种子农药', value: 14 },
|
|
{ name: '芒洪乡', type: '化肥', value: 23 },
|
|
{ name: '芒洪乡', type: '农药', value: 21 },
|
|
{ name: '大兴乡', type: '种子农药', value: 12 },
|
|
{ name: '大兴乡', type: '化肥', value: 17 },
|
|
{ name: '大兴乡', type: '农药', value: 14 },
|
|
{ name: '耿马镇', type: '种子农药', value: 19 },
|
|
{ name: '耿马镇', type: '化肥', value: 26 },
|
|
{ name: '耿马镇', type: '农药', value: 23 },
|
|
];
|
|
|
|
const towns = ['勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '芒洪乡', '大兴乡', '耿马镇'];
|
|
const types = ['种子农药', '化肥', '农药'];
|
|
const colors = ['#15EB90', '#F3F70F', '#08DFE4'];
|
|
|
|
const series = types.map((type, idx) => {
|
|
return {
|
|
name: type,
|
|
type: 'bar',
|
|
barWidth: 16,
|
|
stack: 'total',
|
|
itemStyle: {
|
|
color: colors[idx],
|
|
barBorderRadius: 8,
|
|
shadowColor: colors[idx],
|
|
// shadowBlur: 8,
|
|
shadowOffsetY: -16,
|
|
},
|
|
z: 10 - idx,
|
|
data: towns.map((town) => {
|
|
const found = rawData.find((d) => d.name === town && d.type === type);
|
|
return found ? found.value : 0;
|
|
}),
|
|
};
|
|
});
|
|
|
|
const state = reactive({
|
|
data: rawData,
|
|
option: {
|
|
legend: {
|
|
show: false,
|
|
},
|
|
grid: {
|
|
top: '20%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '5%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisLine: {
|
|
lineStyle: {
|
|
opacity: 1,
|
|
width: 0,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
margin: 8,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
interval: 0,
|
|
},
|
|
data: towns,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
color: colors,
|
|
series,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
backgroundColor: 'rgba(0,0,0,0.6);',
|
|
borderColor: '#35d0c0',
|
|
borderRadius: 8,
|
|
formatter: (params) => `
|
|
<div style="font-weight:700;margin-bottom:5px;color:#fff;font-size: 16px;">${params[0].name}</div>
|
|
${params
|
|
.map(
|
|
(p) => `
|
|
<div style="display:flex;align-items:center;margin:3px 0;color:#fff">
|
|
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${p.color};margin-right:6px;color:#fff"></span>
|
|
${p.seriesName}: <span style="font-weight:bold;margin-left:5px;color:#fff">${p.value} 吨</span>
|
|
</div>
|
|
`
|
|
)
|
|
.join('')}
|
|
`,
|
|
extraCssText: 'backdrop-filter: blur(8px);',
|
|
},
|
|
},
|
|
});
|
|
</script>
|