<!-- @format --> <script> import { defineComponent } from 'vue'; import BaseBar from './BaseBar.vue'; import { tranNumber, colorTransferToRgb } from '../tool.js'; // import * as from 'echarts'; export default defineComponent({ name: 'MultipleBar', extends: BaseBar, props: { xAxis: { type: Array, required: true, }, series: { type: Array, required: true, }, yAxisName: { type: String, required: true, }, axisLabelRotate: { type: Number, default: 0, }, colorDatas: { type: Array, default: () => { return ['#40E0F0', '#047CB6']; }, }, borderColor: { type: String, default: '#24B0D4', }, shadowColor: { type: String, default: '#2DBFDD', }, }, data() { return { colorRgb: [], borderColorRGB: {}, shadowColorRGB: {}, }; }, computed: {}, created() {}, mounted() { for (let i = 0; i < 2; i++) { this.colorRgb.push(colorTransferToRgb(this.colorDatas[i])); } this.borderColorRGB = colorTransferToRgb(this.borderColor); this.shadowColorRGB = colorTransferToRgb(this.shadowColor); let optionData = this.optionHandle(); this.setOption(optionData); this.renderChart(); }, methods: { getChangeData() { var seriesDatas = []; var legendDatas = []; for (let i = 0; i < this.series.length; i++) { legendDatas.push({ name: this.series[i].name, icon: 'rect', itemStyle: { color: this.colorDatas[i], }, }); seriesDatas.push({ name: this.series[i].name, barMaxWidth: '24', data: this.series[i].data, showBackground: true, backgroundStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: `rgba(${this.borderColorRGB.r},${this.borderColorRGB.g},${this.borderColorRGB.b}, 0.2)`, //color: 'rgba(64, 224, 240, 0.7)' // 0% 处的颜色 }, { offset: 0.3, color: `rgba(180, 180, 180, 0.1)`, // 100% 处的颜色 }, { offset: 0.7, color: `rgba(180, 180, 180, 0.1)`, // 100% 处的颜色 }, { offset: 1, color: `rgba(${this.borderColorRGB.r},${this.borderColorRGB.g},${this.borderColorRGB.b}, 0.2)`, // 100% 处的颜色 }, ], }, borderColor: `rgba(${this.borderColorRGB.r},${this.borderColorRGB.g},${this.borderColorRGB.b},1)`, //'rgba(36, 176, 212, 1)', borderWidth: 0.5, borderType: 'solid', shadowColor: `rgba(${this.shadowColorRGB.r},${this.shadowColorRGB.g},${this.shadowColorRGB.b},1)`, //'rgba(45, 191, 221, 0.7)', shadowBlur: 3, }, label: { show: true, position: 'top', color: '#fff', fontWeight: 400, }, // textStyle: { // }, itemStyle: { shadowColor: '#30C6E1', shadowBlur: 4, borderWidth: 0.5, borderColor: '#00F0FF', color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: `rgba(${this.colorRgb[0].r},${this.colorRgb[0].g},${this.colorRgb[0].b},0.5)`, //color: 'rgba(64, 224, 240, 0.7)' // 0% 处的颜色 }, { offset: 1, color: `rgba(${this.colorRgb[1].r},${this.colorRgb[1].g},${this.colorRgb[1].b},0.7)`, // 100% 处的颜色 }, ], }, }, type: 'bar', }); } return { series: seriesDatas, legendData: legendDatas }; }, optionHandle() { let colorDatas = this.colorDatas; let changeData = this.getChangeData(); let yAxisName = this.yAxisName; var offVal = yAxisName.length * 10 + 20; var offArr = [0, 0, 0, -offVal]; var option = { animationDuration: 300, animationEasing: 'linear', textStyle: { color: '#fff', fontFamily: 'Microsoft YaHei', }, grid: { // top:'24', left: '24', right: '24', bottom: '24', containLabel: true, }, xAxis: { type: 'category', data: this.xAxis, axisLabel: { show: true, opacity: 0.65, fontSize: 11, rotate: this.axisLabelRotate, }, splitLine: { show: true, lineStyle: { color: '#FFFFFF', width: 1, opacity: 0.2, }, }, axisTick: { //x轴刻度线去掉 show: false, }, }, yAxis: { show: true, name: this.yAxisName, nameTextStyle: { padding: offArr, opacity: 0.34, fontSize: 11, }, nameLocation: 'end', type: 'value', axisLine: { show: true, onZero: false, lineStyle: { color: '#ffffff', width: 1, opacity: 0.2, }, }, splitLine: { show: false, onZero: false, }, axisLabel: { show: true, opacity: 0.65, fontSize: 11, formatter: function (v) { return tranNumber(v); }, }, axisTick: { show: false, }, }, series: changeData.series, }; return option; }, }, }); </script>