Echarts多图表动态更新示例

前端框架(html、echarts、jquery)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>echarts多图表动态更新示例</title><script src="jquery.min.js"></script><script type="text/javascript" src="echarts.min.js"></script></head><body><div id="mainPie" style="width: 600px;height:400px;"></div><div id="mainBar" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var pieChart = echarts.init(document.getElementById('mainPie'));var barChart = echarts.init(document.getElementById('mainBar'));// 指定图表的配置项和数据var pieOption = {title: {text: '某电商平台销售数据分析',subtext: '饼图',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{type: 'pie',radius: '50%',data: [],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};var barOption = {title: {text: '某电商平台销售数据分析',subtext: '柱形图',left: 'center'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: []},yAxis: {type: 'value'},series: [{type: 'bar',data: []}]};// 使用刚指定的配置项和数据显示图表。pieChart.setOption(pieOption);barChart.setOption(barOption);// 异步加载数据function fetchData() {$.ajax({url: 'api/echarts/pie/', // 替换成你的饼图数据接口type: 'GET',dataType: 'json',success: function(pieData) {// 填入数据pieChart.setOption({series: [{// 根据名字对应到相应的系列name: 'Access Source',data: pieData}]});}});$.ajax({url: 'api/echarts/bar/', // 替换成你的柱状图数据接口type: 'GET',dataType: 'json',success: function(barData) {// 填入数据barChart.setOption({xAxis: {data: barData.categories},series: [{// 根据名字对应到相应的系列name: 'Sales',data: barData.values}]});}});}// 每隔一段时间刷新数据setInterval(fetchData, 5000); // 5000毫秒，即5秒钟</script></body>
</html>

后端框架(django)

from django.http import HttpResponse
import json#饼图
def EchartsPie(request):data = []names = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]values = [50, 20, 36, 10, 10, 20]for i in range(len(names)):res = {}res['name'] = names[i]res['value'] = values[i]data.append(res)return HttpResponse(json.dumps(data), content_type="application/json")#柱状图
def EchartsBar(request):data = {}categories = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]values = [50, 20, 36, 10, 10, 20]data['categories'] = categoriesdata['values'] = valuesreturn HttpResponse(json.dumps(data), content_type="application/json")

效果展示：