no message
Showing
2 changed files
with
60 additions
and
51 deletions
| ... | @@ -51,13 +51,13 @@ onMounted(() => { | ... | @@ -51,13 +51,13 @@ onMounted(() => { |
| 51 | window.addEventListener('resize', handleResize); | 51 | window.addEventListener('resize', handleResize); |
| 52 | }) | 52 | }) |
| 53 | const init = () => { | 53 | const init = () => { |
| 54 | clear() | ||
| 55 | if(!intervalA){ | 54 | if(!intervalA){ |
| 56 | getdata() | 55 | getdata() |
| 57 | } | 56 | } |
| 58 | intervalA = setInterval(getdata, 1000*60*60); | 57 | intervalA = setInterval(getdata, 1000*60*60); |
| 59 | } | 58 | } |
| 60 | const getdata = () => { | 59 | const getdata = () => { |
| 60 | clear() | ||
| 61 | getAdata() | 61 | getAdata() |
| 62 | getBdata() | 62 | getBdata() |
| 63 | } | 63 | } |
| ... | @@ -92,18 +92,18 @@ const setA = () => { | ... | @@ -92,18 +92,18 @@ const setA = () => { |
| 92 | const option = { | 92 | const option = { |
| 93 | animation:true, | 93 | animation:true, |
| 94 | // dataset: dataA.value, | 94 | // dataset: dataA.value, |
| 95 | dataZoom: [ | 95 | // dataZoom: [ |
| 96 | { | 96 | // { |
| 97 | show: false, | 97 | // show: false, |
| 98 | start: 0, | 98 | // start: 0, |
| 99 | end: 100 | 99 | // end: 100 |
| 100 | }, | 100 | // }, |
| 101 | { | 101 | // { |
| 102 | type: 'inside', | 102 | // type: 'inside', |
| 103 | start: 0, | 103 | // start: 0, |
| 104 | end: 100 | 104 | // end: 100 |
| 105 | } | 105 | // } |
| 106 | ], | 106 | // ], |
| 107 | xAxis: [{ | 107 | xAxis: [{ |
| 108 | data: kindList.value, | 108 | data: kindList.value, |
| 109 | axisLabel: { | 109 | axisLabel: { |
| ... | @@ -146,7 +146,7 @@ const setA = () => { | ... | @@ -146,7 +146,7 @@ const setA = () => { |
| 146 | }, | 146 | }, |
| 147 | tooltip:{ | 147 | tooltip:{ |
| 148 | alwaysShowContent:true, | 148 | alwaysShowContent:true, |
| 149 | formatter: '{b}：{c}', | 149 | formatter: `<div style="text-align: center">{b}<br/>{c}</div>`, |
| 150 | backgroundColor: 'transparent', | 150 | backgroundColor: 'transparent', |
| 151 | borderWidth: 0, | 151 | borderWidth: 0, |
| 152 | extraCssText:'box-shadow:none', | 152 | extraCssText:'box-shadow:none', |
| ... | @@ -188,22 +188,29 @@ const setB = () => { | ... | @@ -188,22 +188,29 @@ const setB = () => { |
| 188 | chartB = echarts.init(lineRef.value) | 188 | chartB = echarts.init(lineRef.value) |
| 189 | const option = { | 189 | const option = { |
| 190 | animation:true, | 190 | animation:true, |
| 191 | dataZoom: [ | 191 | grid: { |
| 192 | { | 192 | top: '15%', |
| 193 | show: false, | 193 | left: '12%', |
| 194 | start: 0, | 194 | right: '12%', |
| 195 | end: 50 | 195 | bottom: '12%' |
| 196 | }, | 196 | }, |
| 197 | { | 197 | // dataZoom: [ |
| 198 | type: 'inside', | 198 | // { |
| 199 | start: 0, | 199 | // show: false, |
| 200 | end: 50 | 200 | // start: 0, |
| 201 | } | 201 | // end: 50 |
| 202 | ], | 202 | // }, |
| 203 | // { | ||
| 204 | // type: 'inside', | ||
| 205 | // start: 0, | ||
| 206 | // end: 50 | ||
| 207 | // } | ||
| 208 | // ], | ||
| 203 | tooltip: { | 209 | tooltip: { |
| 204 | trigger: 'item', | 210 | trigger: 'item', |
| 205 | formatter: '{b}：{c}', | 211 | formatter: `<div style="text-align: center">{b}<br/>{c}</div>`, |
| 206 | renderModer: 'html', | 212 | renderModer: 'html', |
| 213 | // alignItems: 'center', | ||
| 207 | className:'downDot', | 214 | className:'downDot', |
| 208 | backgroundColor: 'rgba(8,13,86,0.2)', | 215 | backgroundColor: 'rgba(8,13,86,0.2)', |
| 209 | borderWidth: 0, | 216 | borderWidth: 0, |
| ... | @@ -283,9 +290,11 @@ const setB = () => { | ... | @@ -283,9 +290,11 @@ const setB = () => { |
| 283 | autoHover(chartB,option,0,2000) | 290 | autoHover(chartB,option,0,2000) |
| 284 | } | 291 | } |
| 285 | const radioAChange = (e) => { | 292 | const radioAChange = (e) => { |
| 293 | clear() | ||
| 286 | getAdata() | 294 | getAdata() |
| 287 | } | 295 | } |
| 288 | const radioBChange = (e) => { | 296 | const radioBChange = (e) => { |
| 297 | clear() | ||
| 289 | getBdata() | 298 | getBdata() |
| 290 | } | 299 | } |
| 291 | 300 | ... | ... |
| ... | @@ -78,18 +78,18 @@ const setA = () => { | ... | @@ -78,18 +78,18 @@ const setA = () => { |
| 78 | chartA = echarts.init(zhuRef.value) | 78 | chartA = echarts.init(zhuRef.value) |
| 79 | const option = { | 79 | const option = { |
| 80 | animation: true, | 80 | animation: true, |
| 81 | dataZoom: [ | 81 | // dataZoom: [ |
| 82 | { | 82 | // { |
| 83 | show: false, | 83 | // show: false, |
| 84 | start: 0, | 84 | // start: 0, |
| 85 | end: 100 | 85 | // end: 100 |
| 86 | }, | 86 | // }, |
| 87 | { | 87 | // { |
| 88 | type: 'inside', | 88 | // type: 'inside', |
| 89 | start: 0, | 89 | // start: 0, |
| 90 | end: 100 | 90 | // end: 100 |
| 91 | } | 91 | // } |
| 92 | ], | 92 | // ], |
| 93 | xAxis: [{ | 93 | xAxis: [{ |
| 94 | data: kindList.value, | 94 | data: kindList.value, |
| 95 | axisLabel: { | 95 | axisLabel: { |
| ... | @@ -194,21 +194,21 @@ const setB = () => { | ... | @@ -194,21 +194,21 @@ const setB = () => { |
| 194 | grid: { | 194 | grid: { |
| 195 | top: '15%', | 195 | top: '15%', |
| 196 | left: '80px', | 196 | left: '80px', |
| 197 | right: '5%', | 197 | right: '10%', |
| 198 | bottom: '12%' | 198 | bottom: '12%' |
| 199 | }, | 199 | }, |
| 200 | dataZoom: [ | 200 | // dataZoom: [ |
| 201 | { | 201 | // { |
| 202 | show: false, | 202 | // show: false, |
| 203 | start: 0, | 203 | // start: 0, |
| 204 | end: 100 | 204 | // end: 100 |
| 205 | }, | 205 | // }, |
| 206 | { | 206 | // { |
| 207 | type: 'inside', | 207 | // type: 'inside', |
| 208 | start: 0, | 208 | // start: 0, |
| 209 | end: 100 | 209 | // end: 100 |
| 210 | } | 210 | // } |
| 211 | ], | 211 | // ], |
| 212 | tooltip: { | 212 | tooltip: { |
| 213 | trigger: 'item', | 213 | trigger: 'item', |
| 214 | formatter: '{c}', | 214 | formatter: '{c}', | ... | ... |
-
Please register or sign in to post a comment