Sync map and graph series in apache echarts - echarts

I am using Apache Echarts v5, and I am trying to implement a graph with a world map background.
For this, I understand the best choice is to use a "graph" serie and a "map" serie, both reading from a "geo" configuration, based in a geoJSON or the world map, which I downloaded from here. Yet I am having a hard time figuring how to do this two things:
Sync coordinates, so the elements of the graph are always in the correct places of the map.
Be able to zoom in are out both the graph and the map at the same time.
For this I have prepared a minimal example of what I am doing. This code can be directly pasted into any echarts online example and it should work (I used other geoJson for mockup).
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap('fullMap', geoJson);
myChart.setOption(
option = {
legend: {
data: [
{
name: 'One',
},
{
name: 'Two',
},
{
name: 'Three',
},
],
bottom: '25',
itemHeight: '10',
textStyle: {
fontSize: '10',
},
type: 'scroll',
},
geo: [
{
map: 'fullMap',
layoutSize: '100%',
geoIndex: 0,
},
],
series: [
{
type: 'graph',
layout: 'none',
roam: true,
lineStyle: {
color: 'source',
curveness: 1e-21,
},
data: [
{
id: 'A',
name: 'A',
category: 0,
x: 51.8954823121139,
y: 0.918566971127893,
symbol: 'rect',
},
{
id: 'B',
name: 'B',
category: 0,
x: 52.0742496381072,
y: 1.22603740005249,
symbol: 'rect',
},
{
id: 'C',
name: 'C',
category: 0,
x: 52.8723466202309,
y: -0.192814484661784,
symbol: 'rect',
},
{
id: 'D',
name: 'D',
category: 0,
x: 53.3688011059499,
y: 0.0024000083847046,
symbol: 'rect',
},
],
links: [
{
source: 'A',
target: 'B',
},
{
source: 'B',
target: 'C',
},
],
categories: [
{
name: 'One',
},
{
name: 'Two',
},
{
name: 'Three',
},
],
},
{
map: 'fullMap',
type: 'map',
left: 0,
top: 0,
right: 0,
bottom: 0,
boundingCoords: [
[-180, 90],
[180, -90],
],
geoIndex: 0
},
],
})
});
The thing is, if I try to set the "coordinateSystem" for the graph serie to "geo", the graph stops rendering, and currently the zoom only works for the graph, not the map. Moreover, I have set my map to follow coordinates with "boundingCoords", but I do not see that same setting in the graph serie.
The documentation is not very clear about this, so any help would be appreciated.

Related

Apache echarts scatter: assign label to each point

I am building an echarts scatter graph that contains 6 points. I would like to manually assign a label to each point, like I did with the label of X and Y axis.
Is there a way to achieve this? I searched in Apache Echarts docs but I did not find any useful setting for assigning a label to "data" values.
Here is the source code of my graph:
option = {
xAxis: {
data: ['Low', 'Med', 'High'],
name: "Value",
},
yAxis: {
min: '5',
name: "Score",
},
series: [
{
type: 'scatter',
symbolSize: 20,
data: [
[2,9.8],
[1,8.8],
[2,5.9],
[1,9.8],
[1,10.0],
[3,9.8],
[2,10.0],
[1,9.8],
[2,5.9],
[1,9.8]
],
label: {
show: true,
position: 'right',
color: "black",
fontSize: 16,
},
}
],
grid:{
show: true,
backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 102, 102)'
},
{
offset: 1,
color: 'rgb(153, 255, 153)'
}])
},
};
You could specify the labels as an additional value in the data array:
data: [
[ 2, 9.8, "label1" ],
[ 1, 8.8, "label2" ],
...
Then use a formatter function in your label definition, to select the third element of the data array as the label:
label: {
...
formatter: function(d) {
return d.data[2];
}
I also found this solution, working as well as Chris one:
series: [
{
type: 'scatter',
symbolSize: 15,
data: [
{value: [2,9.8] , name: 'value1'},
{value: [1,8.8] , name: 'value2'},
{value: [2,5.9] , name: 'value3'},
],
label: {
show: true,
position: 'right',
formatter: params => params.name,
color: "black",
fontSize: 16,
},

Multiple bars with same category name show differently based on array of arrays or array of objects

I noticed that using
option = {
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
series: [ {
type: 'bar',
data: [
{ name: 'Sun', value: 50 },
{ name: 'Sun', value: 80 },
{ name: 'Mon', value: 100 }
]
}]
}
There are two bars with category as 'Sun'. But if I use
option = {
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [
['Sun',50],
['Sun',80],
['Mon',100]
]
}]
}
I see only one bar for 'Sun' with both data elements overlapping. Why does it work with array of objects differently? Also, if instead of using inline data, if I use dataset, then both array of arrays and array of objects behave the same where there is only one bar with overlap.
The reason I am looking for clarity on this is, I have a visualMap with a different attribute for color which makes the data repeat. I am trying to figure out if I need to create separate series or use the same series.
In general is bad idea to naming data points the same name. Strange that the data in the first case did not merge... If you need make the group then in the Echarts it's named stack. For the stack you can use the same name and it will be joined into one group.
VisualMap usually the global option and affects all series but you can limit with seriesIndex.
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: {
data: ["Cat1", "Cat2", "Cat3", "Cat4", "Cat5", "Cat6"]
},
visualMap: {
type: 'continuous',
range: [0, 70],
seriesIndex: 2,
color: ['green', 'blue', 'red'],
},
yAxis: {},
series: [{
name: 'Series1',
stack: 'group1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
color: 'lightgray'
}, {
name: 'Series2',
stack: 'group1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
color: 'gray'
}, {
name: 'Series3',
stack: 'group2',
type: 'bar',
data: [50, 20, 70, 10, 60, 40],
}]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Echarts show additional info in tooltip

I am using echarts for a scatter plot. Upon hover of a point, I want to show some more data in the tooltip, such as a date and unique ID - this data is not an axis in the plot. So far I have the following below, however I cannot figure out how to display the extra info
option = {
xAxis: {
type: 'value',
name: 'X axis title',
nameLocation: 'middle',
nameGap: 50,
nameTextStyle: {
fontSize: 12
}
},
yAxis: {
type: 'value',
name: 'Y axis title',
nameLocation: 'middle',
nameGap: 70,
nameTextStyle: {
fontSize: 12
}
},
dataZoom: [{
type: 'inside'
}],
legend: {
orient: 'vertical',
left: 10
},
grid: {
top: 80,
containLabel: true,
},
tooltip: {
trigger: "item"
},
series: [{
name: 'Outliers (Forensic Cases)',
type: 'scatter',
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6]
]],
}, {
name: 'Inliers (Regular Transaction)',
type: 'scatter',
data: [[172.7, 105.2], [153.4, 42]]
}]
};
;
Thanks for config, it saves time.
The tooltip component has method formatter and you can pass to it function-callback where to make request to addition data store to get and show on tooltip necessary information.
Suppose you have an object that stored additional information that needs to be shown in the tooltip:
var store = {
outliers: ['A', 'B', 'C', 'D', 'E', 'F'],
inliers: ['A', 'B', 'C', 'D', 'E', 'F']
}
Let's add id to the each data series, which will simplify data fetching.
{
id: 'outliers', // <--- this
name: 'Outliers (Forensic Cases)',
...
},
{
id: 'inliers', // <--- this
name: 'Inliers (Regular Transaction)',
...
}
In the callback you will have this default args:
{
$vars: ["seriesName", "name", "value"],
borderColor: undefined,
color: "#c23531",
componentIndex: 0,
componentSubType: "scatter",
componentType: "series",
data: [159.5, 49.2],
dataIndex: 2,
dataType: undefined,
dimensionNames: ["x", "y"],
encode: {
x: [0],
y: [1]
},
marker: "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#c23531;\"></span>",
name: "",
seriesId: "outliers",
seriesIndex: 0,
seriesName: "Outliers (Forensic Cases)",
seriesType: "scatter",
value: [circular object Array]
}
Let's make the callback handler for the process series data and shown it on the tooltip:
var callback = (args) => {
var data = store[args.seriesId][args.dataIndex]
return args.marker + ' ' + args.value[1] + '<br />' + args.seriesId + ': ' + data
}
Now you can pass callback to formatter. It's all. See example below:
var myChart = echarts.init(document.getElementById('main'));
var store = {
outliers: ['A', 'B', 'C', 'D', 'E', 'F'],
inliers: ['A', 'B', 'C', 'D', 'E', 'F']
}
var callback = (args) => {
var data = store[args.seriesId][args.dataIndex]
return args.marker + ' ' + args.value[1] + '<br />' + args.seriesId + ': ' + data
}
var option = {
xAxis: {
type: 'value',
name: 'X axis title',
nameLocation: 'middle',
nameGap: 50,
nameTextStyle: {
fontSize: 12
}
},
yAxis: {
type: 'value',
name: 'Y axis title',
nameLocation: 'middle',
nameGap: 70,
nameTextStyle: {
fontSize: 12
}
},
dataZoom: [{
type: 'inside'
}],
legend: {
orient: 'vertical',
left: 10
},
grid: {
top: 80,
containLabel: true,
},
tooltip: {
trigger: "item",
formatter: callback,
},
series: [{
id: 'outliers',
name: 'Outliers (Forensic Cases)',
type: 'scatter',
data: [
[161.2, 51.6],
[167.5, 59.0],
[159.5, 49.2],
[157.0, 63.0],
[155.8, 53.6]
],
},
{
id: 'inliers',
name: 'Inliers (Regular Transaction)',
type: 'scatter',
data: [
[172.7, 105.2],
[153.4, 42]
]
}
]
}
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

echarts - visualMap according to y axis

I am trying to add a visual map according to the y axis in echarts.
Taking one of their example:
https://echarts.apache.org/examples/en/editor.html?c=area-pieces
The results looks as follow:
what I'm trying to achieve is:
Obviously here, I have just rotated the picture by 90 degree.
How can this be achieve in echarts directly (so not by saving the picture first)?
The simplest solution would be inverting the axis, data index, and visual map axis. See chart options below:
option = {
backgroundColor: '#fff',
xAxis: {
type: 'value',
boundaryGap: [0, '30%'],
position: 'top'
},
yAxis: {
type: 'category',
boundaryGap: false
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 1,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'rgba(0, 180, 0, 0.5)'
}, {
gt: 5,
lt: 7,
color: 'rgba(0, 180, 0, 0.5)'
}]
},
series: [
{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: 'green',
width: 5
},
markLine: {
symbol: ['none', 'none'],
label: {show: false},
data: [
{yAxis: 1},
{yAxis: 3},
{yAxis: 5},
{yAxis: 7}
]
},
areaStyle: {},
data: [
[200, '2019-10-10'],
[400, '2019-10-11'],
[650, '2019-10-12'],
[500, '2019-10-13'],
[250, '2019-10-14'],
[300, '2019-10-15'],
[450, '2019-10-16'],
[300, '2019-10-17'],
[100, '2019-10-18']
]
}
]
};
Result:
See on Imgur

ECharts - Getting a single splitLine to render in a stacked bar chart

Trying to get a single split line to render on a stacked bar graph.
Here's the code:
options = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Graph 1', 'Graph 2']
},
grid: {
left: '7%',
right: '5%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [40, 41, 42, 43, 44],
axisLabel: {
interval: 1
},
splitLine: {
show: true,
interval: function (param) {
//return param === 1; //what I'm trying to get it to do
return param > 0 && param < 2; //this doesn't work
//return param > 0; //this works, but adds a split line to everything above 1 as well, not what I want. vice versa (param < 2) also works, but again not what I want
},
lineStyle: {
type: 'dashed',
width: 2,
color: '#767676'
}
}
}
],
yAxis: [
{
type: 'value',
name: 'Y',
nameLocation: 'middle',
nameTextStyle: {
padding: [0, 0, 8, 0],
color: '#767676',
fontSize: 14
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
}
],
series: [
{
name: 'Graph 1',
type: 'bar',
barWidth: 20,
stack: 'Graph',
itemStyle: {
color: '#db0011'
},
data: [8000, 10000, 12000, 16000, 20000]
},
{
name: 'Graph 2',
type: 'bar',
barWidth: 20,
barGap: '-100%',
stack: 'Graph',
itemStyle: {
color: '#00a69d'
},
data: [4000, 5000, 6000, 8000, 10000]
}
]
};
As per the above code,
param > 0 works but will add a split line to everything beyond 1 (1 and 2)
likewise, param < 2 will add a split line to everything before 2 (0 and 1)
param > 0 and param < 2 doesn't work (no split line appears)
setting a fixed number causes a split line to appear at the end of the graph as well, despite not being in the right interval (e.g. if my items went from 40 - 80 and I set an interval of 7, then the split line would appear before 47, 54, 61, 68, 75 and on 40 and 80)
How do I get a single split line to appear?
I've also seen Echarts how do you add dashed vertical line in between specific bars on bar chart?, however I don't have enough knowledge on how to modify this to work with a stacked bar chart.
How I want it to look like:
The way I ended up resolving this is:
var option = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Graph 1', 'Graph 2']
},
grid: {
left: '7%',
right: '5%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [40, '', 41, '', 42, '', 43, '', 44],
axisLabel: {
interval: 1
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
name: 'Y',
nameLocation: 'middle',
nameTextStyle: {
padding: [0, 0, 8, 0],
color: '#767676',
fontSize: 14
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
}
],
series: [
{
name: 'Graph 1',
type: 'bar',
barWidth: 20,
stack: 'Graph',
data: [8000, 0, 10000, 0, 12000, 0, 16000, 0, 20000],
markLine: {
silent: true,
symbol: 'none',
label: {
show: false
},
data: [
{
name: "Test",
xAxis: 2.5,
lineStyle: {
color: '#767676',
width: 2,
type: 'dashed'
}
},
]
}
},
{
name: 'Graph 2',
type: 'bar',
barWidth: 20,
barGap: '-100%',
stack: 'Graph',
data: [4000, 0, 5000, 0, 6000, 0, 8000, 0, 10000]
}
]
};
A few things to note:
Add a bunch of empty string entries for your labels (x-axis). As can be seen above, data is [40, '', 41, '', 42, '', 43, '', 44] instead of [40, 41, 42, 43, 44].
Add zeroes in your graph series relative to where you inserted empty string labels in your x-axis data above (e.g. 4000, 0, 5000, 0, 6000, 0, 8000, 0, 10000). Do this for each graph you have.
In any of the graphs, insert the above markLine syntax I added to Graph 1. You will need to adjust the value of xAxis until you get the middle point.
Demo: https://jsfiddle.net/k9hgj5zb/1/
Credits to this link: Draw horizontal target line using EChart.JS