<template> <div :class="className" :style="{height:height,width:width}" /> </template> <script> import echarts from 'echarts' require('echarts/theme/macarons') // echarts theme import resize from '@/views/dashboard/components/mixins/resize' export default { mixins: [resize], 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.$nextTick(() => { this.initChart() }) }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { initChart() { this.chart = echarts.init(this.$el, 'macarons') this.setOptions(this.chartData) }, setOptions({ lastWeek, thisWeek, lastYear,thisYear} = {}) { this.chart.setOption({ xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], boundaryGap: true, type: 'category', axisTick: { show: true } }, grid: { left: 10, right: 10, bottom: 20, top: 30, containLabel: true }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, padding: [5, 10] }, yAxis: { type: 'value', axisTick: { show: false } }, legend: { data: ['本周总申报单量', '上周总申报单量','本周总申报货量','上周总申报货量'] }, series: [{ name: '本周总申报单量', itemStyle: { normal: { color: '#FF005A', lineStyle: { color: '#FF005A', width: 2 } } }, smooth: true, type: 'line', data: thisWeek.totalCount, animationDuration: 2800, animationEasing: 'cubicInOut' }, { name: '上周总申报单量', smooth: true, type: 'line', data: lastWeek.totalCount, animationDuration: 2800, animationEasing: 'cubicInOut' }, { name: '本周总申报货量', smooth: true, type: 'bar', itemStyle: { normal: { color: '#3888fa', lineStyle: { color: '#3888fa', width: 2 }, areaStyle: { color: '#f3f8ff' } } }, data: thisWeek.totalWeight, animationDuration: 2800, animationEasing: 'quadraticOut' }, { name: '上周总申报货量', smooth: true, type: 'bar', stack: 'Ad', emphasis: { focus: 'series' }, data: lastWeek.totalWeight, animationDuration: 2800, animationEasing: 'quadraticOut' }, ] }) } } } </script>