<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="./jquery-3.4.1.js"></script>
<!-- 引入 echarts.js -->
<script src="incubator-echarts-master/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 此处可以异步获得后端传过来的数据之后,进行渲染到ECharts中
$.get('127.0.0.1:8000/clothes').done(function (data) {
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
</script>
</body>
</html>
官网实例
另一种写法:先填空值,请求之后再填充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="./jquery-3.4.1.js"></script>
<!-- 引入 echarts.js -->
<script src="incubator-echarts-master/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
// 异步加载数据
$.get('http://127.0.0.1:8000/clothes/').done(function (data) {
// alert(data.series_type)
console.log(data.series_data)
// 填入数据
myChart.setOption({
xAxis: {
data: data.xAxis
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.series_data
}]
});
});
</script>
</body>
</html>
以上写法有可能前端接收到data数据后,取数据中的数据会是undefind,有如下两种修改方式
第一种方案:前端修改代码,ajax不使用这种简写的方式
不使用ajax简写方式的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="./jquery-3.4.1.js"></script>
<!-- 引入 echarts.js -->
<script src="incubator-echarts-master/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
url: 'http://127.0.0.1:8000/clothes/',
type: 'GET',
dataType: 'json',
// data:{'code':300268}
})
.done(function(data) {
console.log(data)
myChart.setOption({
title: {
// text: '异步数据加载示例'
text: data.title_text
},
tooltip: {},
legend: {
// data:['销量']
data: data.legend_data
},
xAxis: {
// data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
data: data.xAxis
},
yAxis: {},
series: [{
// name: '销量',
// type: 'bar',
// data: [5, 20, 36, 10, 10, 20]
name: data.series_name,
type: data.series_type,
data: data.series_data
}]
});
})
.fail(function() {
alert('服务器超时,请重试!');
});
</script>
</body>
</html>
第二种方案:后端修改
后端我是用的django,在向前端返回数据的时候,这样返回:
修改之前的返回方式
return HttpResponse(json.dumps(data))
也有可能你使用的是这种返回
return JsonResponse(data)
尽量使用如下HttpResponse这种返回形式,因为JsonResponse在返回中文的时候有可能乱码
修改之后的返回方式:
return HttpResponse(json.dumps(data, ensure_ascii=False), content_type="application/json,charset=utf-8")