设置echarts相关样式

var myEcharts = echarts.init(document.getElementById("echarts"));   //初始化
	    var option = {
		legend: {
			data: ['订单数','付款数']
		},
		xAxis: [{
			type:'category',
            boundaryGap : false,   // 设置x轴数据从坐标轴顶头开始(即xy轴交界处0开始)
			data: xAxisData,
			axisPointer:{
				type:'shadow'
			},
			axisLabel : {
				textStyle: {color: "#656565"},    // 设置坐标值颜色
				interval: xAxisData.length/10,    // 设置坐标轴值刻度间隔显示
			},
			axisLine: {
                show: false,   // 控制坐标轴是否显示
                lineStyle: {
                    width:3,   //这里是坐标轴的宽度,可以去掉
                }
            },
			axisTick: {show: false},   // 去除坐标轴上的刻度线
            splitLine: {
                 show: false,           //  控制网格线是否显示
                 lineStyle: {          // 改变网格线颜色
                      color: ['red']
                 }                            
            },
		}],
		yAxis: [{
			type:'value',
			min: 0,
			max: 1000,
			interval: 250,
			axisLabel: {
				textStyle: {color: "#656565"},    // 设置坐标值颜色
				formatter: '{value}'
			},
			axisLine: {show: false},   // 控制坐标轴是否显示
			axisTick: {show: false}   // 去除坐标轴上的刻度线
		},{
			type:'value',
			min: 0,
			max: 30,
			interval: 5,
			axisLabel: {
				textStyle: {color: "#656565"},    // 设置坐标值颜色
				formatter: '{value}'
			},
			splitLine: {show: false},   // 控制网格线是否显示
			axisLine: {show: false},   // 控制坐标轴是否显示
			axisTick: {show: false}   // 去除坐标轴上的刻度线
		}],
		series: [{
			name:'订单数',
			type:'bar',
			itemStyle:{
				normal:{color:'#a8e1d6'}
			},
			data: yAxisDataBar
		},{
			name:'付款数',
			type:'line',
			yAxisIndex: 1,
			itemStyle:{
				normal:{color:'#2384c6'}
			},
			data:yAxisDataLine,
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(205, 228, 242, 0.6)'
					}, {
						offset: 1,
						color: 'rgba(205, 228, 242, 0.6)'
					}])
				}
			}
		}]
	};
	chartContainer.setOption(option);

猜你喜欢

转载自blog.csdn.net/weixin_39003573/article/details/81912594