You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

223 lines
5.9 KiB

<!-- @format -->
<script>
import { defineComponent } from 'vue';
import BaseBar from './BaseBar.vue';
import { tranNumber, lineToolTips, colorTransferToRgb } from '../tool.js';
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 ['#10DDDD', '#E0CFA3', '#50F3A8', '#88B8FF'];
},
},
},
data() {
return {
colorRgb: [],
};
},
computed: {},
created() {},
mounted() {
for (let i = 0; i < this.colorDatas.length; i++) {
this.colorRgb.push(colorTransferToRgb(this.colorDatas[i]));
}
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: 15,
data: this.series[i].data,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: `rgba(${this.colorRgb[i].r},${this.colorRgb[i].g},${this.colorRgb[i].b},0.8)`, // 0% 处的颜色
},
{
offset: 1,
color: `rgba(${this.colorRgb[i].r},${this.colorRgb[i].g},${this.colorRgb[i].b}, 0)`, // 100% 处的颜色
},
],
},
},
// emphasis:{
// color:"#ff00ff"
// },
type: 'bar',
});
}
return { series: seriesDatas, legendData: legendDatas };
},
optionHandle() {
let colorDatas = this.colorDatas;
let changeData = this.getChangeData();
let offVal = this.yAxisName.length * 10 + 20;
let offArr = [0, 0, 0, -offVal];
let option = {
animationDuration: 300,
animationEasing: 'linear',
textStyle: {
color: '#fff',
fontFamily: 'Microsoft YaHei',
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.65)',
borderColor: 'rgba(0,0,0,0.65)',
padding: [4, 8],
axisPointer: {
type: 'shadow',
shadowStyle: {
color: '#ffffff',
opacity: 0.08,
width: 'auto',
},
},
formatter: function (params) {
let res = '';
for (let i = 0; i < params.length; i++) {
let { name, data, seriesName } = params[i];
let color = colorDatas[i];
var resDiv = lineToolTips(name, color, data, seriesName, i);
res += resDiv;
}
return res;
},
},
legend: {
x: 'center', //可设定图例在左、右、居中
y: 'top', //可设定图例在上、下、居中
// padding:[25,10,0,0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
show: true,
textStyle: {
color: '#FFFFFF',
opacity: 0.85,
},
itemHeight: 8,
itemWidth: 8,
itemGap: 28,
data: changeData.legendData,
// right: '24',
// bottom: '24',
top: '24',
},
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: {
//y轴刻度线去掉
show: false,
},
},
series: changeData.series,
};
return option;
},
},
});
</script>