duhongming-echarts2javatag: С помощью пользовательских меток реализовано отображение диаграмм ECharts. Идея заимствована у адаптера Android: через фиксированный источник данных отображаются соответствующие диаграммы, при этом не нужно задумываться о внутренней реализации диаграмм.

Реализация графиков Echarts с помощью пользовательских тегов

База данных china_weather.db: http://git.oschina.net/duhongming/echarts2javatag/attach_files

china_weather.7z >>> распаковать >>> поместить в папку Src проекта!

Maven:

    <!-- 必须包：Echarts графические зависимости начинаются -->
        <dependency>
            <groupId>com.github.abel533</groupId>
            <artifactId>ECharts</artifactId>
            <version>2.2.7</version>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>[2.6.2,)</version>
        </dependency>
    <!-- 必须包：Echarts графические зависимости заканчиваются -->
    
    <!-- 演示包：API базы данных Sqlite и ORM-фреймворк начинаются -->
        <dependency>
            <groupId>org.xerial</groupId>
            <artifactId>sqlite-jdbc</artifactId>
            <version>3.8.11.2</version>
        </dependency>
        <dependency>
            <groupId>com.j256.ormlite</groupId>
            <artifactId>ormlite-jdbc</artifactId>
            <version>4.47</version>
        </dependency>
     <!-- 演示包：Sqlite API базы данных и ORM-фреймворк заканчиваются -->
     
     <!-- spring websocket--> 
        <dependency>  
           <groupId>org.springframework</groupId>  
           <artifactId>spring-websocket</artifactId>  
           <version>${spring.version}</version>  
        </dependency>  
        <dependency>  
           <groupId>org.springframework</groupId>  
           <artifactId>spring-messaging</artifactId>  
           <version>${spring.version}</version>  
        </dependency>
        
    <!-- 由于Spring использует Jackson для генерации JSON и возврата его клиенту, начинается -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.4.4</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.4.4</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.4.4</version>
        </dependency>
    <!-- 由于Spring использует Jackson для генерации JSON и возврата его клиенту заканчивается -->

-----------------Динамическая версия----------------- 1 Динамический индикатор Gauge Tag: alt text

    <ec:gauge   id="temperature1" 
                height="360px" 
                uri="/echarts2javatag/webSocket/data" 
                unitName="℃" 
                title="Общий температурный индикатор компании" 
                subtitle="Индикатор температуры №1" 
                measureRange="10000" 
                splitNumber="10"
                axisLabelShow="true"
                toFixed="0">
    </ec:gauge>

1 Данные формата динамического индикатора Gauge:

public class SocketDataGauge {
    private String tag;
    private Double value;
}

private List<SocketDataGauge>

Формат данных Json:
[{"tag":"temperature1","value":178.03634028465075},{"tag":"temperature2","value":6482.322904395684},{"tag":"temperature3","value":2495.388315562964},{"tag":"temperature4","value":1358.7228569841902}]

2 Динамическая линейная диаграмма Line Tag: alt text

    Статическая часть и предыдущая часть одинаковы:
    var option =<echarts:dynamicLine
    id="line_yAxisIndex"
    title="Кривая сравнения температур за 2011 год" 
    subtitle="Кривые сравнения температур основных городов"
    xAxisData="${xAxisData}" 
    yAxisData="${yAxisData}" 
    xAxisName="Прогноз времени"
    yAxisName="Максимальная температура (℃), минимальная температура (℃)" 
    yAxisIndex="${yAxisIndex}"/>;


    Динамическая часть:
    var uri = "/echarts2javatag/webSocket/line/data";
    var ws = new SockJS(uri);  
    ws.onopen = function () {
        //console.log('Info: connection opened.');  
    };  
    ws.onmessage = function (event) { 
        var

*Примечание: В запросе присутствуют фрагменты кода на языке программирования Java, но они не были переведены.* **json = eval("(" + event.data + ")"); // 将数据转成 json 格式**

    // Динамические данные интерфейса addData
    myChart.addData([
        [
            0, // Серия индекса
            json.value1, // Новые данные
            true, // Вставлять ли новые данные в начало очереди
            false // Увеличивать ли длину очереди. Если false, то самостоятельно удалять исходные данные: вставлять новые в конец и удалять из начала очереди
        ],
        [
            1, // Серия индекса
            json.value2, // Новые данные
            false, // Вставлять ли новые данные в начало очереди
            false, // Увеличивать ли длину очереди. Если false, то самостоятельно удалять исходные данные: вставлять новые в конец и удалять из начала очереди
            json.tag // Метка оси координат
        ]
    ]);
    console.log('Received: ' + json);
};

**2 Формат данных динамической линейной диаграммы Line:**

Статическая часть:
    // Данные оси X
    List<String> xAxisData;

    // Данные оси Y
    Map<String, List<Double>> yAxisData;

    // Позиционирование оси Y для двух осей
    Map<String, Integer> yAxisIndex;

Динамическая часть:
    // Данные оси X
    private String tag;

    // Первое значение оси Y
    private Double value1;

    // Второе значение оси Y
    private Double value2;

----------------- Расширенная версия -----------------

**1 Тег двумерного линейного графика с двойными значениями LineDoubleNum:**
![alt text](https://git.oschina.net/duhongming/echarts2javatag/raw/master/WebRoot/images/LineDoubleNum.png?dir=0&filepath=WebRoot%2Fimages%2FLineDoubleNum.png&oid=d1492ce25c08203ab35a66d42d26c85a33ed1ba4&sha=db1ac448ca7a608ad312c0f9243a90fb0d9ddb70 "Двумерный линейный график с двойными значениями")
```xml
    <div id="line_doubleNum"  class="main000"></div>
    <echarts:lineDoubleNum 
        id="line_doubleNum"
        title="Двумерный график с двойными значениями" 
        subtitle="Кривая сравнения краткосрочных прогнозных данных"
        xAxisName="Прогнозное время"
        yAxisName="Фактическое энергопотребление (МВт)" 
        axisDataArr="${axisDataArr}"/>

Тег 1 Двумерный линейный график с двойными значениями lineDoubleNum:

// Массив массивов типа Double для каждого типа данных
private Map<String, Double[][]> axisDataArr;

2 Тег линейного графика времени lineTimeLine: alt text

    <div id="line_yAxisIndex"  class="main000"></div>
    <echarts:lineTimeLine
        id="line_yAxisIndex"
        title="Температурная кривая 2011 года" 
        subtitle="Температурные кривые основных городов"
        xAxisName="Прогнозируемое время"
        yAxisName="Максимальная температура (℃), минимальная температура (℃)" 
        xAxisData="${xAxisData}" 
        yAxisData="${yAxisData}"
        timelineData="${timelineData}"
        timelineAxisData="${timelineAxisData}"
        yAxisIndex="${yAxisIndex}"/>

Тег 2 Линейный график времени lineTimeLine:

// Данные по оси X
List<String> xAxisData;

// Данные по оси Y
Map<String, List<Double>> yAxisData;

// Положение оси Y в случае двух осей
Map<String, Integer> yAxisIndex;

// Временная ось данных Y
List<Map<String, List<Double>>> timelineAxisData;

// Ось X временных данных
List<String> timelineData;

3 Тег обратного столбчатого графика Bar: alt text

    <div id="line_yAxisIndex"  class="main000"></div>
    <echarts:bar
        id="line_yAxisIndex"
        title="Кривая сравнения краткосрочных прогнозных данных" 
        subtitle="Кривая сравнения краткосрочных прогнозных данных"
        xAxisData="${xAxisData}" 
        yAxisData="${yAxisData}" 
        xAxisName="Время прогноза"
        yAxisName="Реальное энергопотребление (МВ), реальное общее излучение (w/㎡)" 
        yAxisIndex="${yAxisIndex}"/>

Тег 3 Обратный столбчатый график Bar:

// Данные по оси X
private List<String> xAxisData;

// Данные по оси Y
private Map<String, List<Double>> yAxisData;

// Положение оси Y в случае двух осей
private Map<String, Integer> yAxisIndex;

Проблема преобразования единиц измерения графиков: не определено

----------------- Базовая версия -----------------

1 Линейный тег Line: alt text

    <div id="line_yAxisIndex"  class="main000"></div>
    <echarts:line 
        id="line_yAxisIndex"
        title="Температурная кривая 2011 года" 
        subtitle="Температурные кривые основных городов"
        xAxisData="${xAxisData}"

В запросе используется язык программирования JavaScript.

OSCHINA-MIRROR/duhongming-echarts2javatag

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия