Web/daimp-front
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

xiabin

Browse Source
This commit is contained in:
13713575202 2025-05-22 15:37:05 +08:00
parent 79ac695e43
commit 11c56eabe4
2 changed files with 66 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue
View File

@ -43,34 +43,34 @@ export default {
const chartRef = ref(null);
const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
let option = reactive({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
backgroundColor: '#333',
},
},
},
legend: {
top: 30,
},
grid: {
top: 60,
},
xAxis: {
type: 'category',
data: [],
},
yAxis: {
type: 'value',
},
series: [],
isHorizontal: {
type: Boolean,
default: false,
},
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow',
// label: {
// show: true,
// backgroundColor: '#333',
// },
// },
// },
// legend: {
// top: 30,
// },
// grid: {
// top: 60,
// },
// xAxis: {
// type: 'category',
// data: [],
// },
// yAxis: {
// type: 'value',
// },
// series: [],
// isHorizontal: {
// type: Boolean,
// default: false,
// },
});
watchEffect(() => {
@ -78,38 +78,40 @@ export default {
});
function initCharts() {
if (props.option) {
if (props.option && props.option.grid.top == '15%') {
Object.assign(option, cloneDeep(props.option));
}
let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
let seriesData = [];
typeArr.forEach((type, index) => {
const barStyle = props.option?.barStyle ?? {};
let obj = { name: type, type: props.type, ...barStyle };
let data = [];
xAxisData.forEach((x) => {
let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
if (dataArr && dataArr.length > 0) {
data.push(dataArr[0].value);
} else {
data.push(null);
}
});
obj['data'] = data;
if (props.option?.color) {
obj.color = props.option?.color[index];
}
if (props.option.series && props.option.series.length > 0) {
obj.stack = props.option.series[index].stack ? props.option.series[index].stack : '';
}
seriesData.push(obj);
});
option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
if (props.isHorizontal) {
option.yAxis.data = xAxisData;
} else {
option.xAxis.data = [];
Object.assign(option, cloneDeep(props.option));
let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
let seriesData = [];
typeArr.forEach((type, index) => {
const barStyle = props.option?.barStyle ?? {};
let obj = { name: type, type: props.type, ...barStyle };
let data = [];
xAxisData.forEach((x) => {
let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
if (dataArr && dataArr.length > 0) {
data.push(dataArr[0].value);
} else {
data.push(null);
}
});
obj['data'] = data;
if (props.option?.color) {
obj.color = props.option?.color[index];
}
if (props.option.series && props.option.series.length > 0) {
obj.stack = props.option.series[index].stack ? props.option.series[index].stack : '';
}
seriesData.push(obj);
});
option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
if (props.isHorizontal) {
option.yAxis.data = xAxisData;
} else {
option.xAxis.data = [];
}
}
console.log(option);
setOptions(option);

7
new-digital-agriculture-screen/src/views/business/components/businessThere.vue
View File

@ -72,6 +72,11 @@ const series = types.map((type, idx) => {
borderRadius: 4,
formatter: '{@value}万亩',
z: 100,
normal: {
show: true,
position: 'inside',
formatter: '{c}%',
},
},
emphasis: {
focus: 'series',
@ -112,7 +117,7 @@ const state = reactive({
},
yAxis: {
type: 'category', // 分类轴（横向条形图的标签）
data: towns, // 分类数据放在 yAxis
data: [120, 230, 152, 136, 145, 17], // 分类数据放在 yAxis
axisTick: { show: false }, // 隐藏刻度线
},
color: colors,