117 lines
2.4 KiB
Vue
117 lines
2.4 KiB
Vue
<template>
|
|
<!-- <section> -->
|
|
<div :id="chartId" class="chart-container ">
|
|
<div v-show="dialog && dialog.dataIndex !== -1" class="chart-dialog">
|
|
<p>this is a test</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts/core';
|
|
import { LineChart } from 'echarts/charts';
|
|
import { nextTick } from 'vue';
|
|
|
|
// Import the tooltip, title, rectangular coordinate system, dataset and transform components
|
|
import {
|
|
DatasetComponent,
|
|
DataZoomComponent,
|
|
GridComponent,
|
|
LegendComponent,
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
TransformComponent
|
|
} from 'echarts/components';
|
|
|
|
// Features like Universal Transition and Label Layout
|
|
import { LabelLayout, UniversalTransition } from 'echarts/features';
|
|
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
|
|
|
|
// Register the required components
|
|
echarts.use([
|
|
DatasetComponent,
|
|
DataZoomComponent,
|
|
GridComponent,
|
|
LabelLayout,
|
|
LegendComponent,
|
|
LineChart,
|
|
SVGRenderer,
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
TransformComponent,
|
|
UniversalTransition,
|
|
CanvasRenderer
|
|
]);
|
|
export default {
|
|
props: {
|
|
chartId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
lineChartData: {
|
|
type: Object,
|
|
default: () => { }
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
showDataDialog: false,
|
|
dialog: {
|
|
top: 0,
|
|
left: 0,
|
|
dataIndex: -1,
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
chartContainer() {
|
|
return document.getElementById(this.chartId)
|
|
}
|
|
},
|
|
watch: {
|
|
lineChartData: {
|
|
immediate: true,
|
|
deep: true,
|
|
handler(newVal) {
|
|
if (newVal && newVal.xAxis && newVal.series) {
|
|
this.$nextTick(() => {
|
|
const el = document.getElementById(this.chartId);
|
|
if (el && el.clientWidth > 0 && el.clientHeight > 0) {
|
|
this.initChart();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
this.chart = echarts.init(this.chartContainer, {
|
|
renderer: 'svg',
|
|
useDirtyRect: false,
|
|
decalPattern: true,
|
|
});
|
|
this.chart.setOption(this.lineChartData)
|
|
this.chart.resize();
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 24rem;
|
|
color: #000000;
|
|
}
|
|
|
|
.chart-dialog {
|
|
position: absolute;
|
|
z-index: 10;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
background-color: #ffffff;
|
|
}
|
|
</style> |