<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<style>
.selbox{
width:100%;
display: flex;
display: -webkit-flex;
justify-content: center;
}
#sel{
padding: 5px 10px;
font-size: 14px;
border-radius: 4px;
}
</style>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<div class="selbox">
<select name="" id="sel">
<option value="1">查询近一个月</option>
<option value="2">查询近三个月</option>
<option value="3">查询近半年</option>
</select>
</div>
<!-- ECharts单文件引入 -->
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../echarts-2.2.7/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
// echarts: 'http://echarts.baidu.com/build/dist'
echarts: '../echarts-2.2.7/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line', // 使用柱状图就加载bar模块,按需加载
'echarts/chart/bar'
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
$.when(
$.ajax({
url: '1.json',
data: {}
})
).then(function (data) {
console.log(data)
var timeArr = [];
var priceArr = [];
var name = data[0].quoteName;
var subtext = new Date(data[0].quoteDate);
var year = subtext.getFullYear();
$.each(data, function () {
var date = new Date(this.quoteDate);
var year = date.getFullYear();
// console.log(date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate())
timeArr.unshift((date.getMonth() + 1) + "/" + date.getDate());
priceArr.unshift(this.marketPrice);
});
console.log(timeArr);
console.log(priceArr);
echars(name,year,timeArr,priceArr)
function echars(name,year,timeArr,priceArr){
option = {
// backgroundColor:'#000',
title: {
x: 'left',
text: name+'sadasd车价变化',
subtext: year + "年",
subtextStyle: {
color: '#000', // 副标题文字颜色
fontWeight: 'bold',
fontSize: 14
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['车价']
},
toolbox: {
show: true,
feature: {
mark: {
show: false,
title: {
mark: '辅助线开关',
markUndo: '删除辅助线',
markClear: '清空辅助线'
},
lineStyle: {
width: 2,
color: '#1e90ff',
type: 'dashed'
}
},
dataZoom: {
show: true,
title: {
dataZoom: '区域缩放',
dataZoomReset: '区域缩放后退'
}
},
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: timeArr
// data:[1231231,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
}
],
yAxis: [
{
// min:200000,
// max:500000,
type: 'value',
axisLabel: {
formatter: '{value} 元'
}
}
],
/* yAxis: {
min:200000,
max:400000,
axisLabel:{
formatter: function (value) {
var texts = [];
if(value==200000){
texts.push('200000');
}
else if (value <=300000) {
texts.push('好');
}
else if (value<= 400000) {
texts.push('很好');
}
else if(value<= 500000){
texts.push('非常好');
}
else{
texts.push('完美');
}
return texts;
}
}
},*/
calculable: false,
series: [
{
name: '车价',
type: 'line',
data: priceArr,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
// {
// name: '最低气温',
// type: 'line',
// data: [1, -2, 2, 5, 3, 2, 0],
// markPoint: {
// data: [
// {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
// ]
// },
// markLine: {
// data: [
// {type: 'average', name: '平均值'}
// ]
// }
// }
]
};
}
// 为echarts对象加载数据
myChart.setOption(option);
$("#sel").change(function () {
var val=$("#sel").val();
var url='1.json';
if(val==1){
}else if(val==2){
}else if(val==3){
}
myChart.clear();
$.when(
$.ajax({
url: url,
data: {}
})
).then(function (data) {
var timeArr = [];
var priceArr = [];
var name = data[0].quoteName;
var subtext = new Date(data[0].quoteDate);
var year = subtext.getFullYear();
$.each(data, function () {
var date = new Date(this.quoteDate);
var year = date.getFullYear();
timeArr.unshift((date.getMonth() + 1) + "/" + date.getDate());
priceArr.unshift(this.marketPrice);
});
echars(name,year,timeArr,priceArr);
myChart.setOption(option);
})
})
});
}
);
</script>
<script>
</script>
</body>