Echarts — 可视化练习（line04 ---- 堆叠面积图）

处事的最高境界是宽容，朋友的最高境界是包容，做人的最高境界是尊容，心态的最高境界是从容，真诚的问候不整容~

Flask

# -*- coding: utf-8
#  @Time    : 2020/11/17 20:17
#  @Author  : ZYX
#  @File    : line04_堆叠面积图.py
# @software: PyCharm
from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemyapp = Flask(__name__)class Config(object):SQLALCHEMY_DATABASE_URI = "mysql+pymysql://root:123456@127.0.0.1:3306/visiable"SQLALCHEMY_TRACK_MODIFICATIONS = Trueapp.config.from_object(Config)
db = SQLAlchemy(app)class sheets(db.Model):__tablename__ = "line04"id = db.Column(db.Integer, autoincrement=True, primary_key=True)day = db.Column(db.String(64), unique=True)value1 = db.Column(db.Integer)value2 = db.Column(db.Integer)value3 = db.Column(db.Integer)value4 = db.Column(db.Integer)value5 = db.Column(db.Integer)@app.route('/')
def index():sheets_list = sheets.query.all()return render_template("line04.html", sheets=sheets_list)if __name__ == '__main__':db.drop_all()db.create_all()l1 = sheets(day="周一", value1=120, value2=220, value3=150, value4=320, value5=820)l2 = sheets(day="周二", value1=132, value2=182, value3=232, value4=332, value5=932)l3 = sheets(day="周三", value1=101, value2=191, value3=201, value4=301, value5=902)l4 = sheets(day="周四", value1=134, value2=234, value3=154, value4=334, value5=934)l5 = sheets(day="周五", value1=90, value2=290, value3=190, value4=390, value5=1290)l6 = sheets(day="周六", value1=230, value2=330, value3=330, value4=330, value5=1330)l7 = sheets(day="周日", value1=210, value2=310, value3=410, value4=320, value5=1320)l = [l1,l2,l3,l4,l5,l6,l7]db.session.add_all(l)db.session.commit()app.run(debug=True)

返回顶部

HTML

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body style="height: 100%">
<div style="height: 100%" id="container"></div>
<script type="text/javascript" src="../../static/echarts%20(1).js"></script>
<script type="text/javascript">var dom = document.getElementById("container");var myecharts = echarts.init(dom);// 获取数据var data1 = [{% for item in sheets %}'{{ item.day }}',{% endfor %}];var data2 = [{% for item in sheets %}{{ item.value1 }}, {% endfor %}];var data3 = [{% for item in sheets %}{{ item.value2 }}, {% endfor %}];var data4 = [{% for item in sheets %}{{ item.value3 }}, {% endfor %}];var data5 = [{% for item in sheets %}{{ item.value4 }}, {% endfor %}];var data6 = [{% for item in sheets %}{{ item.value5 }}, {% endfor %}];// 配置var option = null;option = {title: {text: "堆叠区域图"},legend: {show: true,},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}},},grid: {top: '5%',left: '4%',right: '4%',bottom: '5%',containLabel: true},xAxis: {type: 'category',data: data1,boundaryGap: false},yAxis: {type: 'value'},series: [{name: '邮件营销',type: 'line',data: data2,stack: '总量',areaStyle: {}}, {name: '联盟广告',type: 'line',data: data3,stack: '总量',areaStyle: {}}, {name: '视频广告',type: 'line',data: data4,stack: '总量',areaStyle: {}}, {name: '直接访问',type: 'line',data: data5,stack: '总量',areaStyle: {}}, {name: '搜索引擎',type: 'line',data: data6,stack: '总量',   // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加label: {        // 设置显示图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等normal: {show: true,position: 'top'}},areaStyle: {}}]};if (option && typeof option == 'object') {myecharts.setOption(option);}
</script>
</body>
</html>

返回顶部

效果展示

多设置了一个标签显示

返回顶部

知识点小归纳

stack数据堆叠、label标签显示

{name: '搜索引擎',type: 'line',data: data6,stack: '总量',   // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加label: {        // 设置显示图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等normal: {show: true,position: 'top'}},

官方文档：

返回顶部

Echarts --- 可视化练习（line04 ---- 堆叠面积图）相关推荐

数字孪生|可视化图表之堆叠面积图
上一篇文章为大家介绍了分组条形图的相关内容,本文介绍的是堆叠面积图. 堆叠面积图是一种特殊的面积图,可以用来比较在一个区间内的多个变量.堆叠面积图和普通的面积图基本一样,唯一的区别就是堆叠面积图每个数 ...
数据可视化 pyecharts实现堆叠面积图
那啥-zufe的同学如果是mxw老师的数据可视化的课就不要抄这个交作业了
三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》
注:本系列教程需要对应 JavaScript .html.css 基础,否则将会导致阅读时困难,本教程将会从 ECharts 的官方示例出发,详解每一个示例实现,从中学习 ECharts . ECha ...
Python使用matplotlib可视化时间序列堆叠的面积图、堆叠面积图给出了多个时间序列的贡献程度的可视化表示，以便于相互比较（Stacked Area Chart）
Python使用matplotlib可视化时间序列堆叠的面积图.堆叠面积图给出了多个时间序列的贡献程度的可视化表示,以便于相互比较(Stacked Area Chart) 目录
一、数据可视化之堆叠面积图 - Stacked Area Graph
堆叠面积图适合观察几个数据系列随时间的变化情况,既能看到各数据系列的走势,又能看到整体的规模,即,只适用于研究整体的演化和各个群体的相对比例,而不适用于研究每个个体群体的演化.同时,过多的系列,也会 ...
R统计绘图 | 物种组成堆叠面积图(绝对/相对丰度，ggalluvial)
一.数据准备数据使用的不同处理土壤样品的微生物组成数据,包含物种丰度,分类单元和样本分组数据.此数据为虚构,可用于练习,请不要作他用. # 1.1 设置工作路径 #knitr::opts_knit$ ...
什么是堆叠面积图？如何解读？
简介在之前的文章中提到过,面积图(Area Chart)是在折线图的基础上,对折线以下区域进行颜色填充,主要是用于在连续间隔或时间跨度上展示数值.而今天我们要说的是堆叠面积图(Stacked Are ...
在线作图|2分钟画一张堆叠面积图
Question 1:什么是堆叠面积图? 堆叠面积图属于面积图的一种,显示每个数值所占大小随时间或类别变化的趋势线,可强调某个类别交于系列轴上的数值的趋势线.每一个变量的起点不同,依次在前一个变量的数 ...
R语言绘制堆叠面积图
areaplot包绘制堆叠面积图 library(areaplot) #数据 df <- longley x <- df$Year y <- df[, c(1, 2, 3, 4, 6 ...

Echarts --- 可视化练习（line04 ---- 堆叠面积图）

文章目录

Echarts — 可视化练习（line04 ---- 堆叠面积图）

Flask

HTML

效果展示

知识点小归纳

Echarts --- 可视化练习（line04 ---- 堆叠面积图）相关推荐

最新文章

热门文章