1+ <template >
2+ <div :style =" `width:${width}px;height:${height}px;`" :id =" container" class =" OSChart" div >
3+
4+ </template >
5+
6+ <script lang="ts" setup>
7+ import * as echarts from ' echarts/core'
8+ import {
9+ ToolboxComponent ,
10+ ToolboxComponentOption ,
11+ TooltipComponent ,
12+ TooltipComponentOption ,
13+ GridComponent ,
14+ GridComponentOption ,
15+ DataZoomComponent ,
16+ DataZoomComponentOption
17+ } from ' echarts/components'
18+ import { LineChart , LineSeriesOption } from ' echarts/charts'
19+ import { UniversalTransition } from ' echarts/features'
20+ import { CanvasRenderer } from ' echarts/renderers'
21+ import { onMounted } from ' vue'
22+
23+ echarts .use ([
24+ ToolboxComponent ,
25+ TooltipComponent ,
26+ GridComponent ,
27+ DataZoomComponent ,
28+ LineChart ,
29+ CanvasRenderer ,
30+ UniversalTransition
31+ ]);
32+
33+ type EChartsOption = echarts .ComposeOption <
34+ | ToolboxComponentOption
35+ | TooltipComponentOption
36+ | GridComponentOption
37+ | DataZoomComponentOption
38+ | LineSeriesOption
39+ >;
40+ // 2.定义传入的参数
41+ const = defineProps ({
42+ width: {
43+ type: String ,
44+ default: " 550"
45+ },
46+ height: {
47+ type: String ,
48+ default: " 350"
49+ },
50+ // 首次加载
51+ isFirst: {
52+ type: Boolean ,
53+ default: false ,
54+ },
55+ // 组件唯一值
56+ container: {
57+ type: String ,
58+ default: " WaveGenChart"
59+ },
60+ });
61+
62+ var option: EChartsOption ;
63+
64+ function func(x : number ) {
65+ x /= 10 ;
66+ return Math .sin (x ) * 3.3 ;
67+ }
68+
69+ function generateData() {
70+ let data = [];
71+ for (let i = 0 ; i <= 300 ; i += 1 ) {
72+ data .push ([i , func (i )]);
73+ }
74+ return data ;
75+ }
76+
77+ option = {
78+ animation: false ,
79+ grid: {
80+ top: 40 ,
81+ left: 50 ,
82+ right: 40 ,
83+ bottom: 50
84+ },
85+ tooltip: {
86+ show: true ,
87+ trigger: ' axis'
88+ axisPointer: {
89+ type: ' cross'
90+ }
91+ },
92+ toolbox: {
93+ show: true ,
94+ feature: {
95+ dataZoom: {
96+ yAxisIndex: ' none'
97+ },
98+ dataView: {
99+ readOnly: false
100+ },
101+ magicType: {
102+ type: [' line' ' line'
103+ },
104+ restore: {},
105+ saveAsImage: {}
106+ }
107+ },
108+ xAxis: {
109+ name: ' x'
110+ min: 0 ,
111+ max: 256 ,
112+ minorTick: {
113+ show: true
114+ },
115+ minorSplitLine: {
116+ show: true
117+ }
118+ },
119+ yAxis: {
120+ name: ' y'
121+ min: - 5 ,
122+ max: 5 ,
123+ minorTick: {
124+ show: true
125+ },
126+ minorSplitLine: {
127+ show: true
128+ }
129+ },
130+ dataZoom: [
131+ {
132+ show: true ,
133+ type: ' inside'
134+ filterMode: ' filter'
135+ xAxisIndex: [0 ],
136+ startValue: - 20 ,
137+ endValue: 20
138+ },
139+ {
140+ show: true ,
141+ type: ' inside'
142+ filterMode: ' empty'
143+ yAxisIndex: [0 ],
144+ startValue: - 20 ,
145+ endValue: 20
146+ }
147+ ],
148+ series: [
149+ {
150+ type: ' line'
151+ showSymbol: false ,
152+ clip: true ,
153+ data: generateData ()
154+ }
155+ ]
156+ };
157+
158+ onMounted (() => {
159+ var chartDom = document .getElementById (props .container ) as HTMLElement
160+ var myChart = echarts .init (chartDom );
161+ option && myChart .setOption (option );
162+ })
163+
164+ script >
165+
166+ <script lang="ts">
167+ export default {
168+ name: " OSChart"
169+ props2: {
170+ msg: String ,
171+ option: Object
172+ },
173+ darkMode(isDark : boolean ) {
174+ let chartDom1 = document .getElementById (this .container ) as HTMLElement
175+ if (isDark )
176+ var chart = echarts .init (chartDom1 , ' dark'
177+ else
178+ var chart = echarts .init (chartDom1 );
179+ }
180+ }
181+
182+ script >
183+
184+ <style >
185+ .OSChart {
186+ margin 0 auto ;
187+ }
188+ style >
0 commit comments