| <template> |
| <div :class="className" :style="{height:height,width:width}"/> |
| </template> |
| |
| <script> |
| import echarts from 'echarts' |
| require('echarts/theme/macarons') // echarts theme |
| import { debounce } from '@/utils' |
| |
| export default { |
| props: { |
| className: { |
| type: String, |
| default: 'chart' |
| }, |
| width: { |
| type: String, |
| default: '100%' |
| }, |
| height: { |
| type: String, |
| default: '350px' |
| }, |
| autoResize: { |
| type: Boolean, |
| default: true |
| }, |
| chartData: { |
| type: Object, |
| required: true |
| } |
| }, |
| data() { |
| return { |
| chart: null |
| } |
| }, |
| watch: { |
| chartData: { |
| deep: true, |
| handler(val) { |
| this.setOptions(val) |
| } |
| } |
| }, |
| mounted() { |
| this.initChart() |
| if (this.autoResize) { |
| this.__resizeHandler = debounce(() => { |
| if (this.chart) { |
| this.chart.resize() |
| } |
| }, 100) |
| window.addEventListener('resize', this.__resizeHandler) |
| } |
| |
| // 监听侧边栏的变化 |
| const sidebarElm = document.getElementsByClassName('sidebar-container')[0] |
| sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler) |
| }, |
| beforeDestroy() { |
| if (!this.chart) { |
| return |
| } |
| if (this.autoResize) { |
| window.removeEventListener('resize', this.__resizeHandler) |
| } |
| |
| const sidebarElm = document.getElementsByClassName('sidebar-container')[0] |
| sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler) |
| |
| this.chart.dispose() |
| this.chart = null |
| }, |
| methods: { |
| sidebarResizeHandler(e) { |
| if (e.propertyName === 'width') { |
| this.__resizeHandler() |
| } |
| }, |
| setOptions({ expectedData, actualData } = {}) { |
| this.chart.setOption({ |
| xAxis: { |
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
| boundaryGap: false, |
| axisTick: { |
| show: false |
| } |
| }, |
| grid: { |
| left: 10, |
| right: 10, |
| bottom: 20, |
| top: 30, |
| containLabel: true |
| }, |
| tooltip: { |
| trigger: 'axis', |
| axisPointer: { |
| type: 'cross' |
| }, |
| padding: [5, 10] |
| }, |
| yAxis: { |
| axisTick: { |
| show: false |
| } |
| }, |
| legend: { |
| data: ['expected', 'actual'] |
| }, |
| series: [{ |
| name: 'expected', itemStyle: { |
| normal: { |
| color: '#FF005A', |
| lineStyle: { |
| color: '#FF005A', |
| width: 2 |
| } |
| } |
| }, |
| smooth: true, |
| type: 'line', |
| data: expectedData, |
| animationDuration: 2800, |
| animationEasing: 'cubicInOut' |
| }, |
| { |
| name: 'actual', |
| smooth: true, |
| type: 'line', |
| itemStyle: { |
| normal: { |
| color: '#3888fa', |
| lineStyle: { |
| color: '#3888fa', |
| width: 2 |
| }, |
| areaStyle: { |
| color: '#f3f8ff' |
| } |
| } |
| }, |
| data: actualData, |
| animationDuration: 2800, |
| animationEasing: 'quadraticOut' |
| }] |
| }) |
| }, |
| initChart() { |
| this.chart = echarts.init(this.$el, 'macarons') |
| this.setOptions(this.chartData) |
| } |
| } |
| } |
| </script> |