|
@@ -8,9 +8,6 @@
|
|
|
<n-gi>
|
|
|
<n-card class="h-full">
|
|
|
<n-list>
|
|
|
- <template #header>
|
|
|
- <n-checkbox v-model:value="selectedAll" />
|
|
|
- </template>
|
|
|
<template #footer>
|
|
|
<n-space align="center">
|
|
|
<n-button size="small" type="primary">全选择</n-button>
|
|
@@ -65,11 +62,11 @@
|
|
|
</n-space>
|
|
|
<n-card>
|
|
|
<n-scrollbar style="max-height: 600px">
|
|
|
- <highcharts
|
|
|
+ <Chart
|
|
|
ref="chart"
|
|
|
constructor-type="stockChart"
|
|
|
:options="chartOptions"
|
|
|
- ></highcharts>
|
|
|
+ ></Chart>
|
|
|
</n-scrollbar>
|
|
|
</n-card>
|
|
|
</n-space>
|
|
@@ -196,23 +193,30 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { Chart as highcharts } from "highcharts-vue";
|
|
|
+import { Chart } from "highcharts-vue";
|
|
|
|
|
|
const chart = ref(null);
|
|
|
|
|
|
-const onUpdateValues = () => {
|
|
|
- let data = getData(n);
|
|
|
- chart.value.chart.addSeries({
|
|
|
- data,
|
|
|
- lineWidth: 0.5,
|
|
|
- cursor: "pointer",
|
|
|
- events: {
|
|
|
- click() {
|
|
|
- modal.showModal = true;
|
|
|
- modal.title = "详情";
|
|
|
+const onUpdateValues = (values, meta) => {
|
|
|
+ console.log(meta);
|
|
|
+ if (meta.actionType === "check") {
|
|
|
+ let data = getData(n);
|
|
|
+ chart.value.chart.addSeries({
|
|
|
+ id: meta.value,
|
|
|
+ name: meta.value,
|
|
|
+ data,
|
|
|
+ lineWidth: 0.5,
|
|
|
+ cursor: "pointer",
|
|
|
+ events: {
|
|
|
+ click() {
|
|
|
+ modal.showModal = true;
|
|
|
+ modal.title = "详情";
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ chart.value.chart.get(meta.value).remove();
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
const handleDelete = () => {
|
|
@@ -221,14 +225,10 @@ const handleDelete = () => {
|
|
|
|
|
|
const range = ref(null);
|
|
|
|
|
|
-const generalOptions = ["groode", "veli good", "emazing", "lidiculous"].map(
|
|
|
- (v) => ({
|
|
|
- label: v,
|
|
|
- value: v,
|
|
|
- })
|
|
|
-);
|
|
|
-
|
|
|
-const selectedAll = ref(null);
|
|
|
+const generalOptions = ["a", "b", "c", "d", "e", "f", "g"].map((v) => ({
|
|
|
+ label: v,
|
|
|
+ value: v,
|
|
|
+}));
|
|
|
|
|
|
// 表单数据
|
|
|
const formValue = reactive({
|
|
@@ -259,7 +259,7 @@ function getData(n) {
|
|
|
b,
|
|
|
c,
|
|
|
spike;
|
|
|
- for (i = 0; i < n; i = i + 1) {
|
|
|
+ for (let i = 0; i < n; i = i + 1) {
|
|
|
if (i % 100 === 0) {
|
|
|
a = 2 * Math.random();
|
|
|
}
|
|
@@ -279,20 +279,23 @@ function getData(n) {
|
|
|
return arr;
|
|
|
}
|
|
|
let n = 1000000;
|
|
|
-let data = getData(n);
|
|
|
|
|
|
// 图表配置
|
|
|
const chartOptions = {
|
|
|
+ legend: {
|
|
|
+ enabled: true,
|
|
|
+ },
|
|
|
accessibility: {
|
|
|
enabled: false,
|
|
|
},
|
|
|
|
|
|
chart: {
|
|
|
- zoomType: "x",
|
|
|
+ zoomType: "xy",
|
|
|
},
|
|
|
|
|
|
boost: {
|
|
|
useGPUTranslations: true,
|
|
|
+ seriesThreshold: 5,
|
|
|
},
|
|
|
|
|
|
title: {
|
|
@@ -307,19 +310,7 @@ const chartOptions = {
|
|
|
valueDecimals: 2,
|
|
|
},
|
|
|
|
|
|
- series: [
|
|
|
- {
|
|
|
- data,
|
|
|
- lineWidth: 0.5,
|
|
|
- cursor: "pointer",
|
|
|
- events: {
|
|
|
- click() {
|
|
|
- modal.showModal = true;
|
|
|
- modal.title = "详情";
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
+ series: [],
|
|
|
};
|
|
|
|
|
|
// 对话框数据源
|