<template> <div id="ar_summary_bar"/> </template> <script> import * as echarts from "echarts"; export default { name: "ArSummaryBar", data() { return { arSummaryBar: null, barChart: { textStyle: { color: "#FFFFFF", fontSize: "12" }, grid: { containLabel: true, top: "10%", bottom: '0' }, xAxis: { data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款'], axisLabel: { color: "#FFFFFF", fontSize: "12", }, axisTick: { show: false } }, yAxis: { type: "value", splitLine: { lineStyle: { color: "#1E2C58" } }, axisLabel: { show: false, color: "#FFFFFFAA", fontSize: "16" } }, series: { type: 'bar', data: [0, 0, 0, 0, 0], 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", }, } }, } }, methods: { drawArSummaryBar(seriesData) { if (!this.arSummaryBar) { this.arSummaryBar = echarts.init(document.getElementById('ar_summary_bar')) } this.barChart.series.data = seriesData this.arSummaryBar.setOption(this.barChart); }, resizeChart() { if (this.arSummaryBar) { this.arSummaryBar.resize(); } } }, mounted() { window.addEventListener('resize', this.resizeChart); }, beforeDestroy() { window.removeEventListener("resize", this.resizeChart); } } </script>