2021-01-16_echarts柱状图-折线图

柱状图堆叠

// 主要是使用stack设置堆叠
leftOption = {
    title : {
        text: 'xxxxx',
        padding: [18,0,0,12]
    },
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'none'

        }
    },
    legend: {
        data:['xxx','xxx','yyy','yyy'],
        textStyle: {
            color: '#000'
        },
        align: 'right',
        right: 10,
        top: 18
    },
    grid: {
        left: '2%',
        right: '2%',
        bottom: '2%',
        top: '15%',
        containLabel: true
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : [],
            axisLine:{lineStyle:{color:'#000'}},
            axisLabel: {
                show: true,
                interval:0,rotate:40,
                textStyle: {
                    color: '#000'
                }
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLine:{lineStyle:{color:'#000'}},
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#000'
                }
            }

        }
    ],
    series : [
        {
            name:'xxx',
            type:'bar',
            data:[],
            stack: 'xx',
            itemStyle:{
                normal:{
                    color:'#5FD3A7'
                }
            },
            // barGap: '0%'
        },
        {
            name:'xxx',
            type:'bar',
            data:[],
            stack: 'xx',
            itemStyle:{
                normal:{
                    color:'#F7C700'
                }
            },
            // barGap: '0%'
        },
        {
            name:'yyy',
            type:'bar',
            data:[],
            stack: 'yy',
            itemStyle:{
                normal:{
                    color:'#64BD52'
                }
            },
            // barGap: '0%'
        },
        {
            name:'yyy',
            type:'bar',
            data:[],
            stack: 'yy',
            itemStyle:{
                normal:{
                    color:'#FFAA00'
                }
            },
            // barGap: '0%'
        }
    ]
}

柱状图折线图

//  yAxisIndex 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
$baseInfo.option = {
		//标题
		title:{
			text:"",
			left: "10",
			top: "10",
			textStyle:{
				fontSize: 30  
			}
		},
		//提示框组件
		tooltip : {
			trigger : 'axis',  //触发类型
			axisPointer : {    //坐标轴指示器配置项
				type : 'line',
				crossStyle : {
					color : '#000'
				}
			}
		},
		//调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
		color : [ '#8B4513', '#9400D3', '#FFD700' ],
		//全局的字体样式。
		textStyle : {
			color : '#000000',
		},
		//工具栏
		/* toolbox : {
			top:15,
			feature : {
				dataView : {
					show : true,
					readOnly : false
				},
				magicType : {
					show : true,
					type : [ 'line', 'bar' ]
				},
				restore : {
					show : true
				},
				saveAsImage : {
					show : true
				}
			}
		}, */
	    grid: {
			top:"15%",
		    left: "5%",
			right:"5%"
		},
		legend : {
			top:15,
			textStyle : {
				color : '#000000'
			},
			data : [ '', '', '', '', '', '' ]
		},
		xAxis : [ {
			type : 'category',
			data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
			axisPointer : {
				type : 'shadow'
			},
			axisLine : {
				lineStyle : {
					color : '#000000'
				}
			},
		} ],
		yAxis : [ {
			type : 'value',
			name : '正常数',
			min : 0,
			axisLine : {
				lineStyle : {
					color : '#000000'
				}
			},
			splitLine : {
				show : false
			},
			axisLabel : {
				formatter : '{value}'
			}
		}, {
			type : 'value',
			name : '正常率',
			min : 0,
			max : 100,
			interval : 10,
			axisLine : {
				lineStyle : {
					color : '#000000'
				}
			},
			splitLine : {
				show : false
			},
			axisLabel : {
				formatter : '{value} %'
			}
		} ],
		series : [ {
			name : '',
			type : 'bar'/* ,
			data:[10,20,30,4,5,6,5,8,4,6,7,9] */
		}, {
			name : '',
			type : 'bar'/* ,
			data:[30,20,10,4,5,6,5,8,4,6,7,9] */
		}, {
			name : '',
			type : 'bar'/* ,
			data:[40,40,20,4,5,6,5,8,4,6,7,9] */
		}, {
			name : '',
			type : 'line',
			/* data:[10,20,30,50,60,40,30,20,10,20,50,60], */
			yAxisIndex : 1
		}, {
			name : '',
			type : 'line',
			/* data:[30,20,10,20,50,60,10,20,30,50,60,40], */
			yAxisIndex : 1
		}, {
			name : '',
		/* 	data:[40,40,20,10,20,30,50,60,10,20,50,60], */
			type : 'line',
			yAxisIndex : 1
		} ]
	};