政务大屏产出品管理 大屏修改优化
This commit is contained in:
parent
b653e6a28b
commit
93f13af072
@ -14,16 +14,16 @@ const data = ref([
|
||||
value: 10.8,
|
||||
itemStyle: { color: '#5b7bc7', opacity: 0.8 },
|
||||
},
|
||||
{
|
||||
name: ' 合作社',
|
||||
value: 18.4,
|
||||
itemStyle: { color: '#8ed0f3', opacity: 0.8 },
|
||||
},
|
||||
{
|
||||
name: ' 村集体',
|
||||
value: 14.3,
|
||||
itemStyle: { color: '#65be97', opacity: 0.8 },
|
||||
},
|
||||
// {
|
||||
// name: ' 合作社',
|
||||
// value: 18.4,
|
||||
// itemStyle: { color: '#8ed0f3', opacity: 0.8 },
|
||||
// },
|
||||
// {
|
||||
// name: ' 村集体',
|
||||
// value: 14.3,
|
||||
// itemStyle: { color: '#65be97', opacity: 0.8 },
|
||||
// },
|
||||
{
|
||||
name: ' 个体',
|
||||
value: 23.7,
|
||||
|
||||
@ -23,7 +23,7 @@ import { ref, reactive } from 'vue';
|
||||
|
||||
const unit = ref('家');
|
||||
const list = reactive([
|
||||
{ title: '年总产值', value: 3.49, color: '#01FEFD', unit: '亿元' },
|
||||
{ title: '年总产值', value: 3.49, color: '#01FEFD', unit: '万元' },
|
||||
{ title: '年人均收入', value: 6.98, color: '#FEF906', unit: '万元' },
|
||||
]);
|
||||
|
||||
|
||||
@ -38,7 +38,6 @@ const state = reactive({
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
borderColor: '#35d0c0',
|
||||
formatter: (data) => {
|
||||
console.log('data', data);
|
||||
const params = data[0];
|
||||
let str = `<div class="custom-echarts-tips">
|
||||
<span>${params.name}</span><br/>
|
||||
|
||||
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, watch } from 'vue';
|
||||
import { isEmpty } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
query: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
data: [],
|
||||
option: {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
top: '10%',
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.6);',
|
||||
borderColor: '#35d0c0',
|
||||
borderRadius: 8,
|
||||
formatter: (data) => {
|
||||
const params = data[0];
|
||||
let str = `<div class="custom-echarts-tips" >
|
||||
<span>${params.name}</span><br/>
|
||||
<span>${params.marker} ${params.data} 万元</span>
|
||||
</div>`;
|
||||
return str;
|
||||
},
|
||||
extraCssText: 'backdrop-filter: blur(8px);',
|
||||
},
|
||||
barStyle: {
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
borderWidth: 10,
|
||||
borderRadius: [8, 8, 8, 8], // 设置柱子的圆角半径
|
||||
},
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#35D0C0' },
|
||||
{ offset: 1, color: 'rgba(53,208,192,0)' },
|
||||
],
|
||||
global: false,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#E5E5E5',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#424242',
|
||||
},
|
||||
},
|
||||
show: false,
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
// barWidth: '40%', // 设置柱的宽度
|
||||
// barMinHeight: 2, // 设置柱的最小高度
|
||||
// barGap: '20%', // 设置柱之间的间隙
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
state.data = val;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.query,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
loadData(val);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
const loadData = (val) => {
|
||||
if (val === 'all') {
|
||||
state.data = props.data;
|
||||
state.option.yAxis.data = ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'];
|
||||
} else {
|
||||
for (let i in props.data) {
|
||||
if (val === props.data[i].name) {
|
||||
state.data = [];
|
||||
state.data.push(props.data[i]);
|
||||
state.option.yAxis.data = [props.data[i].name];
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(val);
|
||||
};
|
||||
</script>
|
||||
@ -10,21 +10,19 @@
|
||||
:value-field="'value'"
|
||||
:down-width="''"
|
||||
:options="[
|
||||
{ label: '全县', value: '530926' },
|
||||
{ label: '耿马镇', value: '42611' },
|
||||
{ label: '勐撒镇', value: '9259' },
|
||||
{ label: '勐永镇', value: '17787' },
|
||||
{ label: '孟定镇', value: '42610' },
|
||||
{ label: '勐简乡', value: '17788' },
|
||||
{ label: '贺派乡', value: '40161' },
|
||||
{ label: '四排山乡', value: '40163' },
|
||||
{ label: '大兴乡', value: '40159' },
|
||||
{ label: '全县', value: 'all' },
|
||||
{ label: '耿马镇', value: '耿马镇' },
|
||||
{ label: '勐撒镇', value: '勐撒镇' },
|
||||
{ label: '勐永镇', value: '勐永镇' },
|
||||
{ label: '孟定镇', value: '孟定镇' },
|
||||
{ label: '大兴乡', value: '大兴乡' },
|
||||
]"
|
||||
:is-down="true"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<template #back>
|
||||
<entitiesCategoryCharts ref="oneRef" :data="state.data.one" :query="state.queryCode"></entitiesCategoryCharts>
|
||||
<value-charts :data="state.data.one" :query="state.queryCode"></value-charts>
|
||||
<!-- <entitiesCategoryCharts ref="oneRef" :data="state.data.one" :query="state.queryCode"></entitiesCategoryCharts>-->
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
@ -98,6 +96,7 @@ import entitiesStatistics from './components/entitiesStatistics.vue';
|
||||
import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
|
||||
import entitiesMap from './components/entitiesMap.vue';
|
||||
import { sleep } from '@/utils';
|
||||
import ValueCharts from '@/views/entities/components/valueCharts.vue';
|
||||
|
||||
const oneRef = ref(null);
|
||||
const thirdRef = ref(null);
|
||||
@ -113,12 +112,11 @@ const loadData = async () => {
|
||||
await sleep(500);
|
||||
state.data = {
|
||||
one: [
|
||||
{ value: 5, name: '2020' },
|
||||
{ value: 36, name: '2021' },
|
||||
{ value: 70, name: '2022' },
|
||||
{ value: 56, name: '2023' },
|
||||
{ value: 70, name: '2024' },
|
||||
{ value: 20, name: '2025' },
|
||||
{ value: 3500, name: '耿马镇' },
|
||||
{ value: 6000, name: '勐撒镇' },
|
||||
{ value: 4000, name: '勐永镇' },
|
||||
{ value: 8000, name: '孟定镇' },
|
||||
{ value: 12000, name: '大兴乡' },
|
||||
],
|
||||
third: [
|
||||
{ value: 98, value1: 88, name: '耿马镇' },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user