echarts篇I——柱形图混合折线图加渐变

最近做echarts很多，发现echarts重点在配置，完成之后决定非常有必要把对应图的参数配置记录一下，以免以后遇到再次抓狂

图表特点和问题：

1.柱形图混合折线图

2.柱形图和折线图都有渐变

3.左侧柱形图和右侧折线图都要有y轴的分割线，并且要保持一致

4.比较恶心一点就是，要在1366上显示，占位很小，屏幕的四分之一，并且！x轴的数据很多！超过19个！最开始的时候，每个项的字数都是十多个，在协商之后，可以保证每个项在4个字以内，不过也不是很好处理，毕竟客户希望在最小的空间里放最多的数据……

 

代码配置如下：

var fontSize = 10;
switch(window.innerWidth) {
   case 1366:
   	fontSize = 10;
   	break;
   case 1400:
   	fontSize = 12;
   	break;
   case 1440:
   	fontSize = 13;
   	break;
   case 1600:
   	fontSize = 14;
   	break;
   case 1680:
   	fontSize = 15;
   	break;
   case 1920:
   	fontSize = 16;
   	break;
}
var option = {
    backgroundColor: '#051c71',
    tooltip: {
      trigger: "axis",
      backgroundColor: 'rgb(11,11,81)',
      padding: [15,30],
      extraCssText: 'box-shadow: 0px 0px 25px 5px rgb(41, 95, 159) inset;border-radius:10px'
   },
   legend: {
      show: true,
      top: '5%',
      right: '15%',
      textStyle: {
  	        color: "#fff"
      },
      data: ["数量", "金额"]
   },
   grid: {
      top: '15%',
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
   },
   xAxis: {
  	    type: "category",
      	axisTick: {
      		show: false
      	},
      	axisLabel: {
      		//"rotate": 30,
      		interval: 0,
      		color: '#ddd',
      		fontSize: fontSize,
      		formatter: function(value, index){
                // 这部分是为了做兼容使用，客户使用笔记本，屏幕只有1366大，页面还被四等分展示4个图表……偏偏这个图表的x轴数据很多
                // 方案一：找了下echarts中有滚动条，也就是dataZoom，不过奈何客户不想要那种效果
                // 方案二：因为和客户确认好，x轴每项都限制在4个字以内，所以出了方案二，也就是每隔一个，都与前一个错行展示。做成后，因为效果不是很好就否决掉（本来位置就小，改成这样，x轴占比太大）
                // 方案三：就是上面的switch部分，根据屏幕大小更改字号，并搭配上每项两个字一换行，虽然字小点，=_= 已经算是相对来说比较能接收的了
      		    /* if(index%2 !== 0) {
      		        return '\n\n'+value.slice(0,2)+'\n'+value.slice(2);
      		    } else {
      		        return value.slice(0,2)+'\n'+value.slice(2);
      		    } */
                return value.slice(0,2)+'\n'+value.slice(2);
      		}
      	},
      	axisLine: {
      		lineStyle: {
      			color: "#5475c8"
      		}
      	},
      	data: ["壹壹壹壹", "二二二二", "三三三三", "四四四四", 
      	"呜呜呜呜", "溜溜溜溜", "嘁嘁嘁嘁", "巴巴爸爸", 
      	"啾啾啾啾", "是是是是", "时移世易", "事儿事儿", 
      	"十三十三", "是四十四", "失误失误", "十六十六", 
      	"十七十七", "是吧是吧", "是九十九"]
   },
   yAxis: [{
      	type: "value",
      	name: "单位:(件)",
      	min: 0,
      	axisTick: {
      		show: false
      	},
      	splitLine: {
      	    show: false,
            lineStyle: {
               color: 'transparent'
           }  
      	},
      	splitNumber: 5,
      	axisLabel: {
      		show: true,
      		textStyle: {
      			color: "#ddd"
      		}
      	},
      	nameTextStyle: {
      		color: "#ddd"
      	},
      	axisLine: {
      		lineStyle: {
      			color: "#5475c8"
      		}
      	}
   }, {
      	type: "value",
      	name: "金额:(万元)",
      	min: 0,
      	// "max": 15000,
      	axisTick: {
      		show: false
      	},
      	splitLine: {
           lineStyle: {
               color: 'rgba(255,255,255,0.2)'
           }  
      	},
      	splitNumber: 5,
      	axisLabel: {
      		show: true,
      		textStyle: {
      			color: "#ddd"
      		}
      	},
      	nameTextStyle: {
      		color: "#ddd"
      	},
      	axisLine: {
      		lineStyle: {
      			color: "#5475c8"
      		}
      	}
   }],
   series: [{
      	name: "数量",
      	type: "bar",
      	stack: "总量",
      	barWidth: 15,
      	label: {
      		normal: {
      			show: false,
      			position: "insideRight"
      		}
      	},
      	itemStyle: {
      		normal: {
      			color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: 'rgb(241,187,115)'},
                    {offset: 0.9, color: 'rgb(243, 207, 29)'},
                    {offset: 1, color: 'rgb(246, 226, 39)'}
                ]
            ),
      			barBorderRadius: [8, 8, 8, 8]
      		}
      	},
      	data: [2, 4, 0, 5, 6, 0, 4.3, 10, 2, 2, 3, 1.5, 0.5, 1, 1, 0, 0, 0, 3]
   }, {
      	name: "金额",
      	type: "line",
      	yAxisIndex: 1,
      	smooth: false,
      	showAllSymbol: true,
      	symbol: "circle",
      	symbolSize: 10,
      	itemStyle: {
      		color: "#6ee7f3"
      	},
      	lineStyle: {
      		color: "#6ee7f3"
      	},
      	areaStyle: {
      		normal: {
      			color: {
      				x: 0,
      				y: 0,
      				x2: 0,
      				y2: 1,
      				type: "linear",
      				global: false,
      				colorStops: [{
      					offset: 0,
      					color: "#6ee7f3"
      				}, {
      					offset: 1,
      					color: "rgba(0,0,0,0)"
      				}]
      			}
      		}
      	},
      	data: [8, 300, 5, 290, 0, 200, 0, 0, 0, 165.7146, 0, 500, 100, 300, 0, 250, 0, 0, 0]
   }]
};

效果如下：