echart 柱状图+折线图重叠+虚线、点样式调整

需求需要，第一次使用echart，记录一下，先看一下最终效果图

直接看代码及注释吧。

html

<div id="x_count_echart">
</div>

css

#x_count_echart{
    height: 460px;
    width: 500px;
}

js，设置的有点多哈，可以看最后说明

// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('x_count_echart'));

        // 指定图表的配置项和数据
        var option = {
        	color: ['#52BEDB'], //柱状图的颜色
		    title: {
		        text: '全国军民融合创新', //图表的名称
		        x: 'center', //显示位置
		        bottom:'0',
		        textStyle:{
		            color:'#000',
		            fontSize:'20',
		        }
		    },
        	legend: {
        		data:['销量','销量1','销量2'],
		        x: 'center',
		        bottom:'60',
        	},
        	xAxis: { // x轴的设置
        		name: '区域',
        		nameLocation: 'start',
        		nameTextStyle: {        			
        			fontSize: 14,
        			padding: [35,0,0,10],
        			color: '#52BEDB'			
        		},
        		data: ["区域","区域","区域","区域","区域","区域","区域","区域","区域"," "]
        	},
        	grid: {
		        bottom: '20%',
		        containLabel: true
	   		},
        	yAxis: { //y轴的设置
        		name: '个数',
        		min: 200, //y轴刻度设置，区间为200-650
        		max: 650,
        		interval:50,  //递增50
        		nameTextStyle: {        			
        			fontSize: 14,
        			padding: [0,35,0,0],
        			color: '#52BEDB'			
        		},
            	axisLine: { // y轴线
            		show:false
            	},
	            splitLine: { //y轴网格
	            	show: false
	            },    
				axisTick: { //y轴刻度线
					show: false
				} 	
			},
			series: [{ //这里定义要显示的图形
				name: '销量',
				type: 'bar', //柱状图
				data: [470, 380, 360, 230, 210, 350, 600, 525, 425, 200]
			},
			{
				name:'销量1',
				type:'line', //折线图
				symbolSize:8,
				symbol: 'square', //点的样式为正方形
				itemStyle : {  /*设置折线颜色*/
					normal : {
						color:'#E26A6A'
					}
				},
				data:[400, 350, 340, 260, 252, 395, 650, 585, 525, 370]
			},
			{
				name:'销量2',
				type:'line', //虚线
				symbolSize:8,
				symbol: 'circle',//点的样式为圆形
				data:[240, 355, 350, 348, 340, 420, 480, 600, 625, 500],
				color:['#89C4F4'],
				smooth:false, //这是设置虚线所需属性
				itemStyle : {  /*设置折线颜色*/
					normal : {	
						borderColor: '#4C8E9F',
						lineStyle: {
							width:2,		 
							type:'dotted' //线条样式，虚线
						}
					}
				}				
			}
			]
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

才开始使用时，是不是感觉官网教程看不懂的感觉，到处搜这样那样设置。其实吧，一般是我们没好好看文档。

w3c echarts文档

他列出来的使用格式和我们实际使用格式好像不太一样，慢慢来，找到他的使用方法，所有属性都可以为所欲为所欲为