eCharts简易封装

思路：

1. 将事先需要用的配置属性写到option中
2. 再把传进来的option相对应的属性进行合并

代码：

function myCharts(el,options) {
	var myChart = echarts.init(document.getElementById(el))
	var option = {
		autoHeight:'',
		title: {
            text: '',
            left:'auto',
            subtext:'',
            subtextStyle:{
                fontSize: 16,
                color:'#333',
                lineHeight: 0
            }
        },
	    tooltip: {
	        trigger: 'axis',  // 'item' -> 散点图，饼图     'axis' ->  柱状图，折线图
	        formatter:'',
	        axisPointer: { // 坐标轴指示器
							type: 'shadow' //'line':直线指示器，'shadow':阴影指示器，'none':无指示器，'cross':十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
					}
	    },
	    legend: {
				  show: true,
	        data: '',
	        orient: 'horizontal',
	        textStyle: {
	            color: '#333'
	        }
	    },
	    grid: {
	        top: 60,
	        left: '1%',
	        right: '1%',
	        bottom: '3%',
	        containLabel: true //否包含坐标轴的刻度标签
	    },
	    xAxis: {
	        show:true,
	        type: 'category',
	        boundaryGap: true, // 坐标轴两边留白策略
	        splitLine: { // 网格线
	            lineStyle: {
	                color:['#ccc']
	            }
	        },
	        axisLine: { // 坐标轴轴线
            show: true
					},
					axisTick: { // 坐标轴刻度
						show: true
					},
          axisLabel:{ //坐标轴刻度标签
						show:true,
						formatter:function (value) { // 坐标轴文字超过3个字的部分用...省略
							let valueTxt = '';
							if (value.length > 3) {
									valueTxt = value.substring(0, 3) + '...';
							}
							else {
									valueTxt = value;
							}
							return valueTxt ;
						}
					},
	        data: []
	    },
	    yAxis: {
	        show:true,
	        type: 'value',
	        splitLine: {
	            lineStyle: {
	                color:['#ccc']
	            }
	        },
					axisLine: {
						show: true
					},
					axisTick: {
						show: true
					},
	        axisLabel:{
						show:true,
						formatter:function (value) {
							let valueTxt = '';
							if (value.length > 3) {
									valueTxt = value.substring(0, 3) + '...';
							}
							else {
									valueTxt = value;
							}
							return valueTxt ;
						}
					},
					data: []
	    },
	    series: [{
	        data: [],
	        name: '',
	        type: 'line',
	        smooth: true, // 平滑曲线(type: 'line')
	        symbol:'circle',  // 图元的图形类别 (type: 'line')
	        silent: false, // 坐标轴是否是静态无法交互
	        areaStyle: {  // 折线/面积图区域样式设置
	            color: 'rgb(0, 0, 0, 0)',
	        },
	        barMaxWidth:28, // 柱状图柱条最大宽度
	        label: {  // 标签
                show: true,
                color:'#333',
                formatter:'{c}',
                position: 'top',
                valueAnimation: true
					},
					labelLine: { // 标签引导线
						show: false
					},
					radius:['40%', '60%'],  // 饼图的半径(内半径和外半径)
					legendHoverLink: true  // 图例 hover 时的联动高亮
	    }]
 	}

 	option = assiginObj(option,options)

 	myChart.setOption(option,true)

 	if (option.autoHeight) {
        myChart.resize({ height: option.autoHeight })
    }

	// 自适应
	window.addEventListener("resize", function () {
		myChart.resize()
	})
}

// 深层嵌套对象合并
function assiginObj(target = {},sources= {}){
	let obj = target;
	if(typeof target != 'object' || typeof sources != 'object'){
			return sources; // 如果其中一个不是对象 就返回sources
	}

	for(let key in sources){ 
			// 如果target也存在相同key 那就再次合并
			if(target.hasOwnProperty(key)){
					obj[key] = assiginObj(target[key],sources[key]);
			} else {
					// 不存在就直接添加
					obj[key] = sources[key];
			}
	}
	return obj;
}

使用：

// 线图
 let options1  = {
   tooltip:{
     axisPointer: { // 坐标轴指示器
			type: 'line' 
		}
   },
   xAxis: {
      data: ['衣服','鞋子','帽子','手套','裤子','袜子']
  },
   series: [{
      data: [10,15,2,30,2,45,62],
      name: '销售量',
      type: 'line',
      smooth: true,
      symbol:'circle',
  }]
 }
 myCharts('myChart1',options1)

 // 横向柱状图
 let options2 = {
   xAxis: {
      data: ['衣服包括(T-恤,衬衫,毛衣)','鞋子','帽子','手套','裤子','袜子']
  },
   series: [{
      data: [10,15,2,30,2,45,62],
      name: '销售量',
      type: 'bar'
  }]
 }
 myCharts('myChart2',options2)


 // 镂空饼图
 let options3 = {
   tooltip: {
     trigger: 'item'
   },
   xAxis:{
     axisLine:{
       show:false
     }
   },
   yAxis:{
     axisLine:{
       show:false
     }
   },
   series: [{
       data: [
           {value: 1048, name: '搜索引擎'},
           {value: 735, name: '直接访问'},
           {value: 580, name: '邮件营销'},
           {value: 484, name: '联盟广告'},
           {value: 300, name: '视频广告'}
       ],
      name: '销售量',
      type: 'pie',
       label:{
         formatter: '{b} : {c} ({d}%)',
         position: 'outside' // 饼图设置这个属性值后显示‘视觉引导线’（即labelLine）
       },
       labelLine: { // 标签引导线
			show: true
		}
  }]
 }
 myCharts('myChart3',options3)

 // 纵向柱状图
 let options4 = {
   xAxis:{
     type: 'value',
   },
   yAxis:{
     type: 'category',
     data:['衣服包括(T-恤,衬衫,毛衣)','鞋子','帽子','手套','裤子','袜子']
   },
   series: [{
       data: [10,15,2,30,2,45,62],
      name: '销售量',
      type: 'bar',
       label:{
         position: 'right'
       },
  }]
 }
 myCharts('myChart4',options4)

 // 实心饼图
 let options5 = {
   tooltip: {
     trigger: 'item'
   },
   xAxis:{
     axisLine:{
       show:false
     }
   },
   yAxis:{
     axisLine:{
       show:false
     }
   },
   series: [{
       data: [
           {value: 1048, name: '搜索引擎'},
           {value: 735, name: '直接访问'},
           {value: 580, name: '邮件营销'},
           {value: 484, name: '联盟广告'},
           {value: 300, name: '视频广告'}
       ],
      name: '销售量',
      type: 'pie',
       label:{
         position: 'outside',
         formatter: '{b} : {c} ({d}%)'
       },
       labelLine: { // 标签引导线
			show: true
		},
       radius:[0, '75%'],
  }]
 }
 myCharts('myChart5',options5)

-------------------------------------------之后会进一步进行优化------------------------------------------------------------