Datas can be using with json
$.ajax({
type: "GET",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
url: 'data/chartlibar1.json',//json path
error: function () {
alert("An error occurred.");
},
success: function (data) {
//alert(data.male)//data control
var chartliexample = echarts.init(document.getElementById('barchart'));
barChartOne.setOption({
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Male', 'Female']
},
toolbox: {
show: true,
feature: {
mark: { show: false },
dataView: { show: false, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true, title: 'Refresh' },
saveAsImage: { show: true, title: 'Save As Image' }
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Male',
type: 'bar',
data: data.male,//male datas from json
markPoint: {
data: [
{ type: 'max', name: 'Male' },
{ type: 'min', name: 'Male' }
]
},
markLine: {
data: [
{ type: 'average', name: 'Avarage' }
]
}
},
{
name: 'Female',
type: 'bar',
data: data.female,//female datas from json
markPoint: {
data: [
{ name: 'Female', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
{ name: 'Female', value: 2.3, xAxis: 11, yAxis: 3 }
]
},
markLine: {
data: [
{ type: 'average', name: 'Avarage' }
]
}
}
]
});
}
});