解决echarts图像渐变，渐变方向，x,y轴数量顶点显示，显示鼠标悬浮状态

首先来说一下echarts包含的内容：

• 1）图像渐变
• 2）渐变方向
• 3）数量顶点显示
• 4）Y轴颜色设置
• 5）隐藏X、Y轴网格线
• 6）显示鼠标悬浮状态
• 7）字体大小

看图说话

来给兄弟们上代码

var dataList =  [10, 52, 200, 334, 390, 330, 220] //图表数据 客服呼叫排名
var chartFnc = {
	init: function() {
		this.chartGraphFnc();
	},
	chartGraphFnc: function () {	// 柱状图
		var myChart = echarts.init(document.getElementById('main1'));
		var option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {       // 坐标轴指示器，坐标轴触发有效
					type: 'shadow'   // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				width:"auto",
				containLabel: true
			},
			xAxis: [
				{
					"show" : false,
					type: 'value',
					"splitLine": {     //网格线
						"show": false
					}
				}
			],
			yAxis: [
				{
					boundaryGap: true,
					type: 'category',
					data : ['话务员A','话务员B','话务员C','话务员D','话务员E','话务员A','话务员E'],
					axisTick: {			//y轴刻度线
						show:false
					},
					axisLabel:{
						color: '#BEC2CE', //y轴字体显示颜色
					},
					"axisLine":{       //y轴
						"show":false
					},
				}
			],
			series: [
				{
					name: '呼叫数量',
					type: 'bar',
					barWidth : 12,//柱图宽度
					itemStyle:{
						emphasis: {
							barBorderRadius: 30,
						},
						normal: {
							//柱形图圆角，初始化效果
							barBorderRadius:[20],
							label: {
								show: true,	//是否展示
								position: 'right', //在上方显示
								textStyle: {	//数值样式
									fontSize : '12',
								}
							},
							color: new echarts.graphic.LinearGradient(
								1, 0, 0, 0, //哈哈哈，原来在这更改渐变方向，我的天
								[
									{offset: 0, color: '#3366FF'},                  
									{offset: 1, color: '#1C96FF'}                  
								]
							)
						}
					},
					data: dataList
				}
			]
		};
		
		// 为echarts对象加载数据
		myChart.setOption(option);
	}
}
// 初始化图表组件
chartFnc.init();

看完的兄弟们留个脚印在走呗！