百度可视化库echarts学习笔记

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

• ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
• 官方教程：[五分钟上手ECharts]
  [https://www.echartsjs.com/zh/tutorial.html#](5 分钟上手 ECharts)
• 下载echarts [https://github.com/apache/incubator-echarts/tree/4.5.0 ]

option配置项

option:{
    //如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
    color:['pink','red'...]
    //标题配置
	title:{
	    show:true,//是否显示标题
	    link:'',
	    target:'',
	    textStyle:{
	    	color: '#333' ,
            fontStyle: 'normal' ,
            fontFamily: 'sans-serif' ,
            fontSize: 18 ,
	    },
	    padding:[0,20,30,0],
	    itemGap:10,
	    left:'20px'||'20%',
	    top: 'auto' ,
        right: 'auto' ,
        bottom: 'auto' ,
        backgroundColor : 'transparent',
        boderWidth:'3',
        borderColor:'red',
        borderRaduis:0 || [0,0,0,0],
	}
	legend{
        type:'plain' || 'scroll',
		show:'true', // 是否显示图例
		left: 'auto' ,
        top: 'auto' ,
        right: 'auto' ,
        bottom: 'auto' ,
        width: 'auto' ,
        height: 'auto' ,
		padding:5,
		iremGap:5,
		selectMode:'true' || false' || 'single' || 'mulitple',
		textStyle:{
			//和title一样
		},
		tooltip: Object,//不知道是个啥
		icon:'',
		data:[{
            name: '图例1',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本为红色
            textStyle: {
                color: 'red'
            }，
            {
            name: '图例2',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本为红色
            textStyle: {
                color: 'red'
            }
        }],
	}，
	grid{
		show:true,//是否显示直角坐标系网格
		left: '10%' ,
        top: 60 ,
        right: '10%' ,
        bottom: 60 ,
        width: 'auto' ,
        height: 'auto' ,
        containLabel:true,//grid 区域是否包含坐标轴的刻度标签
        backgroundColor: '',
        borderColor:'',
        borderWidth:'',
        
	}
	toolbox:{
		show:true,
		orient:'vertical' || 'horizontal',
		itemSize:10,
		itemGap:10,
		showTitle : true,// 是否在鼠标 hover 的时候显示每个工具 icon 的标题。
		saveImage:{
			type:'png'|| 'jpg',
			name:'tilte.text',
            excludeComponents:['toolbox']//忽略的组件列表
            show:true,
            ttile:'保存为图片'，
		}，
		restore:{
			show:true,
			title:'还原'，
		}
		left: 'auto' ,
        top: 'auto' ,
        right: 'auto' ,
        bottom: 'auto' ,
        width: 'auto' ,
        height: 'auto' ,
	}
	tootip:{
		show:ture,
		trigger:  'axis' || "item"(主要在无类目轴中使用),
		axiaPointer:{
			 type: 'line' || 'cross',
             axis: 'auto' ,
             snap ... ,
             z ... ,
		}
	}
	axisPointer:{
		type: 'line' || 'shadow',
		snap:true,//自动吸附到点上
		label:{}
		lineStyle:{}//type为line时有效
		shadowStyles:{}//type为shadow时有效
	}
}

坐标轴相关：

	xAxis:{
		show:true,
		position:'top'||'bottom',
		offset:20,
		type:'category' || 'value' || 'time' ||'log',
		name:'轴名称'，
		nameTextStyle:{},
		nameGap:15,
		nameRotate:30,
		boundaryGap:[20%,20%]//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
		max[min]:number || string ||function,
		aplitNumber:5,
		xAxisLine:{
			show：true,
			onZero:true,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
			lineStyle:{
				color:'#f00'，
				width:1,
				type:'solid' ||'dashed' ||'dotted',
				opacity:0.5,
			}
		}
        axisTick:{
            show:true,
            inside:false,
            length:5,
            linestyle:{
                type:'solid',
                color:'#f00',
                width:5,
            }
        }
        minorTick:{
            //函数绘图中使用次刻度线
            show:true,
            splitNumber:5,//次刻度线分割数
            length:3,
            lineStyle:{}//
        }
        axisLabel:{
            show:true,
            fontStyle:
            inside: false ,
            margin: 8 ,
            showMinLabel ... ,
            showMaxLabel ... ,
            color ... ,
            fontStyle: 'normal' ,
            fontWeight: normal ,
            fontFamily: 'sans-serif' ,
            fontSize: 12 ,
            align ... ,
            verticalAlign ... ,
            lineHeight ... ,
        }
        splitLine:{
            show:true,
            lineStyle:{}
        }
        minorSplitLine:{
            show:false,
        }
        data:[{
            value: '周一',
            // 突出周一
            textStyle: {
                fontSize: 20,
                color: 'red'
            }
        }, '周二', '周三', '周四', '周五', '周六', '周日']
	}
	// y轴类似

颜色有关

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    global: false // 缺省为 false
}
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    global: false // 缺省为 false
}
// 纹理填充
color: {
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
    repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

系列相关

series:[{
        name: '成交',
        type: 'line',
        smooth: true,
        data: [10, 12, 21, 54, 260, 830, 710]
    },//第一条线
    {
        name: '预购',
        type: 'line',
        smooth: true,
        data: [30, 182, 434, 791, 390, 30, 10]
    },//第二条线
    {
        name: '意向',
        type: 'line',
        smooth: true,
        data: [1320, 1132, 601, 234, 120, 90, 20]
    }]//第三条线