Слияние кода завершено, страница обновится автоматически
Текущая версия 
Этот проект представляет собой пакет для использования ECharts в Java-разработке с целью удобства создания всех необходимых данных для ECharts, таких как полная структура Option. В Option содержится информация о Series, таких как Bar-столбчатый график, Line-линейный график, Pie-пироговый график, Chord-хордовый график и так далее; поддерживаются все типы графиков ECharts. Поддерживаются все классы Style, такие как AreaStyle, ChordStyle, ItemStyle, LineStyle, LinkStyle и другие. Также поддерживаются различные типы данных Data, включая универсальный Data, а также специализированные структуры данных, такие как PieData, MapData, ScatterData, KData и другие.
Вы можете использовать этот проект для прямого создания объекта Option, преобразования его в JSON и последующего установки через js с помощью myChart.setOption(option). Либо вы можете создать базовый объект Option на стороне клиента и затем использовать этот проект для создания любой части данных внутри него, используя поддерживаемые типы Series.
Для удобства использования соответствующей версии ECharts, номер версии данного проекта совпадает с номером версии ECharts. Учитывая малое количество сообщений об ошибках от пользователей, каждое исправление ошибок приводит к выпуску новой небольшой версии; при этом исправления ошибок проводятся только для текущей основной версии.## Примеры
ECharts-Java: быстрое создание графиков ECharts с использованием Java
<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>ECharts</artifactId>
<version>последняя версия</version>
</dependency>
ECharts-x.x.x.jar API документация Откройте страницу, найдите нужную версию и скачайте файл javadoc, после чего распакуйте его.
avoidLabelOverlap
center
areaStyle для Line
lineStyle
style и label, атрибуты position, formatter, textStyle добавлены в normal и emphasis.AxisLine в Gauge #65broken в LineType #58value в TreeData изменён на Double, но сохранена возможность создания объекта через конструктор Integer
TreeData добавлены недостающие атрибуты symbol и symbolSize #69AxisPointer добавлен атрибут show, который используется в примере scatter6<Object> в свойстве data класса AbstractData и связанных вызовахEMap, полностью совместимый с Map (карта), чтобы избежать проблем при использовании вместе с java.util.Map
SeriesFactory, предоставляющий методы для создания всех подклассов Series
Legend удалены все упоминания типа <Object>
FsonOption.BarTest14, который демонстрирует радужный столбчатый график.
Option используется в основной реализации кода, не требует никаких зависимостей.GsonOption может использоваться в основном коде, но требуются импорты библиотеки Gson. Метод toString() преобразует данные в JSON-формат (поддерживает функцию, подробнее см. ниже описание функции).EnhancedOption предназначен для тестирования и удобен для просмотра эффекта непосредственно в браузере.
При использовании метода toString() для GsonOption и FsonOption, перед отправкой данных на клиентскую сторону, необходимо использовать eval('('+optionJsonStr+')') для преобразования данных в JSON-формат.
функции
Поскольку тип функция не входит в стандарт JSON, большинство библиотек JSON не поддерживают его напрямую. Самым простым способом обработки этого типа является преобразование строки при конвертации в JSON.
Хотя библиотеки Jackson JSON и Fastjson могут поддерживать этот тип через аннотации или реализацию интерфейса сериализации, это всё же слишком специфично и сложно для использования. Поэтому лучше всего обрабатывать строки напрямую или в JavaScript.
В этом проекте представлено решение с использованием GSON — переопределение метода toString() для вывода строки в JSON-формате и поддержка двух форм функции:
{
formatter: function(value) {
return value.substring(0, 8);
}
}
// или
{
formatter: (function() {
return 'Temperature : <br/>{b}km : {c}°C';
})();
}
Конечно, эта форма имеет строгие требования к записи в Java:
option.tooltip().trigger(Trigger.axis).formatter("function(value){return value.substring(0,8);}");
option.tooltip();
``````markdown
trigger(Trigger.axis).formatter("(function(){return 'Temperature : <br/>{b}km : {c}°C';})();");
1. Пример первой формы показывает, что двойные кавычки и слово `function` должны быть написаны без пробелов между ними, иначе они не будут распознаны. Затем следует заключительный `}`", здесь также должны отсутствовать пробелы между ними. В коде, расположенном между этими двумя частями, не должно встречаться `}`". В противном случае произойдет ошибка при проверке. Если в `{}` содержится строка, используйте одинарные кавычки `'`, а если внутри строки используются двойные кавычки, замените их на `\\"`.
```Далее рассмотрим второй случай, где в "function" двойные кавычки, скобки и слово `function` должны быть расположены друг за другом без пробелов, иначе они не будут распознаны. Заключительная часть должна выглядеть как `})()` без пробелов между ними. В коде, расположенном между этими двумя частями, не должно встречаться `})()`.
Если в {} содержится строка, используйте одинарные кавычки ', а если внутри строки используются двойные кавычки, замените их на \\".
Приведенные выше примеры использования function просты и не ограничиваются использованием в formatter. Все значения могут быть записаны таким образом, поэтому вы можете использовать этот подход для создания своего Option.
Ссылка на пример ECharts: http://echarts.baidu.com/doc/example/line5.html Адрес тестового кода: LineTest5.java
@Test
public void test() {
// Адрес: http://echarts.baidu.com/doc/example/line5.html
EnhancedOption option = new EnhancedOption();
option.legend("Высота (км) и температура (°C)");
option.toolbox().show(true).feature(
Tool.mark,
Tool.dataView,
new MagicType(Magic.line, Magic.bar),
Tool.restore,
Tool.saveAsImage);
option.calculable(true);
option.tooltip().trigger(Trigger.axis).formatter("Температура: <br/>{b} км: {c} °C");
ValueAxis valueAxis = new ValueAxis();
valueAxis.axisLabel().formatter("{value} °C");
option.xAxis(valueAxis);
``````markdown
CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.axisLine().onZero(false);
categoryAxis.axisLabel().formatter("{value} km"); // {value} км
categoryAxis.boundaryGap(false);
categoryAxis.data(0, 10, 20, 30, 40, 50, 60, 70, 80);
option.yAxis(categoryAxis);
Line line = new Line();
line.smooth(true).name("Высота (км) и температура (°C)").data(15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5);
line.itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
option.series(line);
option.exportToHtml("line5.html");
option.view();
}
Код генерирует следующий JSON:
{
// JSON content here
}
``````javascript
{
"calculable": true,
"toolbox": {
"show": true,
"feature": {
"restore": {
"show": true,
"title": "Восстановление"
},
"magicType": {
"show": true,
"title": {
"line": "Переключение линий",
"stack": "Накопление",
"bar": "Переключение столбцов",
"tiled": "Плитка"
},
"type": ["line", "bar"]
},
"dataView": {
"show": true,
"title": "Просмотр данных",
"readOnly": false,
"lang": ["Data View", "Закрыть", "Обновить"]
},
"mark": {
"show": true,
"title": {
"mark": "Отображение вспомогательной линии",
"markClear": "Очистка вспомогательных линий",
"markUndo": "Отмена вспомогательной линии"
},
"lineStyle": {
"color": "#1e90ff",
"type": "пунктир",
"width": 2
}
},
"saveAsImage": {
"show": true,
"title": "Сохранить как изображение",
"type": "png",
"lang": ["Кликните чтобы сохранить"]
}
}
},
"tooltip": {
"trigger": "axis",
"formatter": "Temperature : <br/>{b}km : {c}°C"
},
"legend": {
"data": ["Высота (км) и температура (°C)"]
},
"xAxis": [{
"type": "value",
"axisLabel": {
"formatter": "{value} °C"
}
}],
"yAxis": [{
"type": "category",
"boundaryGap": false,
"axisLine": {
"onZero": false
},
"axisLabel": {
"formatter": "{value} km"
},
"data": [0, 10, 20, 30, 40, 50, 60, 70, 80]
}],
"series": [{
"smooth": true,
"name": "Высота (км) и температура (°C)",
"type": "line",
"itemStyle": {
"normal": {
"lineStyle": {
"shadowColor": "rgba(0,0,0,0.4)"
}
},
"emphasis": {}
},
"data": [
15, -50, -56.5, -46.5, -22.1, -2.5, -27.0
],
"second_example": "(function(){}())"Соответствующий пример ECharts доступен по адресу: [http://echarts.baidu.com/doc/example/pie6.html](http://echarts.baidu.com/doc/example/pie6.html)
Адрес тестового кода: PieTest6.java
@Test
public void test() {
// Адрес: http://echarts.baidu.com/doc/example/pie6.html
ItemStyle dataStyle = new ItemStyle();
dataStyle.normal().label(new Label().show(false)).labelLine().show(false);
ItemStyle placeHolderStyle = new ItemStyle();
placeHolderStyle.normal().color("rgba(0,0,0,0)").label(new Label().show(false)).labelLine().show(false);
placeHolderStyle.emphasis().color("rgba(0,0,0,0)");
EnhancedOption option = new EnhancedOption();
option.title()
.text("Вы счастливы?")
.subtext("Из ExcelHome")
.sublink("http://e.weibo.com/1341556070/AhQXtjbqh")
.x(X.center)
.y(Y.center)
.itemGap(20)
.textStyle()
.color("rgba(30,144,255,0.8)")
.fontFamily("Microsoft YaHei")
.fontSize(35)
.fontWeight("bold");
option.tooltip().show(true).formatter("{a}<br/>{b}: {c} ({d}%)");
option.legend()
.orient(Orient.vertical)
.x("(function(){return document.getElementById('main').offsetWidth / 2;}())")
.y(56)
.itemGap(12)
.data("68% людей считают, что всё неплохо", "29% людей считают, что жизнь полна стресса", "3% людей считают, что они фамилии Цэн");
option.toolbox().show(true).feature(Tool.mark, Tool.dataView, Tool.restore, Tool.saveAsImage);
Pie p1 = new Pie("1");
p1.clockwise(false).radius(125, 150).itemStyle(dataStyle)
.data(new Data("68% людей считают, что всё неплохо", 68), new Data("невидимый", 32).itemStyle(placeHolderStyle));
Pie p2 = new Pie("2");
p2.clockwise(false).radius(100, 125).itemStyle(dataStyle)
.data(new Data("29% людей считают, что жизнь полна стресса", 29), new Data("невидимый", 71).itemStyle(placeHolderStyle));
}
``````markdown
Пай п3 = новый Пай("3");
п3.по_часовой_стрелке(false).радиус(75, 100).стиль_элементов(стиль_данных)
.данные(новый Данные("3% людей считают, что они фамилии Цэн", 3), новый Данные("невидимый", 97).стиль_элементов(стиль_место_заполнителя));
option.серии(п1, п2, п3);
option.экспорт_в_html("pie6.html");
option.просмотр();
}
Этот код следует отметить:
(function(){})() для вычисления позиции легенд.EnhancedOption для создания сложной конфигурации графика.Примеры и код предоставлены для демонстрации использования ECharts и его возможностей.```java .х("(function(){return document.getElementById('main').offsetWidth / 2;})()")
В этом месте используется `(function(){})()` для выполнения JavaScript-кода, что позволяет реализовать функционал примера от официальной документации. Полученный JSON имеет следующий вид:
```json
{
// JSON данные
}
``````javascript
{
"title": {
"text": "Вы счастливы?",
"subtext": "От ExcelHome",
"sublink": "http://e.weibo.com/1341556070/AhQXtjbqh",
"textStyle": {
"color": "rgba(30,144,255,0.8)",
"fontSize": 35,
"fontFamily": "Microsoft YaHei",
"fontWeight": "bold"
},
"x": "center",
"y": "center",
"itemGap": 20
},
"toolbox": {
"feature": {
"restore": {
"show": true,
"title": "Сброс"
},
"dataView": {
"show": true,
"title": "Просмотр данных",
"readOnly": false,
"lang": ["Просмотр данных", "закрыть", "обновить"]
},
"mark": {
"show": true,
"title": {
"mark": "Переключатель линий",
"markClear": "Очистка линий",
"markUndo": "Удаление линий"
},
"lineStyle": {
"color": "#1e90ff",
"type": "dashed",
"width": 2
}
},
"saveAsImage": {
"show": true,
"title": "Сохранить как изображение",
"type": "png",
"lang": ["Нажмите чтобы сохранить"]
}
},
"show": true
},
"tooltip": {
"show": true,
"formatter": "{a}<br/>{b}: {c} ({d}%)"
},
"legend": {
"orient": "vertical",
"data": [
"68% людей считают, что жизнь удалась",
"29% людей говорят, что они испытывают большую давление в жизни",
"3% людей говорят «Моя фамилия Цзэн»"
],
"x": (function() {
return document.getElementById("main").offsetWidth / 2;
})(),
"y": 56,
"itemGap": 12
},
"series": [{
"radius": [125, 150],
"clockwise": false,
"name": "1",
"type": "pie",
"itemStyle": {
"normal": {
"label": {
"labelLine": {
"show": false
}
},
"data": [{
"name": "68% людей сообщили, что всё прошло неплохо",
"value": 68
}, {
"name": "невидимый",
"value": 32,
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
},
"color": "rgba(0,0,0,0)"
},
"emphasis": {
"color": "rgba(0,0,0,0)"
}
}
}]
}, {
"radius": [100, 125],
"clockwise": false,
"name": "2",
"type": "pie",
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
}
}
},
"data": [{
"name": "29% людей сообщили, что они испытывают большую жизненную нагрузку",
"value": 29
}, {
"name": "невидимый",
"value": 71,
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
},
"color": "rgba(0,0,0,0)"
},
"emphasis": {
"color": "rgba(0,0,0,0)"
}
}
}]
}, {
"radius": [75, 100],
"clockwise": false,
"name": "3",
"type": "pie",
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
}
}
},
"data": [{
"name": "3% людей сообщили, что они говорят «Мое фамилия Цзэн»",
"value": 3
}]
]
}
``````markdown
}, {
"name": "невидимый",
"value": 97,
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
},
"color": "rgba(0,0,0,0)"
},
"emphasis": {
"color": "rgba(0,0,0,0)"
}
}
}]
}]
};
[1]: http://git.oschina.net/free/ECharts/blob/master/src/test/java/com/github/abel533/echarts/samples/line/LineTest5.java
[2]: http://git.oschina.net/free/ECharts/blob/master/src/test/java/com/github/abel533/echarts/samples/pie/PieTest6.java
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.