<template> <div style="height: 12vh; width: 100%; "> <div :id="id" ref="techy-line-chart" class="techy-chart" /> </div> </template> <script> import echarts from 'echarts' import resize from '@/views/OperationalOverview/components/mixins/resize' export default { name: 'RealtimeProductionHorizontalBarChart', mixins: [resize], props: { id: { type: String, default: 'default-id' }, title: { type: String, default: 'default-title' }, xData: { type: Array, default: () => [] }, seriesData: { type: Array, default: () => [] } }, data() { return { chart: null, option: { color: ['#FF7345', '#52FFF1', '#6A6E87', '#9452FFA6'], grid: { top: 0, left: 0, right: '5%', bottom: 0, containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.001], axisTick: { show: false }, axisLabel: { fontSize: 8 // rotate: 10 }, axisLine: { show: false, lineStyle: { color: '#fffa' } }, splitLine: { lineStyle: { color: '#fff3' } } }, yAxis: { type: 'category', data: ['产线1', '产线2', '产线3', '产线4', '产线5', '产线6'], axisLine: { show: false }, axisLabel: { fontSize: 10, color: '#fffa' }, axisTick: { show: false }, splitLine: { lineStyle: { color: '#fffa' } } }, series: [ { name: '2011', type: 'bar', barWidth: 5, data: Array(6) .fill(0) .map(value => Math.floor(Math.random() * 1000)) }, { name: '2012', type: 'bar', barWidth: 5, data: Array(6) .fill(0) .map(value => Math.floor(Math.random() * 1000)) } ] } } }, mounted() { this.$nextTick(() => { console.log('here...') if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart']) this.chart.setOption(this.option) }) }, beforeDestroy() { if (this.chart) this.chart.dispose() this.chart = null }, methods: {} } </script> <style scoped> .techy-chart { height: 100%; width: 100%; } .techy-chart >>> div { width: 100% !important; } </style>