echarts双柱_echarts 柱状堆叠双X轴的概括实现

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()

}

}

}