Echarts用到的一些配置项

设置为堆叠的柱状图

 其中核心的代码是series中的stack，把后一个stack设置为和上一个是同样的名字，就会自动堆叠了

 

app.title = '堆叠柱状图';

option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['受案数','24H未及时处理','立案数','24H未及时处理']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'受案数',
            type:'bar',
            stack: '受案数1',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
         {
            name:'24H未及时处理',
            type:'bar',
            stack: '受案数1',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'立案数',
            type:'bar',
            stack: '广告',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'24H未及时处理',
            type:'bar',
            stack: '广告',
            data:[220, 182, 191, 234, 290, 330, 310]
        }
    ]
};

 

柱状图网格线颜色设置

在X轴Y轴设置splitLine下面的lineStyle样式

 xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日'],
            splitLine: {
            show: true,
            lineStyle:{
                 color: ['#235586'],
                 width: 1,
                type: 'solid'
            }
        }
        }
    ],
    yAxis : [
        {
            type : 'value',
             splitLine: {
            show: true,
            lineStyle:{
                 color: ['#1e3c6a'],
                 width: 1,
                type: 'solid'
            }
        }
        }
    ],

 X轴Y轴字体样式设置

axisLabel下面的 textStyle

 xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日'],
            splitLine: {
            show: true,
            lineStyle:{
                 color: ['#235586'],
                 width: 1,
                type: 'solid'
            }
        },
         axisLabel: {        
                                textStyle: {
                                    color: '#fff',
                                    fontSize:'12'
                                }
                            }
        }
    ],

 改变 legend的颜色

给它设置textStyle样式

改变legend的位置

直接在下面写x和y就可以，可以写具体数值，不要写单位，也可以center，left，right这样设置

legend: {
				data: ['受案数', '24H未及时处理', '立案数', '24H未及时处理'],
                x: 'right', // 'center' | 'left' | {number},
                 y: '15',
				textStyle: {
						color: '#fff',
						fontSize: '12',
				}
			},

 柱状图X轴最下面的那条线的颜色改变

是在axisLine下面的lineStyle的里面设置

xAxis: [{
				type: 'category',
				data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				splitLine: {
					show: true,
					lineStyle: {
						color: ['#235586'],  //x轴上面网格线的颜色
						width: 1,
						type: 'solid'
					}
				},
				axisLabel: {
					textStyle: {
						color: '#fff', //x轴文字颜色
						fontSize: '12'
					}
				},
				axisLine:{
					lineStyle:{
						color: ['#55c1ff'], //x轴最下面一条线的颜色
						width: 2,
						type: 'solid'
					}
				}
			}],

做成这个效果图最终的代码

var xzaj = echarts.init(document.getElementById('xzajchart'));
		xzaj.setOption({
			tooltip: {
				trigger: 'axis',
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			legend: {
				data: ['受案数', '24H未及时处理', '立案数', '24H未及时处理'],
				 x: 'right', 
                 y: '15',
				textStyle: {
						color: '#fff',
						fontSize: '12',
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				splitLine: {
					show: true,
					lineStyle: {
						color: ['#235586'],  //x轴上面网格线的颜色
						width: 1,
						type: 'solid'
					}
				},
				axisLabel: {
					textStyle: {
						color: '#fff', //x轴文字颜色
						fontSize: '12'
					}
				},
				axisLine:{
					lineStyle:{
						color: ['#55c1ff'], //x轴最下面一条线的颜色
						width: 2,
						type: 'solid'
					}
				}
			}],
			yAxis: [{
				type: 'value',
				splitLine: {
					show: true,
					lineStyle: {
						color: ['#1e3c6a'],
						width: 1,
						type: 'solid'
					},
				},
				axisLabel: {
					textStyle: {
						color: '#fff',
						fontSize: '12'
					}
				},
				axisLine:{
					lineStyle:{
						color: ['#235586'], //x轴最下面一条线的颜色
						width: 1,
						type: 'solid'
					}
				}
			}],
			series: [{
					name: '受案数',
					type: 'bar',
					stack: '受案数1',
					data: [320, 332, 301, 334, 390, 330, 320],
					color: '#1ac5cf',//柱状图颜色
					barWidth: 15,//柱状图宽度
				},
				{
					name: '24H未及时处理',
					type: 'bar',
					stack: '受案数1',
					data: [120, 132, 101, 134, 105, 130, 120],
					color: '#d8bb3a',
					barWidth: 15,
				},
				{
					name: '立案数',
					type: 'bar',
					stack: '广告',
					data: [360, 312, 351, 374, 350, 300, 380],
					color: '#a593e1',
					barWidth: 15,
				},
				{
					name: '24H未及时处理',
					type: 'bar',
					stack: '广告',
					data: [120, 182, 101, 134, 120, 110, 100],
					color: '#d8bb3a',
					barWidth: 15,
				}
			]
		});