In version 3, you can use the function and event of the echarts themselves directly, overriding the function for the event, as written const updateAxisPointer = function(event)... I can’t understand how to do this in version 4. Here is a [link][1] to version 4. I tried to work with the delegateMethod function, but it displays the error this.chart [methodName] is not a function.
const updateAxisPointer = function(event) {
console.log('event', event);
};
this.$refs.eChart.delegateGet('updateAxisPointer', updateAxisPointer);
Here is how the code looks for version 3
<div class="echarts">
<IEcharts :option="option" #ready="onReady" />
</div>
</template>
<script>
import IEcharts from 'vue-echarts-v3/src/full.js';
export default {
name: 'View',
components: {
IEcharts,
},
data() {
// const that = this
return {
ins: null,
echarts: null,
option: {
legend: {
orient: 'vertical',
top: 40,
left: 60,
},
tooltip: {
trigger: 'axis',
showContent: false,
},
dataset: {
source: [],
},
yAxis: {
type: 'value',
name: '',
nameLocation: 'middle',
nameGap: 40,
},
grid: {
left: 40,
right: 37,
bottom: 45,
top: '50%',
containLabel: true,
},
series: [],
}
};
},
methods: {
onReady(instance, echarts) {
const that = this;
that.ins = instance;
that.echarts = echarts;
const updateAxisPointer = function(event) {
let xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
let dimension = xAxisInfo.value + 1;
that.ins.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {#[' + dimension + ']} ({d}%)',
},
encode: {
value: dimension,
tooltip: dimension,
},
},
});
}
};
that.ins.on('updateAxisPointer', updateAxisPointer);
},
},
};
</script>```
[1]: https://github.com/ecomfe/vue-echarts/blob/master/src/components/ECharts.vue
You can use #updateAxisPointer directly with Vue's event handling.
I tested the following example with vue-echarts-v5.0 but it should already work in version 4.1.
App.vue:
<template>
<chart
:options="options"
#updateAxisPointer="updateAxisPointer"
>
</chart>
</template>
<script>
import ECharts from 'vue-echarts'
export default {
name: 'Interactive',
components: {
'chart': ECharts,
},
data() {
return {
options: {
title: {
text: 'Interactive example chart',
left: 'center',
textStyle: {
color: '#000'
}
},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['technology', '2012', '2013', '2014', '2015', '2016', '2017'],
['photovoltaic', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['wind', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['natural gas', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
['coal', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1],
['oil', 50.2, 60, 60.2, 70.4, 50.9, 39.1],
['battery', 20, 30, 80.2, 50.4, 10.9, 29.1],
['hidrogen', 30, 40, 60, 50, 50, 19.1]
]
},
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '30%'],
label: {
formatter: '{b}: {#2012} ({d}%)'
},
encode: {
itemName: 'technology',
value: '2012',
tooltip: '2012'
}
}
]
}
};
},
methods: {
updateAxisPointer(params) {
var xAxisInfo = params.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
this.options.series = [{
id: 'pie',
label: {
formatter: '{b}: {#'+dimension+'} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}]
}
},
},
};
</script>
Related
I am working on my project with Django where I need to use Javascript and a chart library. I have two charts that I made with ApexCharts, but I don't know how to prevent the label text to being slant and overflow. I can't find anything about this problem in the documentation or I'm not enough familiar to find what I need. :)
var options07 = {
series: [{
name: 'SOHA',
data: [ {{i.szervkult07a}} ]
}, {
name: 'RITKÁN',
data: [ {{i.szervkult07b}} ]
}, {
name: 'IDŐNKÉNT',
data: [ {{i.szervkult07c}} ]
}, {
name: 'GYAKRAN',
data: [ {{i.szervkult07d}} ]
}, {
name: 'MINDIG',
data: [ {{i.szervkult07e}} ]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
stackType: '100%'
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'
],
},
fill: {
opacity: 1
},
legend: {
position: 'right',
offsetX: 0,
offsetY: 50
},
};
var chart = new ApexCharts(document.querySelector("#chart_szk07"), options07);
chart.render();
var options07b = {
series: [{
name: 'SOHA',
data: [{{i.szervkult07a}}]
}, {
name: 'RITKÁN',
data: [{{i.szervkult07b}}]
}, {
name: 'IDŐNKÉNT',
data: [{{i.szervkult07c}}]
}, {
name: 'GYAKRAN',
data: [{{i.szervkult07d}}]
}, {
name: 'MINDIG',
data: [{{i.szervkult07e}}]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
},
yaxis: {
title: {
text: 'fő'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return val + " fő"
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart_szk07b"), options07b);
chart.render();
From the docs, You should be able to add rotate: 0 to the labels section of xaxis. I suggest trying to shorten those. I imagine a long label will not look as good as a shorter one.
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
labels: {
rotate: 0
}
}
I have already made a custom graph using highchart. But it doesn't look same with design.
this is chart that i already custom
this is design that what i want
this is my code that i build using vue js,
<template>
<div>
<div class="card">
<Highcharts :options="options" />
<!--<Highstock :options="options" />
<Highmaps :options="options" />
<HighchartsGantt :options="options" />-->
</div>
</div>
</template>
<script>
import Datepicker from 'vuejs-datepicker';
import moment from 'moment';
import Highcharts from 'highcharts';
import loadMap from 'highcharts/modules/map.js';
import { genComponent } from 'vue-highcharts';
loadMap(Highcharts);
export default {
name: "SummarySproutComponent",
data: function() {
return {
}
},
created() {
this.getOption()
},
components: {
Highcharts: genComponent('Highcharts', Highcharts),
Highmaps: genComponent('Highmaps', Highcharts)
},
methods: {
getOption(){
let color = {
'38,5': 'red',
'39': 'green',
'39,4': 'blue'
}
let dataColor = [
{
'name':'halo',
'value': '39,5',
'floatValue': 3.5
},
{
'name':'halo',
'value': '39,77',
'floatValue': 4
},
{
'name':'halo',
'value': '40',
'floatValue': 5
}
]
let dataPlotlines = []
for(let i=0;i<dataColor.length;i++){
let dataPlotlinesLoop = {
color: '#FF0000',
width: 2,
value: dataColor[i].floatValue,
zIndex: 1.67,
label: {
// text: 'Plot line',
formatter: function () {
return '<span>'+dataColor[i].value+'</span></br><img style="width:100px" src="https://img2.pngdownload.id/20180422/lpe/kisspng-microsoft-word-template-document-clip-art-61-clipart-5adce2aaedf920.7563442215244253869748.jpg" />';
},
verticalAlign: 'top',
align: 'right',
x: 15,
rotation: 0
}
}
dataPlotlines.push(dataPlotlinesLoop)
}
let colors = Highcharts.getOptions().colors
let optionStatic = {
chart: {
styledMode: true,
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo',
align: 'left'
},
subtitle: {
text: 'Source: WorldClimate.com',
align: 'left'
},
xAxis: [
{
categories: ['38,5', '39', '39,4', '39,5', '39,6', '39,77', '39,9', '40', '40,2', '40,4', '40,5', '41'],
plotLines:
dataPlotlines
,
labels: {
formatter () {
return `<span style="color: ${color[this.value]}">${this.value}</span>`
}
}
}
],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true,
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
},],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || // theme
'rgba(255,255,255,0.25)'
},
plotOptions: {
spline: {
// lineWidth: 4,
marker: {
enabled: false
}
},
plotLines:{
dataLabels: {
enabled: true,
color: '#000000',
}
}
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [0,0,0,1,2,6,2.5,1.8,0,0,0,0],
tooltip: {
valueSuffix: ' mm'
}
},
{
name: 'Temperature',
type: 'areaspline',
data: [0,10,40,80],
tooltip: {
valueSuffix: ' °C'
},
marker: {
enabled: false
},
},
{
name: 'Temperature',
type: 'spline',
// type: 'areaspline',
data: [0,10,40,80,150,280,150,80,40,10,0,0],
tooltip: {
valueSuffix: ' °C'
},
marker: {
enabled: false
}
}
],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
floating: false,
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},
yAxis: [{
labels: {
align: 'right',
x: 0,
y: -6
},
showLastLabel: false
}, {
labels: {
align: 'left',
x: 0,
y: -6
},
showLastLabel: false
}, {
visible: false
}]
}
}]
}
}
this.options = optionStatic
},
genComponent(name, Highcharts) {}
}
}
</script>
This is my first try making custom chart using highchart with a difficult pattern. I have already tried my best to make that design match with required one. I am still learning javascript and css (with the framework(vue)). I request someone to please help me to solve that problem.
Playing around with eCharts and i'm trying to replicate the graph shown in this tutorial
https://medium.com/#mailjontay/make-a-dynamic-chart-with-react-and-echarts-a-simple-tutorial-92a5c3c053a2
I'm using my own data sets, and both of my .js files are identical format to the ones used in the tutorial.
I'm having an issue with rendering the number of workers on my Yaxis, I'm not receiving any error messages and my data is defined.
My code is as follows:
import React, { Component } from "react";
import ReactEcharts from "echarts-for-react";
import { workForceDataFemale } from "./WorkForceDataFemale";
import { workForceDataMale } from "./WorkForceDataMale";
class App extends Component {
getOption = () => {
let sectors = [];
let years = [];
let workforceObject = [];
let workers = [];
Object.entries(workForceDataFemale).forEach(entry => {
years = [...years, entry[0]];
workforceObject = [...workforceObject, entry[1]];
entry[1].forEach(e => {
workers = [...new Set([...workers, e.n_workers])]
console.log(e.n_workers, "number of workers")
sectors = [...new Set([...sectors, e.sector])];
});
});
let options = years.map(year => {
let obj = {};
obj["series"] = [
{
stack: "group",
data: workForceDataFemale[year]
},
{
stack: "group",
data: workForceDataMale[year]
}
];
obj["title"] = {
text: `Number of workers over time by gender`
};
return obj;
});
return {
baseOption: {
timeline: {
autoPlay: false,
axisType: "category",
bottom: 20,
data: years,
height: null,
inverse: true,
left: null,
orient: "vertical",
playInterval: 1000,
right: 0,
top: 20,
width: 55,
label: {
normal: {
textStyle: {
color: "#aaa"
}
},
emphasis: {
textStyle: {
color: "#333"
}
}
},
symbol: "none",
lineStyle: {
color: "#aaa"
},
checkpointStyle: {
color: "#354EF6",
borderColor: "transparent",
borderWidth: 2
},
controlStyle: {
showNextBtn: false,
showPrevBtn: false,
normal: {
color: "#354EF6",
borderColor: "#354EF6"
},
emphasis: {
color: "#5d71f7",
borderColor: "#5d71f7"
}
}
},
color: ["#e91e63", "#354EF6"],
title: {
subtext: "Data from Sweet Analytics",
textAlign: "left",
left: "5%"
},
tooltip: { backgroundColor: "#555", borderWidth: 0, padding: 10 },
legend: {
data: ["Female", "Male"],
itemGap: 35,
itemHeight: 18,
right: "11%",
top: 20
},
calculable: true,
grid: {
top: 100,
bottom: 150,
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true,
formatter: function(params) {
return params.value.replace("\n", "");
}
}
}
}
},
xAxis: [
{
axisLabel: {
interval: 0,
rotate: 55,
textStyle: {
baseline: "top",
color: "#333",
fontSize: 10,
fontWeight: "bold"
}
},
axisLine: { lineStyle: { color: "#aaa" }, show: true },
axisTick: { show: false },
data: sectors,
splitLine: { show: false },
type: "category"
}
],
yAxis: [
{
axisLabel: {
textStyle: { fontSize: 10 }
},
axisLine: { show: false },
axisTick: { show: false },
name: "Population",
splitLine: {
lineStyle: {
type: "dotted"
}
},
type: "value"
}
],
series: [{ name: "Female", type: "bar", data: workers }, { name: "Male", type: "bar", data: workers }]
},
options: options
};
};
render() {
return (
<ReactEcharts
option={this.getOption()}
style={{ height: "85vh", left: 50, top: 50, width: "90vw" }}
opts={{ renderer: "svg" }}
/>
);
}
}
export default App;
This is how far i've gotten :
And I'm trying to get to here:
In the series you should add stack you have in each object to add stack: "stackbar" like this :
series: [
{ name: "Female", type: "bar", data: workers, stack: "stackbar" },
{ name: "Male", type: "bar", data: workers , stack: "stackbar"}
]
So i have the following configuration:
const frequencyChartoption = {
title: {},
tooltip: {},
legend: {
data: ['Frekvens', 'Vigtighed']
},
xAxis: {
type: 'category',
data: ['marker_01', 'marker_02'],
axisLabel: {
formatter: function (value) {
return '{' + value + '| }\n{value|}';
},
margin: 20,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
marker_01: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.marker_01
}
},
marker_02: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.maker_02
}
},
}
}
},
yAxis: {},
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: icons.marker_01,
itemStyle: {
normal: {
color: colors[0],
label: {
interval: 5,
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
},
{
name: 'Vigtighed',
type: 'bar',
data: frequencyChartImportance,
itemStyle: {
normal: {
color: colors[1],
label: {
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
}
]
};
Now as you can see i am using two images as my xAxis
Now i wish to make these show up on my tooltip when i hover over the chart. However i am not quite sure how to do that and was hoping some of you might be able to help?
Simply stated, a series may have a tooltip but the tooltip must be listed as an object with an identifying trigger (see tooltip documentation).
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: {
show: true,
trigger: 'axis',
formatter: (params) => {
// see tooltip.formatter for details
// you want to focus on the 'marker' property
return params[0].name;
}
}
}]
With this in mind, you can set two variables and print them as need be within the output of your tooltip. See the additional example below (from CodePen).
var myChart = echarts.init(document.getElementById("main"));
// specify chart configuration item and data
var option = {
title: {
text: "ECharts entry example"
},
tooltip: {
show: true,
trigger: "axis",
backgroundColor: 'rgba(0, 0, 0, 0.8)',
formatter: (params) => {
// create new marker
var icon0 = `<span data-tooltip="minimum" style="border-left: 2px solid #fff;display: inline-block;height: 12px;margin-right: 5px;width: 20px;"><span style="background-color:${params[0].color};display: block;height: 4px;margin-top: 4px;width: 20px;"></span></span>`;
var icon1 = `<span data-tooltip="implied-high" style="background-color:rgba(255,255,255,.75);border-radius: 2px;display: inline-block;height: 12px;margin-right:5px;width: 20px;"><span style="background-color:${params[0].color};border: 1px solid ${params[0].color};border-radius:50%;display:block;height:6px;margin-left:7px;margin-top:3px;width:6px;"></span></span>`;
console.log("params", params, params[0].name);
return `${icon0} ${params[0].name}
${icon1} ${params[0].value}`;
},
textStyle: {
fontWeight: 'bold',
fontSize: 18
}
},
legend: {
data: ["Sales"]
},
xAxis: {
data: ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]
},
yAxis: {},
series: [
{
name: "Sales",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
I have created a Bar graph using echarts. I want to bind multiple values to data object dynamically, currently I'm able to bind only single value. here is my java script. I'mm a newbie for this, hoping for a fully functional solution.
var myChart = echarts.init(document.getElementById('page_views_today'));
var option = {
// Setup grid
grid: {
zlevel: 0,
x: 20,
x2: 40,
y: 20,
y2: 20,
borderWidth: 0,
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)',
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow', // line|shadow
lineStyle: { color: 'rgba(0,0,0,.5)', width: 1 },
shadowStyle: { color: 'rgba(0,0,0,.1)' }
}
},
// Add legend
legend: {
data: []
},
toolbox: {
orient: 'vertical',
show: true,
showTitle: true,
color: ['#bdbdbd', '#bdbdbd', '#bdbdbd', '#bdbdbd'],
feature: {
mark: { show: false },
dataZoom: {
show: true,
title: {
dataZoom: 'Data Zoom',
dataZoomReset: 'Reset Zoom'
}
},
dataView: { show: false, readOnly: true },
magicType: {
show: true,
itemSize: 12,
itemGap: 12,
title: {
line: 'Line',
bar: 'Bar',
},
type: ['line', 'bar'],
option: {
/*line: {
itemStyle: {
normal: {
color:'rgba(3,1,1,1.0)',
}
},
data: [1,2,3,4,5,6,7,8,9,10,11,12]
}*/
}
},
restore: { show: false },
saveAsImage: { show: true, title: 'Save as Image' }
}
},
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'category',
boundaryGap: false,
data: [
'0h-2h', '2h-4h', '4h-6h', '6h-8h', '8h-10h', '10h-12h', '12h-14h', '14h-16h', '16h-18h', '18h-20h', '20h-22h', '22h-24h'
],
axisLine: {
show: true,
onZero: true,
lineStyle: {
color: 'rgba(63,81,181,1.0)',
type: 'solid',
width: '2',
shadowColor: 'rgba(0,0,0,0)',
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#fff',
type: 'solid',
width: 0,
shadowColor: 'rgba(0,0,0,0)',
},
},
}],
// Vertical axis
yAxis: [{
type: 'value',
splitLine: {
show: false,
lineStyle: {
color: 'fff',
type: 'solid',
width: 0,
shadowColor: 'rgba(0,0,0,0)',
},
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
onZero: true,
lineStyle: {
color: '#ff0000',
type: 'solid',
width: '0',
shadowColor: 'rgba(0,0,0,0)',
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3,
},
},
}],
// Add series
series: [
{
name: 'Page Views',
type: 'bar',
smooth: true,
symbol: 'none',
symbolSize: 2,
showAllSymbol: true,
barWidth: 10,
itemStyle: {
normal: {
color: 'rgba(63,81,181,1.0)',
borderWidth: 2, borderColor: 'rgba(63,81,181,1)',
areaStyle: { color: 'rgba(63,81,181,1)', type: 'default' }
}
},
data: []
}
]
};
Here is my java-script function from where I want to bind the values dynamically.
// Load data into the ECharts instance
load_graph_with_positions(option);
function load_graph_with_positions(option) {
option.series[0].data[0] = 1234;
myChart.setOption(option);
}
One way to do this is by passing values in an array and then shifting the previous values, while pushing-in the data. Following is the example of shiting and pushing the data:
option.series[0].data.shift();
option.series[0].data.push(json.num);
Hence your function will become:
function load_graph_with_positions(option,values) {
var valuesLength = values.length;
for (var i = 0; i < valuesLength; i++) {
option.series[0].data.shift();
option.series[0].data.push(values[i]);
}
myChart.setOption(option);
}
You can also refer to following github example for dynamic addition:
https://github.com/hisune/Echarts-PHP/blob/master/demo/dynamic.php