xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/view/echart_analyze/right2.vue
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>