I have created a function which generates echarts based on the selection in a dropdown.
switch(graphtype) {
case "type1":
someNameECharts.createChartLineCat({graphData: data,
bindTo: "ResultsGraphBatch",
width: 1000,
height: 500})
break;
case "type2":
// myChart.clear();
// $("#ResultsGraphBatch").empty();
someNameECharts.createChartLineCat({graphData: data,
bindTo: "ResultsGraphBatch",
width: 1000,
height: 500})
break;
etc.
someNameECharts.createChartLineCat refers to a function in a seperate .js file which generates the chart.
This works fine. By default “type1” is generated as expected. When I select “type2” I get this “There is a chart instance already initialized on the dom” Error.
I tried to solve it with a myChart.clear() option but “myChart” is not recognised. Emty the “Div” totally “removes” the div.
This is the function to generate the chart in my seperate .js file:
someNameECharts.createChartLineCat = function(config) {
/// I removed some additional code to keep this short ////
let myChart = echarts.init(document.getElementById(config.bindTo), null, {width: config.width, height: config.height});
let option = {
title: {
text: config.title
},
toolbox: {
feature: {
dataZoom: {},
saveAsImage: {},
magicType: {
type: ['line', 'bar', 'stack']
}
}
},
color: colorSchema,
dataset: [
{
dimensions: [{name: keyNames[0], type:'ordinal'}, {name: keyNames[1]}, {name: keyNames[2]}],
source: config.graphData,
},
],
tooltip: {},
grid: {
width: '70%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
orient: 'vertical',
right: 10,
top: 'center',
},
xAxis: {
type: 'category',
},
yAxis: {
type: 'value',
},
series: seriesSettings
};
outputDataset.forEach(function(ds) {
option.dataset.push(ds);
});
myChart.setOption(option);
}