ECharts折线图实现（前端、后端、数据结构）

ECharts简介

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达 图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现。

使用场景

在项目中，根据用户选择的信息展示对应的折线图，折线图不是在一个ECharts上展示的，一个信息只占用一个ECharts

实现步骤

1、引入Echarts并且绘制一个简单的图表（html）

<script  src="js/echarts.js"></script>

<div id="main" style="min-width: 500px; height: 500px; max-width: 1500px; margin:50px auto;"></div>

2、创建一个折线图（js）

var option;
function dataHisEcharts(dataList){
    console.log(dataList);
    var series  = [];
    var names=[];
    $("#main").empty();// 清空div内容
    for (var key in dataList) {
        var datas = dataList[key];
        var tagValue=[];
        names = [];//将要展示的名字集合清空
        if (key != 'time') {// 如果数据为x轴，就不再创建div
            $("#main").append("<div id='main" + key + "' style='min-width: 500px; height: 500px; max-width: 1500px; margin:50px auto;'></div>");
        }
        var myChart = echarts.init(document.getElementById('main'+key));
        for (var i = 0; i < datas.length; i++) {
            if(datas[i]!=null&&datas[i]!=undefined&&datas[i]!=""){
                tagValue.push(datas[i]);
            }
        }
        if (key != 'time') {
            var Item = {
                name: key,
                type: 'line',
                data: tagValue
            };
            series = [];// 将数组清空
            series.push(Item);
            names.push(key);
        }

        option = {
            title: {
                text: ''+key+'监控属性趋势曲线'
            },
            legend: {
                top:"6%",
                data: names,
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
                    var htmlStr = '';
                    for(var i=0;i<params.length;i++){
                        var param = params[i];
                        var xName = param.name;//x轴的名称
                        var seriesName = param.seriesName;//图例名称
                        var value = param.value;//y轴值
                        var color = param.color;//图例颜色
                        if(i===0){
                            htmlStr += xName + '<br/>';//x轴的名称
                            htmlStr +='<div>';
                            htmlStr += '<span style="margin-top:5px;float:left;width:12px;height:12px;border-radius:50%;background-color:'+color+';display: block"></span>&nbsp;';
                            htmlStr += seriesName + '：' + value;
                        }else{
                            htmlStr +='<div>';
                            //为了保证和原来的效果一样，这里自己实现了一个点的效果
                            htmlStr += '<span style="margin-top:5px;float:left;width:12px;height:12px;border-radius:50%;background-color:'+color+';display: block"></span>&nbsp;';
                            //圆点后面显示的文本
                            htmlStr += seriesName + '：' + value;
                        }
                        if(seriesName.indexOf("体积总量")!=-1){
                            htmlStr += 'm³';
                        }else if(seriesName.indexOf("体积流量")!=-1){
                            htmlStr += 'm³/h';
                        }else if(seriesName.indexOf("压力")!=-1){
                            htmlStr += 'KPa';
                        }else if(seriesName.indexOf("温度")!=-1){
                            htmlStr += '℃';
                        }
                        htmlStr += '</div>';
                    }
                    return htmlStr;
                }
            },
            grid: {
                top:'30%',
                left: '8%',
                right: '8%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: {
                data: dataList["time"],
                boundaryGap: false
            },
            yAxis: {
            },
            series: []
        };
        option.series = series; // 设置图表
        myChart.clear();
        myChart.setOption(option, true);// 使用刚指定的配置项和数据显示图表。
    }
}

3、了解ECharts需要的数据结构

ECharts需要的数据结构是x，y格式的，要在后台将数据装换成下图这种格式返回给ECharts

4、后台将数据整合返回给ECharts

后台的代码实现方式有很多种，在此仅提供一个参考的方法

public Map<String, String[]> getPointHistorical(List<findTiaoJian> dataList) {
        // 最终返回的集合
        Map<String, String[]> map = new HashMap<>();
        // 返回的时间的集合
        String[] times = new String[dataList.size()];
        String[] strings;
        List<String> datetimeList = new ArrayList<>();
        for (int i = 0; i < dataList.size(); i++) {
            // 存储时间
            String dates = dataList.get(i).getTime();
            times[i] = dates;
            if (!datetimeList.contains(times[i])) {
                datetimeList.add(times[i]);
            }
        }
        // 将y轴数据存入map
        Map<String, List<findTiaoJian>> PointDataMapByName = dataList.stream().collect(Collectors.groupingBy(findTiaoJian::getPoint_name));
        for (Map.Entry<String, List<findTiaoJian>> stringListEntry : PointDataMapByName.entrySet()) {
            String tagName = stringListEntry.getKey();
            map.put(tagName, getTagVlaues(datetimeList, dataList, tagName));

        }
        strings = datetimeList.toArray(new String[datetimeList.size()]);
        // 将x轴数据存入map
        map.put("time", strings);
        return map;
    }
    /**
    * 存储y轴参数
    **/
    public String[] getTagVlaues(List<String> datetimeList, List<findTiaoJian> dataList, String tagName) {
        String[] values = new String[dataList.size()];
        for (int i = 0; i < datetimeList.size (); i++) {
            String datetimeStr = datetimeList.get(i);
            findTiaoJian pointData = dataList.stream().filter(data -> datetimeStr.equals(data.getTime())
                    && tagName.equals(data.getPoint_name())).findFirst().orElse(null);
            if(pointData != null){
                String value = new BigDecimal(pointData.getValue()).setScale(4, BigDecimal.ROUND_DOWN).stripTrailingZeros().toPlainString();
                values[i] = value;
            }else{
                values[i] = "0";
            }
        }
        return values;
    }

5、效果图

梦想也许在今天无法实现，但重要的是，它在你心里。重要的是，你一直在努力，加油！！！