<v-chart :options="options" :auto-resize="true" style="height: 500px; width: 100%;">
export default {
// 父组件传递过来的数据 （两种方式声明：1.数组 2.对象）
props: {
titleText: {
type:String,
default: () => {
return ''
}
}, // 图表名称
isPercentage: {
type:Boolean
}, // 是否是%
// 原来的数组传入
inSeriesData: {
type:Array,
default: () => {
return [
[20, 20, 0, 0, 20, 0, 20, 20, 20, 20],
[20, 20, 20, 0, 20, 20, 20, 20, 20, 20],
[10, 10, 10, 50, 0, 30, 20, 20, 20, 20],
[10, 10, 10, 50, 40, 30, 20, 20, 20, 20],
[10, 20, 30, 0, 30, 0, 20, 20, 20, 20],
[30, 20, 30, 0, 0, 20, 20, 20, 20, 20]
]
}
}, // 原来的数组传入
legendData: {
type:Array,
default: () => {
return ['I类', 'II类', 'III类', 'IV类', 'V类', '劣V类']// 图表图标数据
}
}, // 原来的数组传入
xAxisDataI: {
type:Array,
default: () => {
return [
[1, 2, 0, 0, 2, 0, 2, 2, 2, 2],
[1, 2, 2, 0, 2, 2, 2, 2, 2, 2],
[1, 1, 1, 5, 0, 3, 2, 2, 2, 2],
[1, 1, 1, 5, 3, 3, 2, 2, 2, 2],
[1, 1, 1, 0, 4, 0, 2, 2, 2, 2],
[1, 2, 3, 0, 0, 2, 2, 2, 2, 2],
[1, 2, 3, 0, 0, 0, 2, 2, 2, 2]
]
}
},
xAxisDataII: {
type:Array,
default: () => {
return ['白龙江', '黑河水', '黄河干流', '嘉陵江', '石羊河']
}
},
yAxisMax: {
type: [Number, String],
default: () => {
return '100'
}
}
},
// 数据
data() {
return {
options: {},
series: [],
xAxisData: []
}
},
// 要用到哪些子组件
components: {},
// 计算属性
computed: {},
// 监听
watch: {},
// 生命周期钩子：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用
created() {
this.setSeries()
},
// 生命周期钩子：组件实例渲染完成时调用
mounted() {
},
// 函数集，
methods: {
setOption() {
let xAxisData = []
let series = []
this.xAxisData = []
this.xAxisDataII.forEach(item => {
xAxisData.push({
value: item,
textStyle: {
fontSize:18,
lineHeight:70
}
})
})
this.legendData.forEach((item, index) => {
series.push(
{
name: item,
type:'bar',
stack:'one',
barMaxWidth:'36.66%',
label: {
show:true,
formatter: (params) => {
let value =this.xAxisDataI[params.seriesIndex][params.dataIndex]
if (Number(value) &&Number(value) !==0) {
return value
}
return ''
},
textStyle: {
color:'#474747'
},
position:'inside'
},
data:this.inSeriesData[index]
}
)
})
let num =Math.ceil(this.inSeriesData[0].length /2)
// eslint-disable-next-line no-unused-vars
for (let i =0; i < num; i++) {
let list = ['当期', '同期']
this.xAxisData.push(...list)
}
this.options = {
title: {
text:this.titleText
},
color:this.$config.chartsColor,
tooltip: {
trigger:'axis',
axisPointer: {
type:'cross'
}
},
grid: [
{
top:100,
bottom:101
},
{
height:60,
bottom:40
}
],
toolbox: {
feature: {
dataView: {show:true, readOnly:false },
restore: {show:true },
saveAsImage: {show:true }
}
},
legend: {
data:this.legendData
},
xAxis: [
{
type:'category',
data:this.xAxisData
}, {
type:'category',
data: xAxisData,
position:'bottom',
axisTick: {
length:50
},
splitArea: {
show:true,
areaStyle: {
/* color: ['rgba(255,255,255,0.5)', 'rgba(200,200,200,0.5)'] */
}
}
}
],
yAxis: [
{
type:'value',
name:'',
min:0,
max:this.yAxisMax,
position:'left',
axisLine: {
lineStyle: {
// color: this.$config.color[0]
}
},
axisLabel: {
formatter:this.isPercentage ?'{value} %' :'{value}'
}
}
],
series: series
}
},
setSeries() {
this.setOption()
}
}
}
