<template> <div id="ar_monthly_bar"/> </template> <script> import * as echarts from "echarts"; import {arMonthlyBar} from "../../../api/apiList"; export default { name: "ArMonthlyBar", data() { return { barChart: { title: { show: true, text: "已开票未收款(开票月份)", left: "center", textStyle: {color: "white"} }, textStyle: { color: "#FFFFFF", fontSize: "12" }, grid: { containLabel: true, top: "10%", bottom: '10%' }, xAxis: { data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08',], axisLabel: { color: "#FFFFFF", fontSize: "12", interval: 0, rotate: 0 }, axisTick: { show: false } }, yAxis: { type: "value", splitLine: { lineStyle: { color: "#1E2C58" } }, axisLabel: { show: false, color: "#FFFFFFAA", fontSize: "16" } }, series: { type: 'bar', data: [25002, 57873, 71168, 41098, 25002, 57873, 71168, 41098], barWidth: "40%", showBackground: true, backgroundStyle: { color: 'rgba(255, 255, 255, 0.1)' }, itemStyle: { borderRadius: 10, }, color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ {offset: 0, color: '#00CCD2'}, {offset: 1, color: '#00A2FF'} ] }, label: { show: true, position: 'top', color: "#FFFFFF", }, emphasis: { focus: 'self', blurScope: 'coordinateSystem' } } }, arMonthlyBar: null } }, methods: { // 绘制图表 drawArMonthlyBar() { if (!this.arMonthlyBar) { this.arMonthlyBar = echarts.init(document.getElementById('ar_monthly_bar')) // 监听柱条点击事件,跳转子页面 let that = this this.arMonthlyBar.on('click', function (params) { that.$router.push({path: '/ar_bar/monthly/company', query: {month: params.name}}) }); // 监听窗口大小变化,重绘图表 window.addEventListener('resize', this.resizeChart); } this.arMonthlyBar.setOption(this.barChart); }, // 重绘图表 resizeChart() { if (this.arMonthlyBar) { this.arMonthlyBar.resize(); } }, }, mounted() { // 获取图表数据 arMonthlyBar().then(res => { let data = res.data.data let xAxisData = [] let seriesData = [] for (let item of data) { xAxisData.push(item.settle_month) seriesData.push(item.unregister_amount) } this.barChart.xAxis.data = xAxisData this.barChart.series.data = seriesData this.drawArMonthlyBar() }).catch(err => { console.log(err); }); }, beforeDestroy() { window.removeEventListener("resize", this.resizeChart); } } </script>