the ui rendering
In my echats instance definition, I try to use HTMLImageElement to created the textare, seems like not a good solution.
And now,
I used Base64Iamge instead of it but feels too. so i want to ask how do i do to implement like above about ui rendering.
option = {
series: [{
tooltip: {
trigger: 'item'
},
zlevel: 1,
name: '浙江省',
type: 'map3D',
map: '浙江省',
boxDepth: 120,
regionHeight: 2,
aspectScale: 0.9,
roam: false,
label: {
show: true,
textStyle: {
color: "white",
fontSize: 12,
fontFamily: '微软雅黑',
backgroundColor: "rgba(0,0,0,0)",
},
},
groundplane: {
show: true
},
data: data,
shading: 'realistic',
realisticMaterial: {
detailTexture: "data:image/png;base64,......",
textureTiling: 1,
roughness: 0,
metalness: 0,
roughnessAdjust: 0
},
},
],
animation: false
};
myChart.setOption(option);
Related
I'm trying to make a chart in Apache eCharts that is a single ring with a large number in the middle. I want to use it to display a website score.
This is the closest image example I can find online of what I am trying to achieve:
And I have found these polar bar charts in the Apache eCharts docs which look great:
But I don't know how to only have one large ring with a number displayed in the middle.
Do you know how I can achieve that?
Here is my current code, taken from the docs:
option = {
angleAxis: {
show: false,
max: 10
},
radiusAxis: {
show: false,
type: 'category',
data: ['AAA', 'BBB', 'CCC', 'DDD']
},
polar: {},
series: [
{
type: 'bar',
data: [3, 4, 5, 6],
colorBy: 'data',
roundCap: true,
label: {
show: true,
position: 'start',
formatter: '{b}'
},
coordinateSystem: 'polar'
}
]
};
You probably want a variant of the Gauge chart.
here is a series that would create something very close to your first image example.
series: [
{
type: 'gauge',
startAngle: 90,
endAngle: 270,
min: 0,
max: 100,
progress: {
show: true,
width: 18
},
pointer: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
title: {
show: false
},
itemStyle: {
color: 'blue'
},
detail: {
formatter: '{value}',
color: 'auto',
offsetCenter: [0, '-0%'],
valueAnimation: true,
},
}
]
Here is a link to an example that is similar to your second image
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,
},
I have the chart bellow and I want to add the percentage to the series body. Like I manipulate the image bellow in red.
how Is this possible?
https://codesandbox.io/s/label-line-adjust-forked-09ukre?file=/index.js
var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false
});
var app = {};
var option;
var datas = [
////////////////////////////////////////
[
{ name: "test1", value: 20 },
{ name: "test2", value: 40 },
{ name: "test3", value: 40 }
]
];
option = {
title: {
text: "test",
left: "center",
textStyle: {
color: "#999",
fontWeight: "normal",
fontSize: 14
}
},
series: datas.map(function (data, idx) {
return {
type: "pie",
radius: [80, 160],
top: "10%",
height: "33.33%",
left: "center",
width: 400,
itemStyle: {
borderColor: "#fff",
borderWidth: 1
},
label: {
alignTo: "edge",
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: "#999"
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
data: data
};
})
};
if (option && typeof option === "object") {
myChart.setOption(option);
}
window.addEventListener("resize", myChart.resize);
Thanks
To place information inside the chart, you have to use position: "inside" in the label. Set what is put inside the label with the formatter. (Here, {c} is the value of a data item)
label: {
formatter: "{c}%",
position: "inside"
},
But it seems that it's not possible to have both a label inside AND one outside the same chart (like in your image). However, a workaround can do the job here. Like using 2 identical series except one has the label from your example code, and one has the label code I wrote above. One chart will be on top of the other (wich is a bit messy) but the result will be as you want :
In the example below the y-axis crosses at 1, rather than 0. Is there a way to achieve this in echarts?
It seems to me, literally, you can't do this with basic bar chart because it will break the coordinate system and result will be anything but not a bar chart.
If you need only visual like on attached picture then you can hide xAxis and draw its surrogate with markLine but you will have the troubles with bar positioning (that will fix with stack and transparent bars, see below).
If you need real chart with responsive, zoomable and other opts then in the Echarts you can use custom series for build own chart type (see example).
Example how to make picture like attached:
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {},
xAxis: {
data: ['Category-1', 'Category-2', 'Category-3', 'Category-4'],
show: true,
axisLine: {
show: true,
lineStyle: {
opacity: 0
}
},
axisTick: {
show: false,
}
},
yAxis: {
max: 4,
min: -1
},
series: [{
name: 'Series-1',
type: 'bar',
stack: 'group',
data: [1, 1, -3],
color: 'rgba(0,0,0, 0)',
}, {
name: 'Series-2',
type: 'bar',
stack: 'group',
data: [{
value: 1,
itemStyle: {
color: 'red'
}
}, {
value: 2,
itemStyle: {
color: 'green'
}
}, {
value: 1,
itemStyle: {
color: 'orange'
}
}],
markLine: {
symbol: "none",
data: [{
silent: false,
yAxis: 1,
lineStyle: {
color: "#000",
width: 1,
type: "solid"
}
}, ],
label: {
show: false,
}
},
}]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
P.S. If this not a secret, why you need it?
I have used highcharts in my iphone application, Everything works great except one is that when I click on pagination arrows of legend in highchart, it skips one page and goes to next page.
Say I have 4 pages, so if I am on 1st page right now and click to view another page then it jumps to 3rd page. After clicking next for 3rd page I go to 4th page and when I click on prev it skips 3rd page and jumps to 2nd page. And very important to take note is, its happening on iphone only not browser.
I am surprised to see this and unable to identify why this behaviour is there with pagination...
following is my code for creating highchart
var defaultBarChart = {
options: {
chart: {
type: 'column',
alignTicks:false,
//height: 250,
width: Constants.analyticChartWidth
},
yAxis: {
title: {
text: ''+$filter('translate')('values')
}
},
tooltip: {
enabled: false,
style: {
width: 200,
padding: 10,
lineHeight: "normal"
},
useHTML:true
},
legend: {
verticalAlign: 'bottom',
align: 'left',
x: 0,
itemStyle: {
width: deviceWidth,
'color':'#434f5a',
'font-size':'12px'
},
maxHeight: 105,
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 18,
inactiveColor: '#CCC'
}
},
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
''
],
crosshair: true
},
tooltip: {
/* style: {
width: 100
}*/
enabled: false
},
/* tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
style: {
width: 100
}
},*/
series: [{
name: '',
data: [0],
showInLegend: false
}],
loading: false,
credits: {
enabled: false
}
};
I want to ask, if problem anywhere else other than navigation can affect on it?
Please.. help me to get out of this...!!