我将详细讲解“ajax动态赋值echarts的实例(饼图和柱形图)”的完整攻略。以下是具体步骤:
<!-- 引入ECharts插件的JS库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<!-- 引入ECharts主题文件的JS库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/theme/macarons.min.js"></script>
<!-- 定义ECharts容器 -->
<div id="chart" style="width: 600px;height:500px;"></div>
ajax
获取需要的数据$.ajax({
url: 'data.json',
dataType: 'json',
success: function (data) {
// 数据获取成功后,进行动态设置ECharts数据
}
});
success
回调函数中,动态设置ECharts数据// 获取ECharts对象
var myChart = echarts.init(document.getElementById('chart'), 'macarons');
// 设置饼图的参数
option = {
title : {
text: '饼图示例',
subtext: '数据仅供参考',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y : 'bottom',
data:[]
},
series : [
{
name: '数据来源',
type: 'pie',
radius : '55%',
center: ['50%', '50%'],
data:[],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 将ajax返回的数据设置到饼图中
option.series[0].data = data.data; // data为ajax返回的数据
// 将Ajax返回的分类数据设置到饼图的legend中
option.legend.data = data.category; // category为ajax返回的分类数据
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
// 获取ECharts对象
var myChart = echarts.init(document.getElementById('chart'), 'macarons');
// 设置柱形图的参数
option = {
title: {
text: '柱形图示例',
subtext: '数据仅供参考',
x: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:[]
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: [],
axisLabel:{
interval:0,
rotate:-45
}
},
yAxis: {
type: 'value'
},
series: [{
data: [],
type: 'bar'
}]
};
// 将ajax返回的数据设置到柱形图中
option.xAxis.data = data.category; // category为ajax返回的分类数据
option.series[0].data = data.data; // data为ajax返回的数据
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
以下是两个示例,一个是从本地data.json文件动态获取数据并赋值到饼图中,另一个是从远程服务器获取数据并赋值到柱形图中。
// 获取ECharts对象
var myChart = echarts.init(document.getElementById('chart'), 'macarons');
// 通过ajax获取数据
$.ajax({
url: 'data.json', // data.json为本地文件路径
dataType: 'json',
success: function (data) {
// 设置饼图的参数
option = {
title : {
text: '饼图示例',
subtext: '数据仅供参考',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y : 'bottom',
data:[]
},
series : [
{
name: '数据来源',
type: 'pie',
radius : '55%',
center: ['50%', '50%'],
data:[],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 将ajax返回的数据设置到饼图中
option.series[0].data = data.data; // data为ajax返回的数据
// 将Ajax返回的分类数据设置到饼图的legend中
option.legend.data = data.category; // category为ajax返回的分类数据
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
}
});
// 获取ECharts对象
var myChart = echarts.init(document.getElementById('chart'), 'macarons');
// 通过ajax获取数据
$.ajax({
url: 'http://example.com/data.json', // data.json为远程文件路径
dataType: 'json',
success: function (data) {
// 设置柱形图的参数
option = {
title: {
text: '柱形图示例',
subtext: '数据仅供参考',
x: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:[]
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: [],
axisLabel:{
interval:0,
rotate:-45
}
},
yAxis: {
type: 'value'
},
series: [{
data: [],
type: 'bar'
}]
};
// 将ajax返回的数据设置到柱形图中
option.xAxis.data = data.category; // category为ajax返回的分类数据
option.series[0].data = data.data; // data为ajax返回的数据
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
}
});
以上就是使用ajax动态赋值echarts的实例攻略,希望能对你有所帮助!
本文链接:http://task.lmcjl.com/news/8115.html