设置echarts相关样式（包括动态传值，动态获取坐标轴上最大值及间距等）

最近利用echarts画图，总结了一些常见的样式修改，以及动态传值等知识点：

// 动态传值，可从后台获取数据赋值
var xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月'];
var yAxisDataBar = [122, 300, 600, 100, 900, 540];
var data:yAxisDataLine = [1, 23, 22, 10, 7, 0];
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: Math.ceil(Math.max.apply(null, yAxisDataBar)),       // 可根据传入数据，动态获取最大值，且向上取整
			interval: Math.ceil(Math.max.apply(null, yAxisDataBar))/5,   // 可根据传入数据，动态获取间隔(此处除以5默认设置y轴数值间隔5段)
			axisLabel: {
				textStyle: {color: "#656565"},    // 设置坐标值颜色
				formatter: '{value}'
			},
			axisLine: {show: false},   // 控制坐标轴是否显示
			axisTick: {show: false}   // 去除坐标轴上的刻度线
		},{
			type:'value',
			min: 0,
			max: 30,   // 同上，也可动态获取最大值
			interval: 5,   // 同上，也可动态获取y轴间距
			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,   // 定义付款数的数据置于y轴右侧
			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);

其中：

1. Math.max.apply(null, yAxisDataBar)  用于获取数组 yAxisDataBar 最大值，Math.min.apply(null, yAxisDataBar)  用于获取数组 yAxisDataBar 最小值，可用于不确定数据最大值时根据数据动态展示坐标轴数值。

 2.此份demo为y轴两侧都有数据，如需只保留一侧数据，则注意对应删除以下三个地方数据：

     （1） legend 中的 data 数组；

     （2） yAxis 中对应你想删除的y轴数据

     （3） series 中对应你想删除的数据， 此处注意，留下的一组中不能带有 yAxisIndex 属性，否则图表不会展示