<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts </title>
</head>
<body>
<!-- 选择商品 -->
<Form action="" method="post" name="myform">
<select name="sel" id="se" >
<option value="1" selected>编号为1的商品</option>
<option value="2" >编号为2的商品</option>
<option value="3">编号为3的商品</option>
</select>
<input type="button" name="btnOK" value="确认" onClick="look()">
</center>
</Form>
<div id="main" style="height:400px">
</div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
//全局变量,list是表格数据，myChart是全局表格
var myChart;
var list=[];
//选择下拉框选择不一样编号的商品
function look(){
var se =document.getElementById("se");
var option=se.getElementsByTagName("option");
var str = "" ;
for(var i=0;i<option.length;++i)
{
if(option[i].selected)
{
var temp = option[i].value
}
}
getAjaxData(temp);
}
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line' // 使用柱状图就加载bar模块，饼图加载line模块,按需求加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
myChart = ec.init(document.getElementById('main'));
list=[];
var option = {
title : {
text: '该商品每个月销量',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['平均销量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['一月份','二月份','三月份','四月份','五月份','六月份','七月份','八月份','九月份','十月份','十月份','十一月份','十二月份']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 件'
}
}
],
series : [
{
name:'每个月销量',
type:'line',
data:[],
markPoint : {
data : [
{type : 'max', name: '销量的峰值'},
{type : 'min', name: '销量的低谷'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
]
};
// 为echarts对象加载数据
myChart.setOption(option); //先把可选项注入myChart中
myChart.hideLoading();
getAjaxData(1); //一开始加载默认显示一号商品
}
);
</script>
<script type="text/javascript">
function getAjaxData(pid){
var options = myChart.getOption();
$.getJSON("http://localhost:8000/app/v1/historys/?format=json&pid="+pid, function(data){
for(var i=0;i<5;i++){
list[i]=data.objects[i].data.number;
}
options.series[0].data=list;
myChart.setOption(options);
});
}
</script>
</body>