| | |
| | | components: {}, |
| | | data() { |
| | | //这里存放数据 |
| | | return { myChart }; |
| | | return { myChart: null }; |
| | | }, |
| | | mounted() { |
| | | this.lineChart(); |
| | |
| | | '管理数据', |
| | | ]; |
| | | // prettier-ignore |
| | | let data = [1200,500,1000,200,200]; |
| | | let data = [1200, 500, 1000, 200, 200]; |
| | | let yMax = 500; |
| | | let dataShadow = []; |
| | | for (let i = 0; i < data.length; i++) { |
| | |
| | | let option = { |
| | | title: { |
| | | text: '数据下载量', |
| | | top: 15, |
| | | textStyle: { |
| | | color: '#fff', |
| | | }, |
| | |
| | | const zoomSize = 6; |
| | | this.myChart = this.$echarts.init(document.getElementById('echart22')); |
| | | this.myChart.on('click', function (params) { |
| | | console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]); |
| | | this.myChart.dispatchAction({ |
| | | type: 'dataZoom', |
| | | startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], |
| | | endValue: |
| | | dataAxis[ |
| | | Math.min(params.dataIndex + zoomSize / 2, data.length - 1) |
| | | Math.min(params.dataIndex + zoomSize / 2, data.length - 1) |
| | | ], |
| | | }); |
| | | }); |
| | |
| | | }); |
| | | }, |
| | | }, |
| | | created() {}, |
| | | created() { }, |
| | | }; |
| | | </script> |
| | | <style lang="less" scoped> |
| | | //@import url(); 引入公共css类 |
| | | .echart22_box { |
| | | padding: 20px; |
| | | } |
| | | #echart22 { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | #echart22 { |
| | | width: calc(100% - 40px); |
| | | height: calc(100% - 40px); |
| | | } |
| | | </style> |