在ECharts系列中，使用series[i]-themeRiver设置主题河流图，主题河流图是一种特殊的流图，它主要用来表示事件或主题等在一段时间内的变化。
本例是通过各省从1950-2010年的GDP数据，反映我国国民经济的发展。
数据来源之网上，部分数据缺失。
flask后台的数据组装过程，其实就是折线图的翻版
代码语言：javascript复制@app.route('/getjson7', methods=['GET'])
def getjson7():
# 千万不要先将内部的对象序列化成字符串，然后再序列化外边的对象。
# 再复杂的结构都可以表示为一个dict，
# 而之前不需要做任何序列化操作！！！
# 经过多轮测试，提前序列化会导致很多解析问题！！！
sql = "select year,GDP,region from economyinfo"
result= db.session.execute(sql).fetchall()
resultlist=[list(x) for x in result]
# [['1999', 3414.19, '福建省'],
# ['1999', 1853.65, '江西省']]
region = db.session.execute('select distinct region from economyinfo').fetchall()
regionlist = [x['region'] for x in region]
# ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区',
# '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省',
# ...
# '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区']
gdpdata = {}
gdpdata['region'] = regionlist
gdpdata['data'] = resultlist
# gdpdata=
# {
# 'region': ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区'...],
# 'data': [['1999', 3414.19, '福建省'],... ['1999', 1853.65, '江西省']]
# }
response = jsonify(gdpdata)
response.status_code = 200 # or 400 or whatever
return jsonify(gdpdata)
@app.route('/echartdemo7')
def echartdemo7():
return render_template('echartdemo7.html')前台代码，比不定数量折线图更简单一些，直接读取json数据即可
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<!--script src="..staticjsecharts.min.js"></script-->
<script src="/static/js/echarts.min.js"></script>
<script src="/static/js/jquery.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.option = {
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
{
data: [],
type: 'line'
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.showLoading();
$.ajax({
url:'/getjson7',
result:{},
type:'GET',
dataType:'json',
success:function(result){
gdpdata=result.data
var gdpseries = [];
//result=
//{
// 'region': ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区'...],
// 'data': [['1999', 3414.19, '福建省'],... ['1999', 1853.65, '江西省']]
//}
//result.region=['北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省',...]
//result.data=
//[
// ['1999', 3414.19, '福建省'],
// ...
// ['1999', 1853.65, '江西省']
//]
myChart.hideLoading();
// 填入数据
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(0,0,0,0.2)',
width: 1,
type: 'solid'
}
}
},
legend: {
data:result.region
},
singleAxis: {
top: 50,
bottom: 50,
axisTick: {},
axisLabel: {},
type: 'time',
axisPointer: {
animation: true,
label: {
show: true
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
opacity: 0.2
}
}
},
series: [
{
type: 'themeRiver',
emphasis: {
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
},
data:result.data
}
]
})
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
</script>
</body>
</html>
