效果图示如下
后台代码用的框架是SSM 双Y轴根据后台数据展示
大致代码如下：
List<Map> findqushi(@Param("date_id") String date_id, @Param("goodsId") String goodsId);
//决定Y轴的最值
List<Map> getgoodsCost(@Param("goodsId") String goodsId);
二、service
//echarts需要的后台数据
public List<Map> findqushi(String date_id, String goodsId) {
return tradeDao.findqushi(date_id, goodsId);
}
三、Controller
@ResponseBody
@RequestMapping(value = "/qushi", method = RequestMethod.POST)
@RequiresPermissions("trade")
public void findqushi(String goodsId) {
List<Map> goodsCost = tradeDao.getgoodsCost(goodsId);
String date_id = null;
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
Date date = new Date();
date_id = simpleDateFormat.format(date); // 当天
List<Map> entityList = tradeService.findqushi(date_id, goodsId);
Map<String, Object> map = new HashMap<>();
map.put("rows", entityList);
map.put("goodsCost", goodsCost);
System.out.println(map.toString());
try {
response.getWriter().write(new String(JSON.toJSONString(map).getBytes(), "UTF-8"));
request.setCharacterEncoding("UTF-8");
} catch (Exception e) {
e.printStackTrace();
}
}
四、xml
<select id="findqushi" resultType="java.util.Map">
SELECT
DATE_FORMAT(t.buy_time,'%Y-%c-%d %H:%i:%s')
as buyTime,
t.buy_point as buyPoint,
t.hold_num as holdNum
FROM
tb_trade t LEFT
JOIN
tb_user tu
ON
t.user_id
=
tu.id LEFT JOIN
tb_ml3_agent
tma on
tma.agent_invite_code =
tu.agent_invite_code
LEFT
JOIN
tb_ml3_member_units tmmu ON tma.units_id
=
tmmu.id LEFT JOIN
tb_ml3_operate_center center ON center.id =
tma.units_id
WHERE serial_no
like 'JY%'
<if test="goodsId!=null">
and t.goods_id=#{goodsId}
</if>
<if test="date_id!=null">
and t.buy_time LIKE '${date_id}%'
</if>
ORDER BY buy_time ASC
</select>
<select id="getgoodsCost" resultType="java.util.Map">
select sub.goods_cost as
goodsCost from tb_sub_goods sub where id=#{goodsId}
</select>
五、jsp
1.
2
<div id="line" style="width: 1000px; height: 500px; margin-top: 80px;"></div>
<script>
/* 先定义需要的数据*/
var dataA = new Array(); /* 交易时间 */
var dataB = new Array(); /* 交易价格 */
var dataD = new Array(); /* 商品名 */
var dataE = new Array(); /* 交易数量 */
var dataF = new Array(); /* 基准价 */
$(function() {
showLine();
});
function showLine() {
$.ajax({
type : "POST",
url : "${ctx}/trade/qushi?goodsId=1cbda9688d0f4b90b5c0c4e622d9ff5a",
dataType : 'json',
success : function(data) {
var row = data.rows;
var average = data.average;
var goodsCost = data.goodsCost;
$.each(row, function(n, value) {
dataA.push(value.buyTime);//時間 X
dataB.push(value.buyPoint);//價格 Y
dataE.push(value.holdNum);// 数量
})
$.each(average, function(n, value) {
dataD.push(value.goodsName);//價格
})
$.each(goodsCost, function(n, value) {
dataF.push(value.goodsCost);//基准价 Y轴
})
yqslztqsBySentiment(dataA, dataB, dataC, dataE,
dataF)
}
})
}
function yqslztqsBySentiment(dataA, dataB, dataC, dataE, dataF) {
var yqqdzbfxT = {
titleData : [ '成交数量' ],
titleX : dataA,
sqlData : [//
{
name : '成交价格',
type : 'line',
data : dataB
} ]
};
echartsFun("line", dataD + "价格走势图", yqqdzbfxT);
function echartsFun(id, title, result) {
var yqqdzbfxT = echarts.init(document.getElementById(id));
var yqqdzbfxT_option = {
"title" : {
"text" : title,
"left" : "left",
"textStyle" : {
"color" : "#fff"
}
},
"toolbox" : {
"show" : "true",
"feature" : {
"mark" : {
"show" : "true"
},
"dataView" : {
"show" : "true",
"readOnly" : "false"
},
"magicType" : {
"show" : "true",
"type" : [ 'line', 'bar' ]
},
"restore" : {
"show" : "true"
},
"saveAsImage" : {
"show" : "true"
}
}
},
"legend" : {
"data" : [ '交易价格', '交易数量' ],
},
"calculable" : "true",
"color" : "#384757",
"tooltip" : {
"trigger" : "axis",
/* "axisPointer" : {
"type" : "cross",
"crossStyle" : {
"color" : "#384757"
}
} */
},
"xAxis" : [ {
"type" : "category",
"data" : dataA,
"axisPointer" : {
"type" : "shadow"
},
"axisLabel" : {
"show" : true,
"textStyle" : {
"color" : "#7d838b"
}
}
} ],
"yAxis" : [ {
"type" : "value",
"min" : 0,
"max" : 8,
"splitNumber" : 10,
"name" : "交易数量",
"nameTextStyle" : {
"color" : "#7d838b"
},
"axisLabel" : {
"show" : true,
"textStyle" : {
"color" : "#7d838b"
}
},
"axisLine" : {
"show" : "true"
},
},
{
"type" : "value",
"max" : dataF * 1.1,
"min" : dataF * 0.9,
"splitNumber" : 10,
"axisTick" : {
"show" : false
},
"position" : 'right',
"splitLine" : {
"show" : false,
"lineStyle" : {
"color" : "#7d838b"
}
},
"name" : "交易价格",
"nameTextStyle" : {
"color" : "#7d838b"
},
"axisLabel" : {
"show" : "flase",
"textStyle" : {
"color" : "#7d838b"
}
}
} ],
"grid" : {
"top" : "20%"
},
"series" : [ {
"name" : "交易数量",
"type" : "bar",
"yAxisIndex" : 0,
"data" : dataE,
"barWidth" : 20,
"itemStyle" : {
"normal" : {
"color" : {
"type" : "linear",
"x" : 0,
"y" : 0,
"x2" : 0,
"y2" : 1,
"colorStops" : [ {
"offset" : 0,
"color" : "rgba(255,37,117,0.7)"
}, {
"offset" : 0.5,
"color" : "rgba(0,133,245,0.7)"
}, {
"offset" : 1,
"color" : "rgba(0,133,245,0.3)"
} ],
"globalCoord" : false
}
}
}
},
{
"name" : "交易价格",
"type" : "line",
"yAxisIndex" : 1,
"data" : dataB,
"markPoint" : {
"data" : [ {
"type" : 'max',
"name" : '最大值'
}, {
"type" : 'min',
"name" : '最小值'
} ]
},
"markLine" : {
"data" : [ {
"type" : 'average',
"name" : '平均值',
} ]
},
"itemStyle" : {
"normal" : {
"lineStyle" : {
"color" : "#FF3030"
},
"color" : "#ffaa00"
}
},
"smooth" : true
} ]
};
yqqdzbfxT.setOption(yqqdzbfxT_option);
}
}
</script>
六、后台返回的数据格式：
{
"goodsCost": [
{
"goodsCost": 636
}
],
"rows": [
{
"holdNum": 1,
"buyPoint": 685,
"buyTime": "2018-9-29 10:28:35"
},
{
"holdNum": 2,
"buyPoint": 699,
"buyTime": "2018-9-29 17:01:55"
},
{
"holdNum": 1,
"buyPoint": 621,
"buyTime": "2018-9-29 17:02:44"
}
]
}