ECharts基础用法列子

Posted 2020-11-18 jianghengchao

//所需jar包
<script type="text/javascript" src="<%=basePath%>/assets/plugins/jQuery/jquery-1.11.3.min.js"></script>
<!-- echerts图表 -->
<script type="text/javascript" src="<%=basePath%>/assets/js/echarts/echarts.js"></script>
<script type="text/javascript" src="<%=basePath%>/assets/js/common/common_echarts.js"></script>

 

mainpage.prototype.initEchars= function(){ //加载柱状图
	
	//通用部分
　　　　　if(myChart2 = null && myChart2 != "" && myChart2 != undefined) {
	　　　　myChart2.dispose(); //每次加载之前清除之前的echarts
	}
	var myChart2 = echarts.init(document.getElementById(‘swdlEchars‘));

　　　　　//图设置参数部分
	option = {
	    color: [‘#3398DB‘],
	    title:{
			show: true,
			text: ‘机组顶盖‘,
			x:‘center‘,
			textStyle:{//标题内容的样式
	            //color:‘#e4393c‘,//京东红
	            //fontStyle:‘normal‘,//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
	          ///  fontWeight:"lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
	            fontFamily:"san-serif",//主题文字字体，默认微软雅黑
	            fontSize:12//主题文字字体大小，默认为18px
	        },
		},
	    tooltip : {
	        trigger: ‘axis‘,
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : ‘shadow‘        // 默认为直线，可选为：‘line‘ | ‘shadow‘
	        }
	    },
	    grid: {
	        left: ‘3%‘,
	        right: ‘4%‘,
	        bottom: ‘3%‘,
	        containLabel: true
	    },
	    xAxis : [
	        {
	            type : ‘category‘,
	            data : [‘同期‘, ‘本期‘],
	            axisTick: {
	                alignWithLabel: true
	            }
	        }
	    ],
	    yAxis : [
	        {
	            type : ‘value‘
	        }
	    ],
	    series : [
	        {
	            name:‘年上网电量‘,
	            type:‘bar‘,
	            barWidth: ‘60%‘,
	            data:[100, 600,],
	            itemStyle: {
	                normal: {
	                    color: function(params) {
	                        // build a color map as your need.
	                    	var colorList = [‘#3398DB‘,‘#32DC61‘];
	                        return colorList[params.dataIndex]
	                    }
	                },
	            }
	        }
	    ]
	};
	//通用部分
	myChart2.setOption(option, true);
}