feat: 完善数据展示首页的左侧图表交互
parent
301da206e9
commit
4480923404
@ -0,0 +1,24 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-08-14 10:33:46
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-08-15 15:18:21
|
||||
* @FilePath: \5G-Web\src\components\Charts\appearanceDailyAlertChart.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-08-14 10:33:46
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-08-15 15:17:39
|
||||
* @FilePath: \5G-Web\src\components\Charts\appearanceDailyAlertChart.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<template>
|
||||
<div
|
||||
class="main-chart"
|
||||
ref="mainChartRef"
|
||||
id="appearanceDailyAlertChart"
|
||||
style="width: 100%; height: 100%"
|
||||
></div>
|
||||
</template>
|
||||
@ -0,0 +1,129 @@
|
||||
<script setup lang="ts">
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const props = defineProps({
|
||||
datas: {
|
||||
type: Array as PropType<Record<string, any>[]>,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
function initChart() {
|
||||
const chartDom = document.getElementById("appearanceDailyDetectionChart");
|
||||
const mainChart = echarts.init(chartDom);
|
||||
const currDatas = [];
|
||||
|
||||
const option = {
|
||||
color: ["red", "#B4C0CC"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b} {a}: {c}",
|
||||
},
|
||||
legend: {
|
||||
data: ["蒸发量"],
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"1日",
|
||||
"2日",
|
||||
"3日",
|
||||
"4日",
|
||||
"5日",
|
||||
"6日",
|
||||
"7日",
|
||||
"8日",
|
||||
"9日",
|
||||
"10日",
|
||||
"11日",
|
||||
"12日",
|
||||
"13日",
|
||||
"14日",
|
||||
"15日",
|
||||
"16日",
|
||||
],
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#B4C0CC",
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
z: 200,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "bar",
|
||||
barWidth: "25%",
|
||||
// barGap: '80%',
|
||||
data: [
|
||||
220, 240, 135, 16, 157, 200, 88, 14, 190, 220, 240, 135, 197, 21, 91,
|
||||
100, 220,
|
||||
],
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// //渲染环形渐变色
|
||||
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#0055FF", // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "#0783FA", // 100% 处的颜色
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
normal: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: 'linear',
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#0055FF',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#0783FA', //底部渐变颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
color: "#dbf0fc",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
mainChart.setOption(option);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="main-chart"
|
||||
ref="mainChartRef"
|
||||
id="appearanceDailyDetectionChart"
|
||||
style="width: 100%; height: 100%"
|
||||
></div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue