push
This commit is contained in:
xuziqiang
236
lib/component/echarts/components/chart/bar/SingleBar.vue
Normal file
236
lib/component/echarts/components/chart/bar/SingleBar.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<!-- @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>
|
||||
Reference in New Issue
Block a user