@@ -77,15 +77,16 @@ const dataset = ref([
77
77
])
78
78
79
79
const model = ref ([
80
+ { key: ' responsive' , def: false , type: ' checkbox' },
80
81
{ key: ' type' , def: ' line' , type: ' select' , options: [' line' , ' bar' ]},
81
- { key: ' style.chartWidth' , def: 290 , type: ' number' , min: 100 , max: 500 },
82
+ { key: ' style.chartWidth' , def: 400 , type: ' number' , min: 100 , max: 500 },
82
83
{ key: ' style.animation.show' , def: true , type: ' checkbox' },
83
84
{ key: ' style.animation.animationFrames' , def: 360 , type: ' number' , min: 0 , max: 1000 },
84
85
{ key: ' style.backgroundColor' , def: ' #FFFFFF' , type: ' color' },
85
86
{ key: ' style.fontFamily' , def: ' inherit' , type: ' text' },
86
87
{ key: ' style.line.color' , def: ' #3366CC' , type: ' color' },
87
88
{ key: ' style.line.strokeWidth' , def: 3 , type: ' number' , min: 0 , max: 20 },
88
- { key: ' style.line.smooth' , def: false , type: ' checkbox' },
89
+ { key: ' style.line.smooth' , def: true , type: ' checkbox' },
89
90
{ key: ' style.bar.borderRadius' , def: 3 , type: ' number' , min: 0 , max: 12 },
90
91
{ key: ' style.bar.color' , def: ' #3366CC' , type: ' color' },
91
92
{ key: ' style.zeroLine.color' , def: ' #1A1A1A' , type: ' color' },
@@ -160,6 +161,14 @@ const step = ref(0)
160
161
<option v-for =" opt in themeOptions" >{{ opt }}</option >
161
162
</select >
162
163
</div >
164
+
165
+ <div style =" width : 600px ; height : 400px ; resize : both ; overflow : auto ; background : white " >
166
+ <LocalVueUiSparkline :key =" `responsive_${step}`" :dataset =" dataset" :config =" {
167
+ ...config,
168
+ responsive: true
169
+ }" />
170
+ </div >
171
+
163
172
<Box comp =" VueUiSparkline" :dataset =" dataset" >
164
173
<template #title >VueUiSparkline</template >
165
174
0 commit comments