| | |
| | | var myChart = null |
| | | var option = null |
| | | |
| | | let base = +new Date(1968, 9, 3) |
| | | let oneDay = 24 * 3600 * 1000 |
| | | let date = [] |
| | | let data = [Math.random() * 300] |
| | | for (let i = 1; i < 20000; i++) { |
| | | var now = new Date((base += oneDay)) |
| | | date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')) |
| | | data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])) |
| | | } |
| | | |
| | | export default { |
| | | // props: { |
| | | // yAxisMonth: { |
| | | // type: Array, |
| | | // default: [] |
| | | // }, |
| | | // seriesData: { |
| | | // type: Array, |
| | | // default: [] |
| | | // } |
| | | // }, |
| | | props: { |
| | | yAxisMonth: { |
| | | type: Array, |
| | | default: [] |
| | | }, |
| | | seriesData: { |
| | | type: Array, |
| | | default: [] |
| | | }, |
| | | otherData: { |
| | | type: Object, |
| | | default: {} |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | option: { |
| | |
| | | }, |
| | | title: { |
| | | left: '5%', |
| | | text: 'Large Ara Chart' |
| | | text: '设备名称:' + this.otherData.deviceName + '\\单位:' + (this.otherData.unit ? this.otherData.unit : '') |
| | | }, |
| | | toolbox: { |
| | | right: '5%', |
| | |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: date |
| | | data: this.yAxisMonth |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | |
| | | ], |
| | | series: [ |
| | | { |
| | | name: 'Fake Data', |
| | | name: '参数', |
| | | type: 'line', |
| | | symbol: 'none', |
| | | sampling: 'lttb', |
| | |
| | | } |
| | | ]) |
| | | }, |
| | | data: data |
| | | data: this.seriesData |
| | | } |
| | | ] |
| | | } |
| | |
| | | methods: { |
| | | makeOption() {}, |
| | | initDrag() { |
| | | myChart.setOption((option = this.option)) |
| | | myChart.setOption((option = this.option), true) |
| | | |
| | | option && myChart.setOption(option) |
| | | // 页面发生变化tree也改变 |
| | | window.addEventListener('resize', () => { |
| | | if (myChart) myChart.resize() |
| | | }) |
| | | } |
| | | } |
| | | }, |
| | | // watch: { |
| | | // yAxisMonth: { |
| | | // handler(newVal) { |
| | | // console.log(`output->myChart`,myChart) |
| | | // setTimeout(()=>{ |
| | | // myChart.setOption((option = this.option), true) |
| | | // },100) |
| | | |
| | | // }, |
| | | // deep: true |
| | | // } |
| | | // } |
| | | } |
| | | </script> |
| | | |