За последние два дня я получил запрос на визуализацию данных с просьбой отобразить данные о миграции продукта из выбранной в настоящее время провинции и города в другие провинции и города.Спрос несложный, а визуализация карты относительно зрелая, и echarts также имеет соответствующие примеры. Предварительный просмотр изображения ниже.
предварительный просмотр:
Введение
Есть две причины для этой заметки:
- Предотвратить поиск этих элементов конфигурации в следующий раз, Я использовал echarts раньше.После длительного времени, после получения требования echart, некоторые связанные элементы конфигурации не были записаны ранее, поэтому мне нужно снова пройти API или Google Baidu, что является пустой тратой времени.
- Технологий больших данных становится все больше, и все больше и больше используются эффекты визуализации карты.Запишите идею сделать эффекты миграции карты, чтобы предотвратить обходные пути.Увеличьте свою производительность на десять или пять минут, эта заметка будет иметь потерянную ценность.
Описание требования
Наши требования следующие
-
- После ввода по умолчанию на карте отображается количество эмиграции в каждой провинции.
-
- После выбора провинции будет отображаться количество эмиграции из текущей провинции в другие провинции.
-
- После выбора города в провинции отображать количество эмиграции из текущего города в другие провинции
-
- После нажатия на другие провинции появится гистограмма, показывающая объем эмиграции из текущего города во все города под столицей провинции.
После того, как требования определены, первому внутреннему партнеру нужен формат данных. Мы должны сначала узнать, какие данные нам нужны, прежде чем мы сможем передать формат внутреннему партнеру.
Шаги развития
1. Создайте географическую систему координат
Создайте div, пропустите эту часть стиля, а затемСоздание компонента географической системы координат, Что означает компонент географической системы координат? Об этом говорится на официальном сайте
Компонент географической системы координат используется для рисования карты и поддерживает рисование точечных диаграмм и наборов линий в географической системе координат.
Официальная документация сайта, то есть,В этом компоненте мы можем рисовать точечные и линейные графики..
Официальный сайт пока не предоставляет загрузку карт.Говорят, что некоторые данные не соответствуют национальному «Закону о геодезии и картографировании», а пример API тянут.china.jsФайл является файлом данных карты.Его можно использовать.Давайте сначала посмотрим на эффект.
var mapOption = {
// 地图标题
title : {
text: 'XX城S端车源流向',
subtext: '日期：2018-10-11',
left: 'left',
textStyle : {
color: '#fff',
fontSize:30
},
top:20,
left:20
},
// 插入地图坐标系组件
geo: {
// 地图坐标系数据
map: 'china',
show:true,
itemStyle: {
// 背景色
areaColor: '#000000',
emphasis: {
label:{
show:false
}
}
}
}
};
// 创建实例
myChart = echarts.init(document.getElementById('map'));
// 设置数据
myChart.setOption(mapOption);
2. Создайте цветовой блок серии карт
Далее, давайте нарисуем карту, чтобы отображались разные цвета в зависимости от значения. Возможно, вас это немного смущает. Почему вы все еще рисуете карту? Разве она уже не вышла?
да,диаграмма имеет дифференцированные компоненты и серии, Существует множество компонентов, таких как компонент заголовка заголовка, компонент легенды легенды, компонент оси данных xAxis, компонент окна всплывающей подсказки и т. д., среди которых мы только что упомянули выше.地理坐标系组件,рядОфициальный сайт объясняет, что
Список сериалов. Каждая серия определяет свой тип диаграммы по типу
Официальная документация сайта.
Данные серии помещаются в конфигурацию серии, вы можете размещать различные типы, линейные/областные диаграммы, гистограммы/столбцы, круговые диаграммы, точечные диаграммы и т. д.
Этот новый одноклассник может не очень хорошо понимать. Например, компонент координат эквивалентен полке супермаркета. echarts предоставляет различные полки, в том числе полки для жевательной резинки, полки для кухонных принадлежностей, полки для канцелярских принадлежностей, и хотя предметы над полками все это категория, но есть разные бренды.например, жевательная резинка имеет Green Arrow, Yida, Xuanmai и т. д., а бренд представляет собой серию.
Компонент географической системы координат эквивалентен полке с жевательной резинкой, а Зеленая стрела, Yida и Xuanmai эквивалентны серии карт, серии рассеяния и серии линейных графиков.
Данные серии помещаются вseriseВ атрибуте мы сначала создаем серию карт карты и отображаем разные цвета в соответствии со значением значения,Как правило, черновик дизайна не использует тему плагина по умолчанию, и вам необходимо настроить цвет темы.visualMapКомпонент визуального отображения и расположен под нимinRangeАтрибуты, вы можете установить несколько, если хотите разделить данные на несколько сегментов, ** но необходимо установитьmaxМаксимальное значение атрибута, ** код выглядит следующим образом.
// 增加地图系列
mapOption.series.push({
name: '地图色块',
// 系列类型
type: 'map',
mapType: 'china',
// 禁用缩放
roam: false,
// 隐藏label
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
// 禁用提示框
tooltip:{
show:false,
},
itemStyle:{
// 默认颜色样式
areaColor:'#0b1835',
borderWidth:2,
borderColor:'#244388',
opacity:1
},
data:[
{name: "山东",value: 541},
{name: "山东",value: 341},
{name: "西藏",value: 405},
{name: "浙江",value: 380},
{name: "广东",value: 371},
{name: "贵州",value: 364},
{name: "四川",value: 287},
{name: "河南",value: 251},
{name: "上海",value: 218},
{name: "山西",value: 206}
]
}
});
// 增加视觉映射组件
mapOption.visualMap.push({
{
type:'piecewise',
// 不显示组件
show:false,
// 最大值 MaxArr为data重抽出的value数组
max:Math.max.apply(null,MaxArr),
// 仅对mapOption.series数组内下标为index系列数据生效
seriesIndex:0,
bottom:20,
left:30,
textStyle:{
color:'#fff'
},
// 颜色值
inRange: {
color: ['#5c8eb1', '#0574ab','#055c9b']
}
}
})
3. Создайте анимацию серии Scatter
Установите эффект миграции из выбранной провинции в другие провинции.Эффект миграции должен быть объединен с тремя сериями, чтобы иметь эффект миграции.
-
- Разброс, показывающий анимацию разброса в каждой позиции столицы провинции
-
- Сплошная линия, кривая со стрелкой от текущего города к целевому городу.
-
- линия спецэффектов, кривая со стрелкой от текущего города к целевому городу.
Для точечной диаграммы требуются координаты,в инете нашел только координаты города,а провинции нет.Скопировал провинциальную столицу и поменял на провинциальное название.Провинциальный центр такой же как и провинциальный столичный.Код такой :
// 省会与城市坐标
var geoCoordMap = {
"海门":[121.15,31.89],
"鄂尔多斯":[109.781327,39.608266],
"招远":[120.38,37.35],
"舟山":[122.207216,29.985295],
"齐齐哈尔":[123.97,47.33],
"盐城":[120.13,33.38],
"赤峰":[118.87,42.28],
"青岛":[120.33,36.07],
"乳山":[121.52,36.89],
"金昌":[102.188043,38.520089],
"泉州":[118.58,24.93],
"莱西":[120.53,36.86],
"日照":[119.46,35.42],
"胶南":[119.97,35.88],
"南通":[121.05,32.08],
"西藏":[91.11,29.97],
"拉萨":[91.11,29.97],
"云浮":[112.02,22.93],
"梅州":[116.1,24.55],
"文登":[122.05,37.2],
"上海":[121.48,31.22],
"上海":[121.48,31.22],
"攀枝花":[101.718637,26.582347],
"威海":[122.1,37.5],
"承德":[117.93,40.97],
"厦门":[118.1,24.46],
"汕尾":[115.375279,22.786211],
"潮州":[116.63,23.68],
"丹东":[124.37,40.13],
"太仓":[121.1,31.45],
"曲靖":[103.79,25.51],
"烟台":[121.39,37.52],
"福建":[119.3,26.08],
"福州":[119.3,26.08],
"瓦房店":[121.979603,39.627114],
"即墨":[120.45,36.38],
"抚顺":[123.97,41.97],
"玉溪":[102.52,24.35],
"张家口":[114.87,40.82],
"阳泉":[113.57,37.85],
"莱州":[119.942327,37.177017],
"湖州":[120.1,30.86],
"汕头":[116.69,23.39],
"昆山":[120.95,31.39],
"宁波":[121.56,29.86],
"湛江":[110.359377,21.270708],
"揭阳":[116.35,23.55],
"荣成":[122.41,37.16],
"连云港":[119.16,34.59],
"葫芦岛":[120.836932,40.711052],
"常熟":[120.74,31.64],
"东莞":[113.75,23.04],
"河源":[114.68,23.73],
"淮安":[119.15,33.5],
"泰州":[119.9,32.49],
"南宁":[108.33,22.84],
"营口":[122.18,40.65],
"惠州":[114.4,23.09],
"江阴":[120.26,31.91],
"蓬莱":[120.75,37.8],
"韶关":[113.62,24.84],
"嘉峪关":[98.289152,39.77313],
"广东":[113.23,23.16],
"广州":[113.23,23.16],
"延安":[109.47,36.6],
"山西":[112.53,37.87],
"太原":[112.53,37.87],
"清远":[113.01,23.7],
"中山":[113.38,22.52],
"云南":[102.73,25.04],
"昆明":[102.73,25.04],
"寿光":[118.73,36.86],
"盘锦":[122.070714,41.119997],
"长治":[113.08,36.18],
"深圳":[114.07,22.62],
"珠海":[113.52,22.3],
"宿迁":[118.3,33.96],
"咸阳":[108.72,34.36],
"铜川":[109.11,35.09],
"平度":[119.97,36.77],
"佛山":[113.11,23.05],
"海南":[110.35,20.02],
"海口":[110.35,20.02],
"江门":[113.06,22.61],
"章丘":[117.53,36.72],
"肇庆":[112.44,23.05],
"大连":[121.62,38.92],
"临汾":[111.5,36.08],
"吴江":[120.63,31.16],
"石嘴山":[106.39,39.04],
"辽宁":[123.38,41.8],
"沈阳":[123.38,41.8],
"苏州":[120.62,31.32],
"茂名":[110.88,21.68],
"嘉兴":[120.76,30.77],
"吉林":[125.35,43.88],
"长春":[125.35,43.88],
"胶州":[120.03336,36.264622],
"宁夏":[106.27,38.47],
"银川":[106.27,38.47],
"张家港":[120.555821,31.875428],
"三门峡":[111.19,34.76],
"锦州":[121.15,41.13],
"江西":[115.89,28.68],
"南昌":[115.89,28.68],
"柳州":[109.4,24.33],
"三亚":[109.511909,18.252847],
"自贡":[104.778442,29.33903],
"吉林":[126.57,43.87],
"阳江":[111.95,21.85],
"泸州":[105.39,28.91],
"西宁":[101.74,36.56],
"青海":[101.74,36.56],
"宜宾":[104.56,29.77],
"内蒙古":[111.65,40.82],
"呼和浩特":[111.65,40.82],
"四川":[104.06,30.67],
"成都":[104.06,30.67],
"大同":[113.3,40.12],
"江苏":[119.44,32.2],
"镇江":[119.44,32.2],
"广西":[110.28,25.29],
"桂林":[110.28,25.29],
"张家界":[110.479191,29.117096],
"宜兴":[119.82,31.36],
"北海":[109.12,21.49],
"陕西":[108.95,34.27],
"西安":[108.95,34.27],
"金坛":[119.56,31.74],
"东营":[118.49,37.46],
"牡丹江":[129.58,44.6],
"遵义":[106.9,27.7],
"绍兴":[120.58,30.01],
"扬州":[119.42,32.39],
"常州":[119.95,31.79],
"潍坊":[119.1,36.62],
"重庆":[106.54,29.59],
"重庆":[106.54,29.59],
"台州":[121.420757,28.656386],
"江苏":[118.78,32.04],
"南京":[118.78,32.04],
"滨州":[118.03,37.36],
"贵州":[106.71,26.57],
"贵阳":[106.71,26.57],
"无锡":[120.29,31.59],
"本溪":[123.73,41.3],
"克拉玛依":[84.77,45.59],
"渭南":[109.5,34.52],
"马鞍山":[118.48,31.56],
"宝鸡":[107.15,34.38],
"焦作":[113.21,35.24],
"句容":[119.16,31.95],
"北京":[116.46,39.92],
"北京":[116.46,39.92],
"徐州":[117.2,34.26],
"衡水":[115.72,37.72],
"包头":[110,40.58],
"绵阳":[104.73,31.48],
"新疆":[87.68,43.77],
"乌鲁木齐":[87.68,43.77],
"枣庄":[117.57,34.86],
"浙江":[120.19,30.26],
"杭州":[120.19,30.26],
"淄博":[118.05,36.78],
"鞍山":[122.85,41.12],
"溧阳":[119.48,31.43],
"库尔勒":[86.06,41.68],
"安阳":[114.35,36.1],
"开封":[114.35,34.79],
"山东":[117,36.65],
"济南":[117,36.65],
"德阳":[104.37,31.13],
"温州":[120.65,28.01],
"九江":[115.97,29.71],
"邯郸":[114.47,36.6],
"临安":[119.72,30.23],
"甘肃":[103.73,36.03],
"兰州":[103.73,36.03],
"沧州":[116.83,38.33],
"临沂":[118.35,35.05],
"南充":[106.110698,30.837793],
"天津":[117.2,39.13],
"天津":[117.2,39.13],
"富阳":[119.95,30.07],
"泰安":[117.13,36.18],
"诸暨":[120.23,29.71],
"河南":[113.65,34.76],
"郑州":[113.65,34.76],
"黑龙江":[126.63,45.75],
"哈尔滨":[126.63,45.75],
"聊城":[115.97,36.45],
"芜湖":[118.38,31.33],
"唐山":[118.02,39.63],
"平顶山":[113.29,33.75],
"邢台":[114.48,37.05],
"德州":[116.29,37.45],
"济宁":[116.59,35.38],
"荆州":[112.239741,30.335165],
"宜昌":[111.3,30.7],
"义乌":[120.06,29.32],
"丽水":[119.92,28.45],
"洛阳":[112.44,34.7],
"秦皇岛":[119.57,39.95],
"株洲":[113.16,27.83],
"河北":[114.48,38.03],
"石家庄":[114.48,38.03],
"莱芜":[117.67,36.19],
"常德":[111.69,29.05],
"保定":[115.48,38.85],
"湘潭":[112.91,27.87],
"金华":[119.64,29.12],
"岳阳":[113.09,29.37],
"湖南":[113,28.21],
"长沙":[113,28.21],
"衢州":[118.88,28.97],
"廊坊":[116.7,39.53],
"菏泽":[115.480656,35.23375],
"安徽":[117.27,31.86],
"合肥":[117.27,31.86],
"武汉":[114.31,30.52],
"湖北":[114.31,30.52],
"大庆":[125.03,46.58]
};
Формат данных, необходимый для ряда разброса, требуемого echart, выглядит следующим образом:
{
"name":"安徽",
"value":220,
"tooltip":"迁出人效：0.22台\/人<br>总迁出量：220<br>总迁入量：149"
}
Требуется имя капитала и стоимость,использоватьsymbolSizeОбратный вызов устанавливает размер точек разброса в соответствии со значением.Значок по умолчанию не имеет сильного чувства технологии.ИспользованиеsymbolУстановите его как изображение png, сделанное самостоятельно, а затем в этикеткеformatterметод установки отображаемого поля метки.
// 数据格式
var pan = [
{"name":"安徽","value":220,"tooltip":"迁出人效：0.22台\/人<br>总迁出量：220<br>总迁入量：149"},
{"name":"山东","value":24,"tooltip":"超值车数量：12<br>非超值数量：12<br>总数量：24"},
{"name":"浙江","value":22,"tooltip":"超值车数量：17<br>非超值数量：5<br>总数量：22"},
{"name":"广东","value":22,"tooltip":"超值车数量：14<br>非超值数量：8<br>总数量：22"},
{"name":"西藏","value":15,"tooltip":"超值车数量：14<br>非超值数量：1<br>总数量：15"},
{"name":"四川","value":14,"tooltip":"超值车数量：10<br>非超值数量：4<br>总数量：14"},
{"name":"河南","value":14,"tooltip":"超值车数量：10<br>非超值数量：4<br>总数量：14"},
{"name":"河北","value":9,"tooltip":"超值车数量：5<br>非超值数量：4<br>总数量：9"},
{"name":"江西","value":8,"tooltip":"超值车数量：5<br>非超值数量：3<br>总数量：8"},
{"name":"湖北","value":8,"tooltip":"超值车数量：7<br>非超值数量：1<br>总数量：8"},
{"name":"陕西","value":8,"tooltip":"超值车数量：5<br>非超值数量：3<br>总数量：8"}
];
// 添加系列数据
mapOption.series.push(
{
name: '圆盘',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 0,
// 散点动画
rippleEffect: {
scale:3,
brushType: 'stroke',
},
// 散点图标
symbol:'image://images/symbol1.png',
// 显示文字
label: {
normal: {
show: true,
position: 'right',
color:'#fff',
fontSize:10,
// 会名称 + value
formatter: function(e){
return e.name +':'+ e.data.value[2]
},
opacity:1
},
},
// 根据value控制散点大小
symbolSize: function (val) {
return val[2] / 25;
},
itemStyle: {
borderWidth:1,
opacity:1,
shadowColor: '#fff',
},
data: pan.map(function (dataItem) {
return {
name: dataItem.name,
value:geoCoordMap[dataItem.name].concat([dataItem.value]),
tooltip:dataItem.name + '<br>' +dataItem.tooltip
};
})
}
)
4. Создайте серию сплошных линий и линий со специальными эффектами.
Одна сплошная линия, линия со специальным эффектом, наложенная друг на друга, получается эффект.
Серия ECHARTS из строк Требуемая формат данных:
// linses
{
fromName: "安徽",
toName: "浙江",
coords: [
[117.27, 31.86], // 起点坐标
[120.19, 30.26] // 末尾坐标
]
}
**Таким образом, нам нужны координаты текущей провинции и целевой провинции.**Мы заранее подготовили данные координат, а это значит, что интерфейс возвращает нам название текущей провинции и название целевой провинции.Мы можем пройти и взять координаты сами.,использоватьsymbolSizeОтрегулируйте режущую головку до соответствующего размера.
При рисовании линии нужно обращать внимание на цвет, сплошная линия темная, а анимационная светлая, чтобы был контраст, эффект чуть лучше.
Данные, которые мы запрашиваем, следующие:
var linesData = [
[{"name":"安徽"},{"name":"浙江"}],
[{"name":"安徽"},{"name":"上海"],
[{"name":"安徽"},{"name":"西藏"],
[{"name":"安徽"},{"name":"四川"],
[{"name":"安徽"},{"name":"河南"],
[{"name":"安徽"},{"name":"山西"],
[{"name":"安徽"},{"name":"广东"],
[{"name":"安徽"},{"name":"山东"],
[{"name":"安徽"},{"name":"贵州"]
]
Пройдите данные, чтобы получить координаты и вставьте данные в серию
// lines数据遍历方法
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
});
}
}
return res;
};
// 塞入数据
mapOption.series.push(
// step3 实体线
{
name: '实体线',
type: 'lines',
zlevel: 1,
symbol: ['none', 'arrow'],
symbolSize: 5,
lineStyle: {
opacity: 0.1,
normal: {
color: '#67035a',
width: 1,
curveness: 0.2
}
},
tooltip:{
show:false,
},
data: convertData(linesData)
},
// step4 发光线
{
name: '发光',
type: 'lines',
zlevel: 2,
// 特效配置
effect: {
show: true,
period: 7,
trailLength: 0.7,
color: '#ff69ec',
symbolSize: 3
},
tooltip:{
show:false,
},
lineStyle: {
normal: {
color: '#fbff82',
width: 0,
curveness: 0.2
}
},
data: convertData(linesData)
}
)
Эффект уже закончился.
5. Из текущего города в целевую провинцию щелкните целевую провинцию, чтобы открыть гистограмму.
Из города в провинцию перейти проще, просто замените название провинции на город, повторяться не буду.
просто скажиНажмите на целевую провинцию, чтобы отобразить гистограмму всех городов в текущей провинции.идеи.
Добавьте события щелчка в объект echart. Только объект echart может добавлять события щелчка. Серии и компоненты все выложены. Вам нужно пройтиparamsСудя по типу щелчка, если это разброс по щелчку, просто отобразите div и создайте диаграмму.
myChart.on('click', function (params) {
if(params.componentSubType == "effectScatter"){
$('.tootip,.mark').show();
let option = {
// some data
};
let Chart = echarts.init(document.getElementById('tootip'));
Chart.setOption(option);
}
});
$('.clsBtn').click(function(){
$('.tootip,.mark').hide();
});
Это в принципе реализовано.Ниже приведены некоторые сопутствующие пункты настройки диаграммы.Если вы просматриваете документ или ищите,то можете его записать.Если вы с ним знакомы,то можете просто его пропустить.
Измерение конфигурации вертикальной оси компонента визуальной карты
Столкнулся с проблемой при построении левой гистограммы.После настройки компонента визуального отображения он не действует, что не так, как ожидалось.Смотрите следующий рисунок (фактическое слева, ожидаемое справа):
Причина в том, что измерение данных компонента сопоставления указывает на неправильное, скорректируйте егоdimensionПросто укажите.
Компонент визуального сопоставления действует только для определенного набора рядов данных seriesIndex.
Делая карту, я надеюсь, что компонент отображения данных будет действовать только на серии карт, но не на скаттер.Я думал, что это связано с id.seriesIndexнаправлениеmapOption.seriesПодстрочный индекс вступит в силу только для текущего подстрочного индекса.
Показать и скрыть всплывающую подсказку компонента серии
Требование - отображать компонент всплывающей подсказки только при переходе через точечную диаграмму, поэтому необходимо датьtooltip.triggerсобственностьitem, а затем добавить в серию те, которые не нужно отображатьtooltip.showсобственностьfalse.
Суммировать
Вот в принципе и все, согласно принципам Наггетс:
При объяснении многих технических аспектов, особенно некоторых новых технологий, сначала необходимо объяснить лежащую в их основе концепцию, чтобы читатель мог получить общее представление о содержании, а затем углубиться в детали, чтобы завершить содержание объекта. .
Если вам покажется, что объяснение не очень понятное, надеюсь доведу до ума, доработаю на более читабельную заметку, а заметки тоже нужно повторять 😁, общаться и учиться вместе.