| | |
| | | |
| | | <script> |
| | | import * as echarts from 'echarts' |
| | | var myChart = null |
| | | var option = null |
| | | |
| | | export default { |
| | | props: { |
| | |
| | | data() { |
| | | return { |
| | | option: { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | position: function(pt) { |
| | | return [pt[0], '10%'] |
| | | } |
| | | }, |
| | | title: { |
| | | left: '5%', |
| | | text: '设备名称:' + this.otherData.deviceName |
| | |
| | | } |
| | | }, |
| | | mounted() { |
| | | myChart = echarts.init(this.$refs.myChart) |
| | | // 正确使用 this 来定义 myChart 为组件实例的变量 |
| | | this.myChart = echarts.init(this.$refs.myChart) |
| | | this.initDrag() |
| | | }, |
| | | methods: { |
| | | initDrag() { |
| | | myChart.setOption((option = this.option), true) |
| | | this.myChart.setOption(this.option) |
| | | |
| | | // 页面发生变化tree也改变 |
| | | // 页面发生变化 tree 也改变 |
| | | window.addEventListener('resize', () => { |
| | | if (myChart) myChart.resize() |
| | | if (this.myChart) this.myChart.resize() |
| | | }) |
| | | }, |
| | | refreshData(seriesData, xAxisData) { |
| | | //刷新数据 |
| | | let refreshOption = myChart.getOption() |
| | | // 刷新数据 |
| | | const refreshOption = this.myChart.getOption() |
| | | refreshOption.series[0].data = seriesData |
| | | refreshOption.xAxis[0].data = xAxisData |
| | | myChart.setOption(refreshOption) |
| | | // 使用 Promise 包装 setOption 使其成为异步操作 |
| | | this.myChart.setOption(refreshOption, true) |
| | | } |
| | | } |
| | | // watch: { |
| | | // yAxisMonth: { |
| | | // handler(newVal) { |
| | | // console.log(`output->myChart`,myChart) |
| | | // setTimeout(()=>{ |
| | | // myChart.setOption((option = this.option), true) |
| | | // },100) |
| | | |
| | | // }, |
| | | // deep: true |
| | | // } |
| | | // } |
| | | } |
| | | </script> |
| | | |