echarts图表

<!--图表内容-->
		            <div id="main" style="width:100%;height:500px"></div>

//路径配置
		require.config({
	            paths: {
	                'echarts':'http://echarts.baidu.com/build/dist'
	            }
	        });
			//使用(入口)
	        require(
	            [
	                'echarts',
	                'echarts/chart/line',   //按需加载所需图表
	                'echarts/chart/bar'
	            ],
	            function (ec) {
	            	//基于准备好的dom,初始化echarts图表
	                var myChart = ec.init(document.getElementById('main'));
	                var option = {
	                		//提示框,展现更详细的数据
	                	    tooltip : {
	                	        trigger: 'axis'
	                	    },
	                	    //辅助工具箱
	                	    toolbox: {
	                	        show : true,
	                	        feature : {
	                	            mark : {show: true},
	                	            dataView : {show: true, readOnly: false},
	                	            magicType: {show: true, type: ['line', 'bar','stack', 'tiled']},
	                	            restore : {show: true},
	                	            saveAsImage : {show: true}
	                	        }
	                	    },
	                	    calculable : true,
	                	    //图例
	                	    legend: {
	                	        data:['人均游戏数','游戏人数']
	                	    },
	                	    //数据区域缩放
	                	    dataZoom: {
						        show: true,
						        start : 0,
						        handleColor:"#67ba3f"
						    },
						    //x坐标轴.通常默认为类目型
	                	    xAxis : [
	                	        {
	                	            type : 'category',
	                	            data : ['2017/2/9','2017/2/10','2017/2/11','2017/2/12','2017/2/13','2017/2/14',
								            '2017/2/15','2017/2/16','2017/2/17','2017/2/18','2017/2/19','2017/2/20',
								            '2017/2/21','2017/2/22','2017/2/23','2017/2/24','2017/2/25','2017/2/26',
								            '2017/2/27','2017/2/28','2017/3/1','2017/3/2','2017/3/3','2017/3/4','2017/3/5',
								            '2017/3/6','2017/3/7']
	                	        }
	                	    ],
	                	    //y坐标轴,通常默认为数值型
	                	    yAxis : [
	                	        {
	                	            type : 'value',
	                	            name : '局',
	                	        },
	                	        {
	                	            type : 'value',
	                	            name : '人',
	                	        }
	                	    ],
	                	    //series数据系列
	                	    series : [
								{
								    name:'人均游戏数',
								    type:'line',
								    yAxisIndex: 1,
								    itemStyle: {normal: {color:'rgba(46,138,224,0.5)'}},
								    data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
								},
	                	        {
	                	            name:'游戏人数',
	                	            type:'bar',
	                	            itemStyle: {normal: {color:'#67ba3f'}},
	                	            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
	                	        }    
	                	    ]
	                	};
	                //为echarts对象加载数据
	                myChart.setOption(option);
            });            

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值