This commit is contained in:
姚宇浩 2024-06-17 10:43:30 +08:00
parent a06da0ccf7
commit a520321e70
1 changed files with 280 additions and 265 deletions

View File

@ -10,7 +10,6 @@ import * as echarts from "echarts";
const chart = ref(); // DOM const chart = ref(); // DOM
const colors = [ const colors = [
{ {
left: "rgba(234, 162, 57, .16)", left: "rgba(234, 162, 57, .16)",
right: "rgba(234, 162, 57, .6)", right: "rgba(234, 162, 57, .6)",
@ -32,11 +31,13 @@ const colors = [
bottom: "rgba(60, 143, 255, .46)", bottom: "rgba(60, 143, 255, .46)",
front: "rgba(60, 143, 255, .66)", front: "rgba(60, 143, 255, .66)",
}, },
]; ];
const maxList = [90, 90, 90, 90, 90, 90, 90]; const maxList = ref([]);
const valueList = [20, 53, 47, 65, 29, 11, 50]; const valueList = [20, 53, 47, 65, 29, 11, 10];
const data = reactive({
option: {},
Max: 100,
});
// 5: // 5:
//c0:c1,c2:c3 //c0:c1,c2:c3
// -ok rgba(103, 180, 233, 0.04) // -ok rgba(103, 180, 233, 0.04)
@ -145,8 +146,8 @@ echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
echarts.graphic.registerShape("CubeRight_1", CubeRight_1); echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
echarts.graphic.registerShape("CubeTop_1", CubeTop_1); echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1); echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
const getOption = () => {
const option = { data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}:{c1}", formatter: "{b0}:{c1}",
@ -183,7 +184,6 @@ const option = {
color: "#fff", color: "#fff",
fontSize: 16, fontSize: 16,
formatter: function (value) { formatter: function (value) {
return value.length > 3 ? value.slice(0, 2) + "..." : value; return value.length > 3 ? value.slice(0, 2) + "..." : value;
}, },
}, },
@ -216,7 +216,8 @@ const option = {
], ],
yAxis: { yAxis: {
min: 0, min: 0,
max: 100, // max: 200,
max: data.Max,
interval: 20, interval: 20,
type: "value", type: "value",
axisLine: { axisLine: {
@ -314,7 +315,7 @@ const option = {
], ],
}; };
}, },
data: maxList, data: maxList.value,
}, },
{ {
type: "custom", type: "custom",
@ -422,13 +423,27 @@ const option = {
}, },
], ],
}; };
};
onMounted(() => { const setChart = () => {
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
};
const getMaxCeilingValue = (arr) => {
let max = Math.max(...arr);
return Math.ceil(max / 100) * 100;
};
myChart.setOption(option); onBeforeMount(() => {
setTimeout(() => {
data.Max = getMaxCeilingValue(valueList);
maxList.value = valueList.map((item) => data.Max * 0.9);
getOption();
setChart();
}, 600);
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>