ECharts基础用法列子

//所需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); }

  

猜你喜欢

转载自www.cnblogs.com/jianghengchao/p/9123475.html
今日推荐