效果图示如下
后台代码用的框架是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">SELECTDATE_FORMAT(t.buy_time,'%Y-%c-%d %H:%i:%s')as buyTime,t.buy_point as buyPoint,t.hold_num as holdNumFROMtb_trade t LEFTJOINtb_user tuONt.user_id=tu.id LEFT JOINtb_ml3_agenttma ontma.agent_invite_code =tu.agent_invite_codeLEFTJOINtb_ml3_member_units tmmu ON tma.units_id=tmmu.id LEFT JOINtb_ml3_operate_center center ON center.id =tma.units_idWHERE serial_nolike '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 asgoodsCost 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);//時間 XdataB.push(value.buyPoint);//價格 YdataE.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": "-9-29 10:28:35"},{"holdNum": 2,"buyPoint": 699,"buyTime": "-9-29 17:01:55"},{"holdNum": 1,"buyPoint": 621,"buyTime": "-9-29 17:02:44"}]}
