195 lines
4.0 KiB
Vue
195 lines
4.0 KiB
Vue
<template>
|
|
<custom-echart-bar :chart-data="dataList" height="100%" :option="state.option" />
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, reactive, watch } from 'vue';
|
|
import { isEmpty } from '@/utils';
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
query: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
|
|
// 此处数据需要按照类目的重要程度顺序排列
|
|
let dataList = reactive([]);
|
|
|
|
let titles = reactive([]);
|
|
let values = reactive([]);
|
|
let max = reactive([]);
|
|
let maxData = reactive([]);
|
|
|
|
let barData = reactive([]);
|
|
|
|
const getValue = () => {
|
|
let arr = [];
|
|
for (let i = 0; i < dataList.length; i++) {
|
|
arr.push(dataList[i].value);
|
|
}
|
|
return arr;
|
|
};
|
|
const getName = () => {
|
|
let arr = [];
|
|
for (let i = 0; i < dataList.length; i++) {
|
|
arr.push(dataList[i].name);
|
|
}
|
|
return arr;
|
|
};
|
|
|
|
watch(
|
|
() => props.data,
|
|
(val) => {
|
|
if (!isEmpty(val)) {
|
|
dataList = val;
|
|
titles = getName();
|
|
values = getValue();
|
|
console.log(titles);
|
|
console.log(values);
|
|
max = Math.max(...values);
|
|
maxData = dataList.map((item, index) => {
|
|
return {
|
|
value: [max, index],
|
|
name: titles[index],
|
|
};
|
|
});
|
|
console.log(max);
|
|
console.log(maxData);
|
|
barData = dataList.map((item, index) => {
|
|
return {
|
|
value: [item, index],
|
|
name: titles[index],
|
|
};
|
|
});
|
|
console.log(barData);
|
|
}
|
|
},
|
|
{ deep: true, immediate: true }
|
|
);
|
|
|
|
const state = reactive({
|
|
option: {
|
|
grid: {
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '5%',
|
|
top: '10%',
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
className: 'custom-tooltip-container', // 自定义父容器类名
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
borderColor: '#35d0c0',
|
|
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;
|
|
},
|
|
},
|
|
barStyle: {
|
|
barWidth: 14,
|
|
showBackground: true,
|
|
itemStyle: {
|
|
borderWidth: 14,
|
|
borderRadius: [10, 10, 10, 10], // 设置柱子的圆角半径
|
|
},
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(1,254,253,0)' },
|
|
{ offset: 1, color: '#01fefd' },
|
|
],
|
|
global: false,
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#eee',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
},
|
|
},
|
|
show: false,
|
|
axisLine: {
|
|
show: true,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
// 左侧title
|
|
type: 'category',
|
|
data: [...titles].reverse(),
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
fontSize: '16',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
// 右侧数量
|
|
type: 'category',
|
|
inverse: true,
|
|
offset: 10,
|
|
axisTick: 'none',
|
|
axisLine: 'none',
|
|
show: true,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
fontSize: '16',
|
|
},
|
|
formatter: function (value) {
|
|
let str = '{title|' + value + '吨}';
|
|
return str;
|
|
},
|
|
rich: {
|
|
title: {
|
|
color: '#fff',
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
},
|
|
data: values,
|
|
},
|
|
],
|
|
},
|
|
});
|
|
</script>
|