<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="./echarts.min.js"></script>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./data.js"></script>
</head>
<body>
<script type="text/javascript">
var hotElement=document.createElement("div");
hotElement.id = 'hots';
hotElement.style.width = '100%'
hotElement.style.height = '400px'
document.body.appendChild(hotElement);
var hotChart = echarts.init(document.getElementById('hots'));
// 显示标题，图例和空的坐标轴
hotChart.setOption({
title: {
text: '热门手机型号总排行',
x: 'center'
},
tooltip: { },
legend: {
},
xAxis: {
data: hots.name,
axisLabel : {
show:true,
interval: 0
}
},
yAxis: {},
series: [{
name: '手机',
type: 'bar',
data:hots.count,
color: '#2f4554'
}],
backgroundColor: 'rgba(10,161,255,0.1)',
color: ['#336699']
});
var sysElement=document.createElement("div");
sysElement.id = 'hsys';
sysElement.style.width = '100%'
sysElement.style.height = '400px'
document.body.appendChild(sysElement);
var sysChart = echarts.init(document.getElementById('hsys'));
// 显示标题，图例和空的坐标轴
sysChart.setOption({
title: {
text: '热门手机系统总排行',
x: 'center'
},
tooltip: { },
legend: {
},
xAxis: {
data: hsys.sys_name,
axisLabel : {
show:true,
interval: 0
}
},
yAxis: {},
series: [{
name: '手机',
type: 'bar',
data:hsys.sys_code,
color: '#2f4554'
}],
backgroundColor: 'rgba(10,161,255,0.1)',
color: ['#336699']
});
for(var i=1;i<=num;i++){
var newElement3=document.createElement("div");
newElement3.style.width = '100%'
newElement3.style.height = '80px'
newElement3.style.backgroundColor = '#c9c9c9'
newElement3.style.textAlign = 'center'
newElement3.style.lineHeight = '80px'
newElement3.style.margin = '10px'
var newText = document.createTextNode('( ' +i +' ) '+ type[i-1][0] + ' ( '+type[i-1][1]+' ) ');
newElement3.appendChild(newText)
document.body.appendChild(newElement3);
var newElement=document.createElement("div");
newElement.id = 'sales'+i;
newElement.style.width = '100%'
newElement.style.height = '400px'
document.body.appendChild(newElement);
var newElement2=document.createElement("div");
newElement2.id = 'mSystem'+i;
newElement2.style.width = '100%'
newElement2.style.height = '400px'
document.body.appendChild(newElement2);
var myChart1 = echarts.init(document.getElementById('sales'+i));
// 显示标题，图例和空的坐标轴
myChart1.setOption({
title: {
text: '【'+type[i-1][0]+'】手机热门排行'
},
tooltip: {},
legend: {
data:[type[i-1][0]]
},
xAxis: {
data: pro[i-1].categories,
axisLabel : {
show:true,
interval: 0
}
},
yAxis: {},
series: [{
name: type[i-1][0],
type: 'bar',
data:pro[i-1].data
}]
});
var myChart2 = echarts.init(document.getElementById('mSystem'+i));
// 显示标题，图例和空的坐标轴
myChart2.setOption({
title : {
text: type[i-1][0]+'手机系统排行',
subtext: '京东数据',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: vers[i-1]
},
series : [
{
name: type[i-1][0]+'手机系统排行',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:sys[i-1],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
}
</script>
</body>
</html>
