Слияние кода завершено, страница обновится автоматически
Использование:
Для визуализации диаграмм использован плагин echarts. Плагин был упакован с помощью JavaScript в виде библиотеки, что позволяет определять диаграммы с использованием HTML-форм и упрощает работу. Часть инструментов JavaScript использует shieldjs.
Shieldcharts-core — это основной JavaScript, который можно использовать отдельно. Shieldcharts-demo — демонстрационный проект, содержащий несколько примеров страниц. После сборки с помощью Maven доступ к нему можно получить по адресу [имя проекта][:порт]/charts/index.html. Через эту страницу можно перейти на другие шаблонные страницы. Всего существует 12 шаблонов, которые постоянно совершенствуются и обновляются. Шаблоны взяты из сети, при наличии нарушений авторских прав просьба сообщить для удаления.
Можно использовать параметр data-xx для расширения. Если data-xx не подходит, можно также использовать shieldSettings для расширения. Пример:
Использовать data-url для определения пути к данным JSON, data-type — для определения типа диаграммы.
<div id="creditWarning" class="loadItem" data-url="data/companyNum.json" data-type="pie" style="height: 100%; width: 100%;" shieldSettings='{name:"test",show:false}'></div>
Примеры использования:
<!-- Модуль визуализации диаграмм -->
<dependency>
<groupId>com.ld</groupId>
<artifactId>shieldcharts-demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
Если есть исходный код JavaScript, то можно не импортировать jar-пакеты, а просто поместить файлы JavaScript в проект.
<script type="text/javascript" src="${ctxPath }/charts/js/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="${ctxPath }/charts/js/echarts.min.js"></script>
<script type="text/javascript" src="${ctxPath }/charts/js/point_util.js"></script>
<!-- Зависимость от исходного плагина данных, shieldjs -->
<script type="text/javascript" src="${ctxPath }/webjars/shieldjs/depends/jquery.metadata.js"></script>
<script type="text/javascript" src="${ctxPath }/webjars/shieldjs/core/shield.util.js"></script>
<!-- Обработка -->
<script type="text/javascript" src="${ctxPath }/charts/js/charts.deal.pie.js"></script>
<script type="text/javascript" src="${ctxPath }/charts/js/charts.deal.bar.js"></script>
<script type="text/javascript" src="${ctxPath }/charts/js/charts.deal.line.js"></script>
<script type="text/javascript" src="${ctxPath }/charts/js/charts.deal.list.js"></script>
<script type="text/javascript" src="${ctxPath }/charts/js/charts.deal.map.js"></script>
<script type="text/javascript" src="${ctxPath }/charts/js/charts.tool.js"></script>
<!-- Круговая диаграмма data-rose — диаграмма розы ветров data-label="close" — закрыть ярлык -->
<div id="creditWarning" class="loadItem" data-url="data/companyNum.json" data-type="pie" style="height: 100%; width: 100%;"></div>
<!-- Столбчатая диаграмма, data-vx указывает на горизонтальное отображение -->
<div id="creditUseRanking" class="loadItem" data-url="data/chengliriqi.json" data-type="bar" data-vx="show" style="height: 100%"></div>
Таким образом, вы можете отобразить данные.
Круговые диаграммы включают круговые диаграммы, диаграммы розы ветров и кольцевые диаграммы.
HTML-конфигурация выглядит следующим образом:
<!-- Круговая диаграмма data-rose — диаграмма розы ветров data-label="close" — закрыть ярлык -->
<div id="creditWarning" class="loadItem" data-url="data/companyNum.json" data-type="pie" style="height: 100%; width: 100%;"></div>
<!-- Расширенные параметры: -->
<!-- data-rose, если этот атрибут добавлен, будет отображаться диаграмма розы ветров, доступны radius и area с двумя вариантами:
//'radius' Площадь данных представляет процент, радиус представляет размер данных.
//'area' Все области имеют одинаковую площадь, только радиус показывает размер данных -->
<!-- data-label="close", если установлено значение close, ярлык будет закрыт -->
<!-- data-legend='{"orient" : "vertical","x":"left","top":20}' Управляет отображением легенды -->
<!-- data-percent="show", этот параметр управляет отображением процента, по умолчанию не отображается -->
<!-- data-ring="70%", добавив этот параметр, получим кольцевую диаграмму, внутренний радиус кольца является параметром -->
<!-- data-color='["#ff910b","#a2c32e","#fff000","#0988d7"]' Расширяет цвет -->
Общий формат данных:
{
"#data注释":"data — это набор результатов данных, где data — это данные (обязательно), многострочные данные представлены в виде массива, однострочные данные напрямую связаны с данными, title — заголовок каждой группы, axisName — метка координат (обязательно), toolTip используется для подсказки мыши, по умолчанию используется axisName",
"data":{
"data":[[10,20,33,58,79,101,211,289,335,700],[18,20,33,48,89,111,221,219,335,512]],
"title":["Количество предприятий","Количество бизнес-единиц"],
"axisName":["2010 год","2011 год","2012 год","2013 год","2014 год","2015 год","2016 год","2017 год","2018 год","2019 год"],
"toolTip":["2010 год","2011 год","2012 год","2013 год","2014 год","2015 год","2016 год","2017 год","2018 год","2019 год"]
},
"#success注释":"true означает успех выполнения, false означает сбой выполнения",
"success":true,
"#message注释":"возвращаемая информация, обычно используется при ошибках",
"message":""
}
HTML-конфигурация выглядит следующим образом:
<!-- Гистограмма, data-vx указывает на горизонтальное отображение -->
<div id="creditUseRanking" class="loadItem" data-url="data/chengliriqi.json" data-type="bar" data-vx="show" style="height: 100%"></div>
<!-- Расширенный параметр: -->
<!-- data-vx, горизонтальное отображение, вертикальное по умолчанию -->
Формат данных см. в разделе «Общий формат данных».
HTML-конфигурация выглядит следующим образом:
<!-- Линейная диаграмма, data-color переопределяет цвет data-style="area " режим настройки нескольких режимов, используйте пробел для соединения режима площади smooth для сглаживания режима -->
<div id="creditProgress" class="loadItem" data-url="data/mulData.json" data-type="line" data-style="area " data-color='["#ffff43", "#17a390"]' style="height: 100%"></div>
<!-- Расширенные параметры: -->
``` **Данные формата:**
**Список отображения (list):**
HTML-конфигурация:
{
"#data注释": "data в data представляет собой данные [обязательно], многострочные данные представляют собой массив, однострочные данные напрямую связаны с данными, title представляет информацию заголовка таблицы",
"data": {
"data": [
{"count": 1, "name": "Управление рынком", "value": 10763, "bs": 10},
{"count": 2, "name": "Полицейское управление", "value": 8763},
{"count": 3, "name": "Отдел больших данных", "value": 8463, "bs": 550},
{"count": 4, "name": "Департамент охраны окружающей среды", "value": 8087},
{"count": 5, "name": "Социальное страхование", "value": 7351},
{"count": 6, "name": "Социальное обеспечение", "value": 7012},
{"count": 7, "name": "Социальное обеспечение", "value": 5351},
{"count": 8, "name": "Социальное обеспечение", "value": 5002},
{"count": 9, "name": "Социальное обеспечение", "value": 2351, "bs": 120},
{"count": 10, "name": "Сельскохозяйственный научно-исследовательский институт", "value": 46}
],
"title": ["Порядковый номер", "Название отдела", "Общее количество данных", "Количество отправленных данных"]
},
"success": true,
"message": ""
}
Карта (map):
HTML-конфигурация:
<!-- Карта города Цзяоцзо -->
<div id="jiaozuoMap" class="loadItem" data-url="data/mapdata_boai.json" data-type="map" style="width: 100%; height: 600px;"></div>
{
"#说明": "Файл данных карты не совместим с другими типами файлов данных, кроме name (область регистрации карты), showName (выделяемая область), adcode (код региона, получение соответствующих данных geoJson карты, необходимо наличие соответствующего файла данных в каталоге geodata)",
"data": {
"data": [ {"archivesCount": 0, "blackCount": 0, "countType": 0, "createBy": -1, "createTime": 1557387003000, "departId": 1537154097763, "departName": "Управление рынком", "id": 1557387003344, "lastRefreshTime": 1557816001000, "licensCount": 10666, "modifyBy": -1, "punishCount": 10, "redCount": 0, "state": 0, "sumCount": 10676, "type": 1, "updateTime": 1557816001000}, {"archivesCount": 0, "blackCount": 0, "countType": 0, "createBy": -1, "createTime": 1557387005000, "departId": 1544412689201, "departName": "Правовой комитет", "id": 1557387004695, "lastRefreshTime": 1557816002000, "licensCount": 0, "modifyBy": -1, "punishCount": 0, "redCount": 0, "state": 0, "sumCount": 0, "type": 1, "updateTime": 1557816002000}, {"archivesCount": 0, "blackCount": 0, "countType": 0, "createBy": -1, "createTime": 1557387005000, "departId": 1544412714546, "departName": "Организационный отдел", "id": 1557387004727, "lastRefreshTime": 1557816002000, "licensCount": 0, "modifyBy": -1, "punishCount": 0, "redCount": 0, "state": 0, "sumCount": 0, "type": 1, "updateTime": 1557816002000}, {"archivesCount": 0, "blackCount": 0, "countType": 0, "createBy": -1, "createTime": 1557387005000, "departId": 1544412734233, "departName": "Отдел пропаганды", "id": 1557387004777, "lastRefreshTime": 1557816002000, "licensCount": 0, "modifyBy": -1, "punishCount": 0, "redCount": 0, "state": 0, "sumCount": 0, "type": 1, "updateTime": 1557816002000}, {"archivesCount": 0, "blackCount": 0, "countType": 0, "createBy": -1, "createTime": 1557387005000, "departId": 1554953377123, "departName": "Медицинское страхование", "id": 1557387004858, "lastRefreshTime": 1557816002000, "licensCount": 0, "modifyBy": -1, "punishCount": 0, "redCount": 0, "state": 0, "sumCount": 0, "type": 1, "updateTime": 1557816002000}, {"archivesCount": 0, "blackCount": 0, "departName": "", "licensCount": 12417, "punishCount": 46, "redCount": 0, "sumCount": 12463}],
"name": "Цзяоцзуо",
"showName": "Район Боай",
"adcode": 410800
},
"success": true,
"message": ""
}
Общие параметры:
Упрощает настройку data-grid, например, data-grid-style="right:16%". Можно напрямую использовать запятую для разделения определения по top, right, bottom, left в порядке следования, например: data-grid-style=",16%,," Если указано одно значение, например div {margin: 50px} - все внешние поля составляют 50 px. Если указаны два значения, например div {margin: 50px 10px}, то верхнее и нижнее внешние поля равны 50px, а левое и правое — 10 px. Если заданы три значения, например div {margin: 50px 10px 20px}- верхнее внешнее поле равно 50 px, левое и правое внешние поля — 10 px, нижнее внешнее поле — 20 px. Если задано четыре значения, например div {margin: 50px 10px 20px 30px} — верхнее внешнее поле составляет 50 px, правое внешнее поле — 10 px, нижнее внешнее поле — 20 px, левое внешнее поле — 30 px.
Стиль оси, #fff, line:#48b;2;solid, ticky:#333 — цвет оси line представляет стиль разделительной линии, разделенной точкой с запятой (;), включая цвет и толщину линии, стиль tickx ticky — стиль шкалы оси, разделенный точкой с запятой (;) включая цвет и толщину линии.
Data-legend-style="LT,vertical,#fff" скрыть можно определить положение, направление, цвет и т. д. легенды, используя запятые для соединения, среди которых положение должно быть определено как одно, другие не требуют порядка, положение представлено первыми буквами, обозначающими left right top bottom center (можно свободно комбинировать, не различать верхний и нижний регистр). Vertical отображает вертикальное направление. Можно установить значок circle, rect, roundRect, triangle, diamond, pin, arrow или использовать пользовательский значок, начинающийся с icon:. X:70% можно использовать процент или пиксели, перед которыми необходимо поставить x:, y также, withItemColor указывает, что цвет следует за цветом элемента по умолчанию фиксированный цвет.
label:insideRight label:top — только запись label означает отображение метки, добавление двоеточия устанавливает позицию отображения. Notitle — без заголовка. Tooltip_Pointer_None — без всплывающей подсказки. AvoidLabelOverlap — предотвращает перекрытие меток и автоматически регулирует. Nosplity nosplitx — не отображает разделительную линию. NoAxiStickX noAxiStickY — не отображает ось x/y. Nolinex noliney — не отображает ось x/y. Nolabelx nolabely — не отображает метку x/y. Extenddata — расширяет данные, вызывая пользовательские методы, имя метода — extenddata_[ele id]. Tooltip — указатель мыши.
Data-showtext="tooltip:,label:" — после tooltip отображается всплывающая подсказка, после label отображается метка данных. Yprefix:xx определяет префикс оси Y, ysuffix:xx определяет суффикс оси Y, xprefix:xx определяет префикс оси X, xsuffix:xx определяет суффикс оси X.
ShieldSettings [jsonString] — расширение сложных исходных параметров.
Диаграмма использует другие параметры:
Гистограмма
Data-ring может быть строкой или массивом, представляющим радиус кольцевой диаграммы, массив имеет первую запись как внутренний радиус, вторую запись как внешний радиус. Data-rose radius — режим радиуса площади по умолчанию radius. Data-label="close" — закрыть метку. Center — отобразить в центре. Data-percent="show" — показать процент. Doublering — двойная кольцевая диаграмма. Halfring — полукольцевая диаграмма. Ringpie — кольцевая круговая диаграмма. Anticlockwise — против часовой стрелки. Emphasis — подчеркнуть отображение [жирный шрифт в середине]. Percent — показать процентное соотношение. Data-itemborder — размер границы элемента. Data-itemStyle — определение исходного свойства элемента.
Столбчатая диаграмма
Mix="line" — смешанная диаграмма, вторая диаграмма объединяется с возвращаемыми данными data.type, "type":[0,0,1], что означает, что третья группа данных не является второй диаграммой. Mix-axis — настройка оси Y второй диаграммы. Bar-width="20%" — ширина столбца 20%. Item-color="#00c0e9>#3b73cf" — использование > (больше) для обозначения цветового градиента "#00c0e9,#3b73cf", использование, (запятая) для последовательного выбора цвета, обратите внимание, что если значение внутри представляет собой формат rgba (например, rgba(147, 235, 248, 1)), поскольку значение уже содержит, (запятую), поэтому измените его на; (точка с запятой). Использование; (точки с запятой) для разделения разных значений цвета. Radius — радиус закругления каждого столбца. Symbol — диаграмма и размер соединены запятыми. Topvalue — значение вершины столбца. Vertical — горизонтальная диаграмма. Stack — стопка. PictorialBar — диаграмма с изображением. Vx — горизонтальная диаграмма. Delay="show" — задержка отображения.
Линейная диаграмма
Area-color — цветовой градиент области. Smooth — сглаженный режим. Nospace — ось X слева и справа равна нулю. Vertical — горизонтальная диаграмма. Symbol — диаграмма и размер соединены запятыми. Tooltip-suffix — суффикс всплывающей подсказки. Area-color=#026B6F>#012138:0.8 — цветовой градиент, двоеточие после представляет прозрачность, можно не писать.
Цифровой дисплей
Animate="close" можно закрыть анимацию, можно настроить на родительском контейнере или отдельно. Duration — можно настроить продолжительность анимации (в миллисекундах), можно настроить на родительском контейнере или отдельно. Classprefix — префикс стиля, чтобы предотвратить конфликт стилей при вложении нескольких цифровых дисплеев. Startval="1234567" endval="1234567". Num-prefix="" num-suffix="".
Список
Limit="5" ограничивает длину отображения списка, по умолчанию ограничений нет. Callback="listcallback" — загрузка завершена, обратный вызов. Tooltip-show="1,2,3,4,5,6" — отображаемые поля нижнего индекса. Links="0[=url]" — соединение, нижний индекс может сопровождаться именем поля, если не указано, по умолчанию используется url, обратите внимание на наличие этого поля.
Map_extend — расширение карты. Pointer="max:30,min:10,circle,rgba(255,255,0,0.8),index:0" — отображение точки данных, max представляет максимальный размер точки, min представляет минимальный размер, index представляет нижний индекс, который может потребоваться отрегулировать при наличии нескольких слоев карт. Tooltip-suffix="辆" — суффикс всплывающей подсказки. Show="" — отображаемое поле. Max:10 min:3 rgba(255,255,0,0.8) — управление отображением точек, circle отображает график по умолчанию, поддерживающий circle|rect|roundRect|triangle|diamond|emptyCircle|emptyRectangle|emptyTriangle|emptyDiamond|pin|arrow|none, также можно указать через icon:xx, max контролирует максимальный размер графика, min контролирует минимальный размер. Topdata="5" max:5 color:[red/rgba(255,255,0,0.8)/#75ddff] — контроль максимального размера графика по умолчанию равен 10. Visual-style="1" //visualMap добавляется к первому ряду данных color:#75ddff>#0e94eb text:высокий>низкий. "color:#22e5e8>#0035f9>#22e5e8,orient:vertical,max:500" — максимум: 500 max:{max}/2 — масштабный маркер максимального значения. Bottom:10% — расположение можно определить слева направо сверху вниз. Calculable — шкала отметок отображается. Geo-style="area:#031525;#2B91B7 border:#097bba borderWidth:1" — устанавливает область и исходный цвет границы, разделяет обычный и важный район с помощью; только одна запись по умолчанию назначается обычному району. Label — отображает название региона.
Расширенная диаграмма: Stack-set="0,2;1:в инвентаре,3;4:из инвентаря,5,6". Кольцевая диаграмма:
<!-- Кольцевая диаграмма #61d2f7,data-percent показывает процент, data-ring — внутреннее кольцо, data-legend управляет legend отображением, data-label="close" закрывает ярлык-->
<div id="creditEvent" class="loadItem" data-url="data/creditEvent.json" data-type="pie" data-legend='{"orient" : "vertical","x":"left","top":20}' data-label="close" data-percent="show" data-ring="70%" data-color='["#ff910b","#a2c32e","#fff000","#0988d7"]' style="height: 100%"></div>
Столбчатая диаграмма:
<!-- Столбчатая диаграмма, data-vx показывает горизонтальное отображение -->
<div id="creditUseRanking" class="loadItem" data-url="data/chengliriqi.json" data-type="bar" data-vx="show" style="height: 100%"></div>
Столбчатая диаграмма:
<!-- Столбчатая диаграмма data-color="#3398DB" позволяет определить цвет, data-randomcolor="true" означает случайный data-bar-width="50%" устанавливает ширину каждого столбца creditInfo.json data-tooltip-show="cross" эффект всплывающей подсказки cross|shadow -->
<div id="creditInfo" class="loadItem" data-url="data/mulTypeData.json" data-type="bar" data-delay="10" data-randomcolor="true" data-mix='line' data-mix-axis='{"name": "рост","min":0,"max": 100,"interval": 20,"axisLabel": {"formatter": "{value} %"}}' data-tooltip-show="cross" style="height: 100%"></div>
Столбчатая диаграмма:
<!-- Столбчатая диаграмма data-color="#3398DB" позволяет определить цвет, data-randomcolor="true" означает случайный data-bar-width="50%" устанавливает ширину каждого столбца creditInfo.json data-tooltip-show="cross" эффект всплывающей подсказки cross|shadow -->
<div id="creditInfo" class="loadItem" data-url="data/creditInfo.json" data-type="bar" data-delay="10" data-randomcolor="true" data-tooltip-show="cross" data-bar-width="50%" style="height: 100%"></div>
Линейная диаграмма:
<!--Линейная диаграмма,data-color перекрывает цвет data-style="area " режим устанавливает несколько режимов, используя пробел для соединения area режима площади smooth плавного режима-->
<div id="creditProgress" class="loadItem" data-url="data/mulData.json" data-type="line" data-style="area " data-color='["#ffff43", "#17a390"]' style="height: 100%"></div>
Карта:
<!-- Карта города Цзяоцзо -->
<div id="jiaozuoMap" class="loadItem" data-url="data/mapdata_boai.json" data-type="map" style="width: 100%; height: 600px;"></div>
В демонстрационном модуле уже встроено 12 шаблонов, которые будут продолжать улучшаться и развиваться.
Приведено несколько примеров:
Шаблон 1:
Шаблон 2:
И так далее.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )