echarts 柱状图折线图一体

echarts 柱状图折线图一体

barCustom(jsonData){
      let option = {
            color: colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: {  
                    type: 'shadow'
                },
                //处理数据, 可随意修改(看数据格式)
                formatter:function(params){
                    let str = params[0].name + '</br>'
                    params.forEach((item, index) => {
                        if(item['seriesType']=='bar'){
                            str += item.seriesName + ': '+ item.data;
                            if(item['seriesName']=='B类'){
                                str +=  '('+jsonData['seriesData'][1]['percent'][item.dataIndex]+'%)</br>'
                            }else if(item['seriesName']=='C类'){
                                str +=  '('+jsonData['seriesData'][2]['percent'][item.dataIndex]+'%)</br>'
                            }
                        }
                        if(item['seriesType']=='line'){
                            str +=  '('+item.data+'%)</br>'
                        }
                    })
                    return str;
                }
            },
            legend: {
                show:jsonData.isShowLegend,
                data: jsonData.legendData
            },
            grid: {
                top:'12%',
                left: '0%',
                right: '2%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                triggerEvent:true,
                axisLabel:{
                    interval:0
                },
                data: jsonData.xAxisData
            },
            yAxis: [
            {
                type: 'value',
                name: '数值',
            },
            {
                type: 'value',
                name: '百分比',
                min: -500,
                axisLabel: {
                    formatter: '{value}%'
                },
                splitLine:{
                    show:false
                }
            }],
            series: []
        }
        let arr = [];
        jsonData.seriesData.forEach((item,index) => {
            let  json = {
                name: item.importance,
                type: 'bar',
                stack: 'total',
                barWidth : 30,
                label: {
                    show: true,
                    color: 'white'
                },
                data: item.data
            }
            arr.push(json);
            if(item.importance == 'A类'){
                let jsonLine = {
                    name: item.importance + '占比',
                    type: 'line',
                    yAxisIndex: 1,
                    data: item.percent
                }
                arr.push(jsonLine)
            }
        })
        option.series = arr;
        return option;
    },
//数据格式
let jsonData = {
	isShowLegend: true,
	legendData: ["A类", "B类", "C类", "A类占比"],
	seriesData: [{
		data: [10, 10, 6],
		importance: "A类",
		percent: [37.04, 71.43, 42.86]
	},{
		data: [7, 4, 5],
		importance: "B类",
		links: [],
		percent: [25.93, 28.57, 35.71]
	},{
		customers: null,
		data: [10, 0, 3],
		importance: "C类",
		percent: [37.04, 0, 21.43]
	}
	xAxisData: ["哈哈哈", "嘻嘻嘻", "嘎嘎嘎"]
}
//初始化
this.barSyb = this.$echarts.init(this.$refs.barSyb);
let option = chartsFun.barCustom(jsonData);
this.barSyb.setOption(option);

实现效果: