<!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>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 900px;height:400px;"></div>
<div id="m_system" style="width: 900px;height:400px;"></div>
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart1.setOption({
title: {
text: '京东【华为】手机热门排行'
},
tooltip: {},
legend: {
data:['华为']
},
xAxis: {
data: daxian_csvc.categories,
axisLabel : {
show:true,
interval: 0
}
},
yAxis: {},
series: [{
name: '华为',
type: 'bar',
data:daxian_csvc.data
}]
});
var myChart2 = echarts.init(document.getElementById('m_system'));
// 显示标题，图例和空的坐标轴
myChart2.setOption({
title : {
text: '华为手机系统排行',
subtext: '京东数据',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: daxian_csvv_n
},
series : [
{
name: '华为手机系统排行',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:daxian_csvv,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
</script>
</body>
</html>
