<!--图表内容-->
<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);
});