【Echarts】销毁和创建

• 后台 依赖导入 pom.xml

<!-- https://mvnrepository.com/artifact/com.github.abel533/ECharts -->
<dependency>
    <groupId>com.github.abel533</groupId>
    <artifactId>ECharts</artifactId>
    <version>3.0.0.6</version>
</dependency>

• 创建一个容器， 存放Echarts图

<div ref="salesEchart" style="height: 350px;"> </div>

• 调后台接口获取Echarts数据

//折线图
getOrderOption(value) {
  let _that = this;
  getOrderOption(value).then(reponse => {
    //销毁echarts图
    _that.$echarts.init(this.$refs.salesEchart).dispose();
    this.salesOption = reponse.msg;
    var jsonData = JSON.parse(this.salesOption);
    //渲染echarts
    _that.$echarts.init(this.$refs.salesEchart).setOption(jsonData);
  });
},

• 后台代码备份（自用， 待优化）

@Override
public String selectOrderSalesList(Map<String, String> paramMap) {
    // GSON
    Gson gson = new Gson();
    //最终返回值
    String returnStr = "";
    //定义图表信息
    Option option = new Option();
    //创建类目轴
    CategoryAxis category = new CategoryAxis();
    //创建值轴
    ValueAxis valueAxis = new ValueAxis();
    //坐标轴 值轴文本标签
    valueAxis.axisLabel().formatter("{value}件");
    //值轴单位
    valueAxis.name("件数");
    //坐标轴 值轴刻度最小值，在类目轴中无效
    valueAxis.min(0);
    //重量
    ValueAxis valueAxis2 = new ValueAxis();
    valueAxis2.axisLabel().formatter("{value}kg");
    valueAxis2.name("重量");
    valueAxis2.min(0);
    //Y轴
    List<Axis> valueAxisList = new ArrayList<Axis>();
    valueAxisList.add(valueAxis);
    valueAxisList.add(valueAxis2);
    //折线
    Line line = new Line();
    //柱
    Bar bar = new Bar();
    //确定时间查询条件
    String dataString = "";
    //时间轴
    List<String> xDateList = new ArrayList<String>();
    //值为0的时间集合
    List<Map<String,String>> xDateValueList = new ArrayList<Map<String,String>>();
    try {
        //1.获取传入的时间范围
        String dateFlag = paramMap.get("date");
        //String dateFlag = "d";
        //判断查询条件, 年.月.日, 生成日期List
        if (dateFlag.equals("y")) {
            //按照年查询
            dataString = "y";
            xDateList = DateConvert.yearList(7);
        }else if (dateFlag.equals("m")){
            //按照月查询
            dataString = "m";
            xDateList = DateConvert.monthList(7);
        }else {
            //按照日查询
            dataString = "d";
            xDateList = DateConvert.dayList(7);
        }
        //2.获取品类/小类/品种 查询条件
        String type = paramMap.get("type");
        List<Map<String, String>> typeDataList = new ArrayList<>();
        //2.1判断按品类还是品种:
        if(StringUtils.isNotEmpty(type) && "category".equals(type)){
            //如果传的是品类,则需要先查出该品类下所有的品种,然后分别按品种查询;
            typeDataList = statisticMapper.selectVarietyByCategory(paramMap.get("typeData"));
        }else if(StringUtils.isNotEmpty(type) && "variety".equals(type)){
            //如果传的是品种,则查这个单个品种
            typeDataList = statisticMapper.selectVarietyByVariety(paramMap.get("typeData"));
        }
        //循环品种List查数据库
        for (Map<String, String> dataMap : typeDataList) {
            //品种 值
            String dataCode = dataMap.get("value");
            paramMap.put("dataCode",dataCode);
            //品种 Name
            String dataName = dataMap.get("label");
            //折线分类
            option.tooltip(Trigger.axis).legend(dataName);
            //新建一条线
            line = new Line();
            line.stack(dataName);
            line.name(dataName);
            //新建一个柱
            bar = new Bar();
            bar.stack(dataName);
            bar.name(dataName);
            bar.yAxisIndex(1);
            category = new CategoryAxis();
            for (String date : xDateList) {
                paramMap.put("date",date);
                paramMap.put("dataString",dataString);
                Map<String,String> map = statisticMapper.selectOrderSumList(paramMap);//件数
                Map<String,String> weightMap = statisticMapper.selectOrderWeightSumList(paramMap);//重量
                category.data(date);
                if (null == map) {
                    line.data(0);
                }else {
                    line.data(map.get("orderNumber"));
                };
                if (null ==weightMap){
                    bar.data(0);
                }else{
                    bar.data(weightMap.get("orderWeight"));
                }
            }
            option.series(line);
            option.series(bar);
        }
        option.xAxis(category);
        option.yAxis(valueAxisList);
        //返回值格式化成String
        returnStr = gson.toJson(option);
    } catch (Exception e) {
        LogUtils.error(Constants.OPERATE_QUERY, "订单统计", "销量图Echarts查询失败", e);
        throw new UtilsException(e);
    }
    return returnStr;
}

• SQL备份（自用，待优化）

<!-- 查询订单销售量件数echarts数据 -->
<select id="selectOrderSumList" resultType="java.util.Map">
    SELECT
        s.dict_label names,
        IFNULL(SUM( od.number ),0) orderNumber
    FROM
        b_order_details od
    LEFT JOIN b_goods g ON g.id = od.goodsId AND g.delFlag = 0
    LEFT JOIN sys_dict_data s ON s.dict_value = g.varieties AND s.delFlag = 0
    LEFT JOIN b_order o ON o.orderNo = od.orderNo AND o.delFlag = 0
    WHERE
        od.delFlag = 0
    <if test='"y"== dataString'>
        and DATE_FORMAT(o.orderDate,'%Y') = #{date}
    </if>
    <if test='"m"== dataString'>
        and DATE_FORMAT(o.orderDate,'%Y-%m') = #{date}
    </if>
    <if test='"d"== dataString'>
        and DATE_FORMAT(o.orderDate,'%Y-%m-%d') = #{date}
    </if>
    <if test="type!=null">
        and g.varieties = #{dataCode}
    </if>
    GROUP BY names
</select>