| | |
| | | </template> |
| | | |
| | | <script> |
| | | import * as echarts from "echarts"; |
| | | |
| | | export default { |
| | | name: 'lineChart', |
| | |
| | | default: null, |
| | | }, |
| | | }, |
| | | data () { |
| | | data() { |
| | | return { |
| | | dataList: { |
| | | name: [], |
| | | data1: [], |
| | | data2: [], |
| | | }, |
| | | // 配置 |
| | | option: { |
| | | name: [], |
| | | data1: [], |
| | | data2: [], |
| | | |
| | | myDrawLine: null |
| | | } |
| | | }, |
| | | |
| | | methods: { |
| | | setFontSize(res){ |
| | | const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; |
| | | if (!clientWidth) return; |
| | | let fontSize = clientWidth / 1920; |
| | | return res*fontSize; |
| | | }, |
| | | initDrawLine() { |
| | | const that = this |
| | | let option = { |
| | | grid: { |
| | | width: '100%' |
| | | left: '15%', |
| | | right: '5%' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item', |
| | |
| | | return str |
| | | }, |
| | | textStyle: { |
| | | fontSize: 12 |
| | | fontSize: this.setFontSize(16) |
| | | } |
| | | }, |
| | | |
| | |
| | | top: 20, |
| | | data: ['已处理工单数', '未处理工单数'], |
| | | textStyle: { |
| | | color: '#A0AEC0' |
| | | color: '#A0AEC0', |
| | | fontSize: this.setFontSize(14) |
| | | } |
| | | }, |
| | | |
| | |
| | | }, |
| | | axisLabel: { |
| | | color: '#A0AEC0', |
| | | fontSize: 12, |
| | | fontSize: this.setFontSize(14), |
| | | margin: 20, |
| | | rotate: 30 |
| | | }, |
| | | data: this.dataList.name, |
| | | data: that.name, |
| | | }, |
| | | // Y轴配置 |
| | | yAxis: { |
| | |
| | | }, |
| | | axisLabel: { |
| | | color: '#A0AEC0', |
| | | fontSize: 12, |
| | | margin: 15 |
| | | fontSize: this.setFontSize(14), |
| | | margin: 5 |
| | | } |
| | | }, |
| | | // 系列列表(多个折线图) |
| | |
| | | { |
| | | name: '已处理工单数', |
| | | type: 'line', |
| | | data: this.dataList.data1, |
| | | data: that.data1, |
| | | smooth: true, |
| | | areaStyle: { |
| | | color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { offset: 0, color: '#00a2ff' }, |
| | | { offset: 0.5, color: 'rgba(0,162,255,0.1)' }, |
| | | { offset: 1, color: 'rgba(0,162,255,0.1)' } |
| | | {offset: 0, color: '#00a2ff'}, |
| | | {offset: 0.5, color: 'rgba(0,162,255,0.1)'}, |
| | | {offset: 1, color: 'rgba(0,162,255,0.1)'} |
| | | ]) |
| | | }, |
| | | |
| | |
| | | { |
| | | name: '未处理工单数', |
| | | type: 'line', |
| | | data: this.dataList.data2, |
| | | data: that.data2, |
| | | smooth: true, |
| | | areaStyle: { |
| | | color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { offset: 0, color: '#e4b54f' }, |
| | | { offset: 0.5, color: 'rgba(228,181,79,0.1)' }, |
| | | { offset: 1, color: 'rgba(228,181,79,0.1)' } |
| | | {offset: 0, color: '#e4b54f'}, |
| | | {offset: 0.5, color: 'rgba(228,181,79,0.1)'}, |
| | | {offset: 1, color: 'rgba(228,181,79,0.1)'} |
| | | ]) |
| | | }, |
| | | |
| | |
| | | } |
| | | } |
| | | ] |
| | | }, |
| | | } |
| | | |
| | | myDrawLine: null |
| | | } |
| | | }, |
| | | |
| | | methods: { |
| | | initDrawLine () { |
| | | const that = this |
| | | that.myDrawLine = this.$echarts.init(this.$refs.lineChart) |
| | | that.myDrawLine.setOption(that.option) |
| | | that.myDrawLine.setOption(option) |
| | | window.addEventListener('resize', function () { |
| | | that.myDrawLine.resize() |
| | | }) |
| | |
| | | watch: { |
| | | workOrderRegion: { |
| | | handler(newV, oldV) { |
| | | let name = []; |
| | | let data1 = []; |
| | | let data2 = []; |
| | | this.workOrderRegion.map((item) => { |
| | | name.push(item.area); |
| | | data1.push(item.doneNum); |
| | | data2.push(item.todoNum); |
| | | this.name = [] |
| | | this.data1 = [] |
| | | this.data2 = [] |
| | | newV.map((item) => { |
| | | this.name.push(item.area); |
| | | this.data1.push(item.doneNum); |
| | | this.data2.push(item.todoNum); |
| | | }) |
| | | console.log(this, "ddddd") |
| | | console.log(this.dataList, "ddddd") |
| | | this.dataList.name = name; |
| | | console.log(name) |
| | | this.dataList.data1 = data1; |
| | | this.dataList.data2 = data2; |
| | | this.initDrawLine() |
| | | }, |
| | | deep: true |
| | | } |
| | | }, |
| | | mounted () { |
| | | mounted() { |
| | | this.$nextTick(() => { |
| | | setTimeout(() => { |
| | | this.initDrawLine() |