<v-chart :options="options" :auto-resize="true" style="height: 500px; width: 100%;">
export default {
// 父組件傳遞過來的數(shù)據(jù) （兩種方式聲明：1.數(shù)組 2.對象）
? props: {
titleText: {
type:String,
? ? ? default: () => {
return ''
? ? ? }
}, // 圖表名稱
? ? isPercentage: {
type:Boolean
? ? }, // 是否是%
? ? // 原來的數(shù)組傳入
? ? 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]
]
}
}, // 原來的數(shù)組傳入
? ? legendData: {
type:Array,
? ? ? default: () => {
return ['I類', 'II類', 'III類', 'IV類', 'V類', '劣V類']// 圖表圖標(biāo)數(shù)據(jù)
? ? ? }
}, // 原來的數(shù)組傳入
? ? 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'
? ? ? }
}
},
? // 數(shù)據(jù)
? data() {
return {
options: {},
? ? ? series: [],
? ? ? xAxisData: []
}
},
? // 要用到哪些子組件
? components: {},
? // 計算屬性
? computed: {},
? // 監(jiān)聽
? watch: {},
? // 生命周期鉤子：實例初始化之后，數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用
? created() {
this.setSeries()
},
? // 生命周期鉤子：組件實例渲染完成時調(diào)用
? mounted() {
},
? // 函數(shù)集，
? 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 = ['當(dāng)期', '同期']
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()
}
}
}
