echarts的简单学习

通过学习js不难看出option就是用来配置图的效果的
此图来自于黑马程序员

option配置

可复制的代码

 title: {
        // 设置图表的标题
        text: '折线图堆叠123'
    },
    //图表的提示框组件
    tooltip: {
        //触发方式
        trigger: 'axis'//以坐标轴触发
    },
    //图例组件
    legend: {//如果series里面有了name则data可以删掉
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
	 //网格，可以控制线形图、柱状图等直角坐标系的图表大小
	    grid: {
	        left: '3%',//左边距距离
	        right: '4%',//右边距距离
	        bottom: '3%',//下边距距离，同样还有top
	        containLabel: true//显示左边的刻度标签500、1000、1500。。。，如果不显示就false
	    },
	 //工具箱组件,有另存为图片等功能
	    toolbox: {
	        feature: {//保存为图片的按钮
	            saveAsImage: {}
	        }
	    },
	 xAxis: {
			//type坐标轴类型可选
			//value 数值轴，适用于连续数据
			//category 类目轴，适用于离散的类目数据，用这个类型必须通过data设置类目数据
			//time时间轴，适用于连续的时序数据，与数值轴相比有时间的格式化，刻度计算上会根据跨度决定用月、星期、日等
	        type: 'category',
	        boundaryGap: false,//是否让我们的线条和坐标轴有缝隙
	        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
	    },
	    yAxis: {
	        type: 'value'
	    },
	//系列图表配置，决定了显示哪种类型的图标
	    series: [//里面是一个数组
	        {
	            name: '邮件营销',
	            type: 'line',//图的类型
	            stack: '总量',//这是个数据堆叠每条折线图填上一样的字符之后，每一条线都会在之前的线之上，使折线图不交叉
 data: [120, 132, 101, 134, 90, 230, 210]//每条线里的相关数据
	        },
	        {
	            name: '联盟广告',
	            type: 'line',
	            stack: '总量',
	            data: [220, 182, 191, 234, 290, 330, 310]
	        },
	        {
	            name: '视频广告',
	            type: 'line',
	            stack: '总量',
	            data: [150, 232, 201, 154, 190, 330, 410]
	        },
	        {
	            name: '直接访问',
	            type: 'line',
	            stack: '总量',
	            data: [320, 332, 301, 334, 390, 330, 320]
	        },
	        {
	            name: '搜索引擎',
	            type: 'line',
	            stack: '总量',
	            data: [820, 932, 901, 934, 1290, 1330, 1320]
	        }
	    ],
	color:['pink','red','green','skyblue']//color设置我们线条的颜色，注意后面是个数组