Apache ECharts 开箱使用

一、ECharts介绍

ECharts是百度开源的纯 Javascript 图表库，它是 Enterprise Charts（商业产品图表库），提供商业产品常用图表库，底层基于 ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现。

二、ECharts实例

版本 ECharts 3.0 v4.x

<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('main1'),'dark'); 
    
var option1 ={
      backgroundColor: '#262D45',
		
		//提示框组件
		tooltip: {
            trigger: 'axis',    					  //坐标轴触发
            axisPointer: { type: 'cross' },    //坐标轴指示器配置项(指示坐标轴当前刻度的工具)
            backgroundColor:'rgba(0,0,0,0.8)',        //提示框浮层的背景颜色
            textStyle: {                              //提示框浮层的文本样式
                fontSize:42,
                lineHeight:64
            }
  	    },
     
   		grid: {
			//grid组件离容器上下左右的距离(用百分比)
        	right: '4%',
        	left: '4%',
        	bottom: '20%',
        	top: '12%'
     	},
     
     	legend: {                         //图例组件
   
        	itemGap: 100,                 //图例之间每项间的间隔
        	itemWidth: 40,                //图例标记的图形宽度，高度
        	itemHeight: 24,
        	padding:[20,0,0,0],           //图例内边距，上右下左
        
        	textStyle: {                   //图例的公用文本样式
            	color: '#f1f1f1',
            	fontSize: 42,
            	fontWeight: 'normal'        //问题字体的粗细
        	},
        	data:['Actual CT','UPH']        //图例的数据数组
       },
       xAxis : [
           {
           		 type: 'category',           //坐标轴类型
            	 axisLine: {                 //坐标轴轴线相关设置 
                	lineStyle: {
                    	color: '#f1f1f1',
                    	width: 2
                	}
            	 },
            	 axisTick: {                     //坐标轴刻度相关设置
                	alignWithLabel: false,       //为true时保证坐标轴和轴线对齐
                	length: 8,                   //坐标轴刻度的长度
                	lineStyle: {                 //坐标轴刻度线的相关设置
                    	width: 2
                	}
            	 },
            	 axisLabel: {             		  //坐标轴刻度标签的相关设置
                 	fontSize: 32,
                 	interval: 0,           		  //设置成 0 强制显示所有标签
                 	rotate: 20,            		  //刻度标签旋转的角度
                 	showMinLabel: true,           //是否显示最小 tick 的 label
                 	showMaxLabel: true
            	 },
            	 axisPointer: {            //
                	show: true,           //设置成true显示
                	label: {               
                    	show: true,       //是否显示文本标签
                    	color: '#fff',
                    	fontSize: 42,
                    	backgroundColor: '#000'
                	}
            	},
                //X轴依次显示名字，值加单引号，值间逗号隔开
            	data : ['Install SubAssembly','P-TEST(SFC)','Pre-Burn',
     'Install Camera','Install Rear Camera','Install Audio','MLB Install'] 
        	}
    ],
    
     yAxis : [
       	.
       	.
       	.
    ],
    
     series : [
        .
        .
        .
    ]
  };       
    //为echarts对象加载数据
    myChart1.setOption(option1);
</script>

三、ECharts操作

1. 给X轴添加点击事件（y轴同理）

第一步：将xAxis或者yAxis的属性triggerEvent 置为 true;
第二步：点击事件，如代码：

mybarDoubleChart.setOption(option);    
mybarDoubleChart.on('click', function (params) {        
	if(params.componentType == "xAxis"){            
		alert("单击了"+params.value+"x轴标签");        
	}else
	{            
		alert("单击了"+params.name+"柱状图");        
	}    
});

2. 设置柱子的最大宽度和刻度的最小间隔

• 问题1：柱子的颜色要各种颜色，而不是同一种颜色；
• 问题2：在柱子数量少的时候，剩下的柱子不要太粗，否则不好看；
• 问题3：实际上的统计信息，其数据都是整数，没有小数。所以希望图形中的刻度也不要出现小数；
• 问题4：如果窗口大小变化，图表可以自动进行调整。

var curChart = echarts.init(document.getElementById(showDivId));
    // 初始化report对象
    curChart.setOption({
            title: {
                subtext: '单位:个',
                subtextStyle: {
                    "fontSize": 13,
                    "fontWeight": 'bolder',
                    "color": "#000000"
                },
                x: 'right',
                y: 'top',
            },
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 1],
                min:0,
                minInterval: 1 
                //解决问题3：实际上的统计信息，其数据都是整数，没有小数，设置最小刻度
            },
            yAxis: {
                type: 'category',
                data:[]
            },
            series: [
                {
                    type: 'bar',
                    barMaxWidth: '50',  //解决问题2：在柱子数量少的时候，剩下的
                    //柱子不要太粗，否则不好看，设置bar最大宽度
                    itemStyle: {
                        normal: {
                            color: function (params) {
                               //解决问题1：柱子的颜色要各种颜色，而不是同一种颜色
                                var colorList = [
                                  '#C1232B', '#B5C334', '#FCCE10', '#E87C25',
                                   '#27727B', '#FE8463', '#9BCA63', '#FAD860', 
                                   '#F3A43B', '#60C0DD', '#D7504B', '#C6E579',
                                    '#F4E001', '#F0805A', '#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    data: []
                }
            ]
    });
    //根据窗口大小调整图表
    window.onresize = curChart.resize; 
    //解决问题4：如果窗口大小变化，图表可以自动进行调整