push
This commit is contained in:
xuziqiang
@@ -0,0 +1,270 @@
|
||||
<!-- @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: {
|
||||
yAxis: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
axisLabelRotate: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
colorDatas: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
'#085779',
|
||||
'#16C5EC',
|
||||
'#087D76',
|
||||
'#14FFF1',
|
||||
'#135572',
|
||||
'#1593C9',
|
||||
'#04613F',
|
||||
'#11D683',
|
||||
];
|
||||
},
|
||||
},
|
||||
},
|
||||
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',
|
||||
});
|
||||
seriesDatas.push({
|
||||
name: this.series[i].name,
|
||||
type: 'bar',
|
||||
barMaxWidth: '40%',
|
||||
showBackground: false,
|
||||
stack: 'total',
|
||||
barMinWidth: 5,
|
||||
label: {
|
||||
show: true,
|
||||
color: '#FFFFFF',
|
||||
distance: 0,
|
||||
formatter: function (params) {
|
||||
if (params.value > 0) {
|
||||
return params.value;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
// position:'insideRight'
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
showBackground: false,
|
||||
},
|
||||
data: this.series[i].data,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: `rgba(${this.colorRgb[i * 2].r},${this.colorRgb[i * 2].g},${
|
||||
this.colorRgb[i * 2].b
|
||||
},1)`, // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `rgba(${this.colorRgb[i * 2 + 1].r},${this.colorRgb[i * 2 + 1].g},${
|
||||
this.colorRgb[i * 2 + 1].b
|
||||
}, 1)`, // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
type: 'bar',
|
||||
});
|
||||
}
|
||||
|
||||
return { series: seriesDatas, legendData: legendDatas };
|
||||
},
|
||||
optionHandle() {
|
||||
let colorDatas = this.colorDatas;
|
||||
let changeData = this.getChangeData();
|
||||
var 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 * 2];
|
||||
var resDiv = lineToolTips(name, color, data, seriesName, i);
|
||||
res += resDiv;
|
||||
}
|
||||
|
||||
return res;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
x: 'right', //可设定图例在左、右、居中
|
||||
y: 'top', //可设定图例在上、下、居中
|
||||
padding: [0, 24, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
opacity: 0.85,
|
||||
},
|
||||
itemHeight: 8,
|
||||
itemWidth: 8,
|
||||
itemGap: 28,
|
||||
data: changeData.legendData,
|
||||
top: '24',
|
||||
},
|
||||
grid: {
|
||||
left: '24',
|
||||
right: '24',
|
||||
bottom: '24',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'bottom',
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: '#ffffff',
|
||||
width: 1,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
opacity: 0.65,
|
||||
fontSize: 11,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
interval: 2,
|
||||
lineStyle: {
|
||||
color: '#FFFFFF',
|
||||
width: 1,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
//x轴刻度线去掉
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
position: 'top',
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: '#ffffff',
|
||||
width: 1,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
interval: 2,
|
||||
lineStyle: {
|
||||
color: '#FFFFFF',
|
||||
width: 1,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
//x轴刻度线去掉
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: this.yAxis,
|
||||
show: true,
|
||||
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,
|
||||
rotate: this.axisLabelRotate,
|
||||
},
|
||||
axisTick: {
|
||||
//y轴刻度线去掉
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: changeData.series,
|
||||
};
|
||||
return option;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user