Related
I see this example in Apache ECharts
https://echarts.apache.org/examples/en/editor.html?c=line-stack
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
option && myChart.setOption(option);
Now that ECharts v5.x has support to specify encode , is it possible to create the above chart using encode instead of specifying data array for each series?
What i am looking for is something on these lines
option = {
title: {
text: 'Some Title'
},
tooltip: {
trigger: 'axis'
},
dataset:{
source:[
['XAxis_Column_Name','Series_Column_Name','YAxis_Column_Name'],
['x1','s1',10],
['x2','s2',20],
['x3','s1',40],
['x4','s1',70],
['x5','s2',90],
['x5','s1',100],
['x6','s3',120],
]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
encode:{
x: "XAxis_Column_Name"
}
},
yAxis: {
type: 'value',
encode:{
y: "YAxis_Column_Name"
}
},
series: [
{type: 'line'},
{type: 'line'},
{type: 'line'}
]
};
The end result should be a line chart with 3 lines (one each for s1, s2 and s3). Any help here is much appreciated. I don't want to deal with data extraction and segregating them into arrays for each series
I use echarts plugin to build line chart at a some web pages. It works good but I can't find out inside documentation how to add padding between line chart and y-axis label and move y-axis label to the center between y-axis split lines?
Current line echarts plugin instance view:
Expected line echarts plugin instance view:
The screenshot above mean that I mentally shifted the graph away from the internal label so that they would not intersect and moved the labels along the y-axis of the game below exactly in the center between the split lines
What settings in the plugin do I need to change to achieve the same result as in the screenshot with the expected result?
You can achieve this in the different ways, but most of the them are costly to support and harden to implement. It one of safety and ease way but you will need to keep an eye that xAxis have a little bit more points than series data to show gap.
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
yAxis: {
type: 'value',
position: 'right',
axisLabel: {
inside: true,
margin: 50,
fontSize: 18
}
},
series: [{
type: 'line',
areaStyle: {
color: 'rgba(104, 216, 214, 0.4)'
},
lineStyle: {
width: 2,
color: 'rgba(104, 216, 214, 1)'
},
data: [120, 132, 101, 134, 90, 230, 210]
}, ]
};
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>
var myChart = echarts.init(document.getElementById('main'));
var seriesData = Array.from({length: 100}, () => Math.floor(Math.random() * 5000));
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '10%',
bottom: '15%',
},
xAxis: [{
id: 'xAxis1',
type: 'category',
boundaryGap: false,
data: Array.from({length: seriesData.length}, () => Math.floor(Math.random() * 100)),
axisLine: {
lineStyle: {
shadowOffsetX: 60,
},
},
}],
yAxis: [{
type: 'value',
axisLine: { onZero: false },
position: 'right',
show: true,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0)',
},
},
splitLine: {
lineStyle: {
shadowOffsetX: 60,
shadowColor: '#ccc'
}
},
axisLabel: {
interval: 0,
inside: true,
margin: -45,
fontSize: 16,
padding: [-50, 0, 0, 0],
color: 'black',
showMinLabel: false,
showMaxLabel: false,
},
},{
type: 'value',
position: 'right',
show: true,
offset: 59,
}
],
dataZoom: [{
type: 'inside'
}, {
type: 'slider',
show: true,
bottom: 0
}],
series: [{
id: 'series1',
type: 'line',
yAxisIndex: [0,1],
lineStyle: {
width: 1,
},
label: {},
data: seriesData,
}],
};
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>
I have setup highchart in my vue.js template. I noticed that when i open the browser console or resize the browser, the highchart tends to move up. But right after refreshing the page with that browser size, it aligns perfectly in the centre.
Here is my code
<template>
<highcharts :options="chartOptions"></highcharts>
</template>
<script>
import { Chart } from "highcharts-vue";
export default {
name: "CustomGuage",
components: {
highcharts: Chart
},
props: ["data", "title", "name", "min", "max", "format", "text", "x", "y", "target",
"targetFormat"],
data() {
return {
chartOptions: {
chart: {
type: "solidgauge",
style: {
fontFamily: 'Segoe UI Light',
fontSize :'22px',
},
// plotBackgroundColor: null,
// plotBackgroundImage: null,
// plotBorderWidth: 0,
// plotShadow: false,
marginBottom: 190
},
title: {
text: this.title,
align: "left"
},
pane: {
center: ["50%", "85%"],
startAngle: -90,
endAngle: 90,
size: 200,
background: {
innerRadius: "60%",
outerRadius: "100%",
shape: "arc",
backgroundColor: '#f2f2f2'
}
},
// the value axis
yAxis: {
min: 0,
max: this.max,
stops: [
[0.1, "#c00000"], // green
[0.5, "#ffc000"], // yellow
[0.9, "#4f6228"] // red
],
// minColor: '#DF5353',
// maxColor: '#55BF3B',
lineWidth: 0,
//tickWidth: 0,
minorTickInterval: null,
tickPositions: [0, this.max],
title: {
y: -70
},
labels: {
y: 16
}
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -1,
borderWidth: 0,
useHTML: true,
}
}
},
series: [
{
name: this.name,
data: this.data,
dataLabels: {
format: this.format
},
},
{
data: this.target,
dataLabels: {
enabled: true,
format:this.targetFormat,
verticalAlign: 'top',
borderWidth: 0,
//useHTML: true,
},
tooltip: {
enabled: false
},
type: "gauge",
dial: {
baseLength: "100%",
radius: "110%",
rearLength: "-45%",
},
}
]
}
};
},
}
};
</script>
Is there anything i can add or do to make sure that the chart position does not change?
I'm building a line graph that needs an overlay at a specified point on the x-axis. My current implementation here has an overlay, but I would like it to start and stop at a straight vertical line on the x-axis and also have a smooth top that follows along the line. Has anybody implement something similar to this?
option = {
xAxis: {
data: [1,2,3,4,5,6,7,8,9,10,11,12],
boundryGap: false,
},
yAxis: {
type: 'value'
},
series: [{
data: [0,0,0,0.003,0.05,0.32,1,0.32,0.05,0.003,0,0],
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(250,10,10,1)'
}, {
offset: 0.8,
color: 'rgba(250,250,0, 0.2)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
},
{
data: [0,0,0,0,0,0,0,0.32,0,0,0,0],
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: 'black'
}
},
}]
};
try change data 0 to null
option = {
xAxis: {
data: [1,2,3,4,5,6,7,8,9,10,11,12],
boundryGap: false,
},
yAxis: {
type: 'value'
},
series: [{
data: [0,0,0,0.003,0.05,0.32,1,0.32,0.05,0.003,0,0],
type: 'line',
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(250,10,10,1)'
}, {
offset: 0.8,
color: 'rgba(250,250,0, 0.2)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
},
{
data: [null,null,null,null,null,null,null,0.32,0.05,null,null,null],
type: 'line',
areaStyle: {
normal: {
color: 'black'
}
},
}]
};
you can get like this:
Yes, it's not smooth. With smooth, these two series cannot have same smooth top, because the smooth top depends on series data. Apparently, these two series have different series data.
check this below:
BUT, these still other trick to achieve this,
just give you a idea, use two xAxis, the second series have more data points than first series. With more data points, you can use that to simulate same smooth curve.
option = {
xAxis: [{
data: [1,2,3,4,5,6,7,8,9,10,11,12],
boundryGap: false,
axisTick: {
alignWithLabel: true
}
}, {
data: [1 ,2,3,4,5,6,7,8,9,10,11,12, 1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4],
boundryGap: false,
axisTick: {
alignWithLabel: true
}
}],
yAxis: {
type: 'value'
},
series: [{
data: [0,0,0,0.003,0.05,0.32,1,0.32,0.05,0.003,0,0],
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(250,10,10,1)'
}, {
offset: 0.8,
color: 'rgba(250,250,0, 0.2)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
},
{
data: [,,,,,,,,,,,,,,,,,0.32,0.15, 0.075],
type: 'line',
xAxisIndex: 1,
smooth: true,
areaStyle: {
normal: {
color: 'black'
}
},
}]
};
like this:
My problem is changing background bars in a highchart bar chart. I can change bars to a specific color like below but I want to make it gradient.
In this code I used red color (FF0000) in chart options. How to change it for gradient backgroud?
HTML :
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
JS :
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
colors: [
'#ff0000'
],
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Percentage',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [10, 31, 63, 3, 28]
}]
});
});
JSFiddle
JsFiddle
Please refer above fiddle to check the results
First, declare a gradient as per Highcharts
const color_grad1 = {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#fdfc47'],
[1, '#24fe41']
]
};
Then use gradient as follows:
data: [{y: 10, color: color_grad1}, 31, 63, 3, 28]