布置网站
首先，找到合适的html模板包，将模板包里的文件复制进pycharm里面，本文把asset文件夹复制在static目录下，把需要用到的html模板复制到templates目录下。
搭建Flask框架
from flask import Flask,render_template
import pymysql
from sqlalchemy import create_engine
app = Flask(__name__)
# 第一个网页
@app.route('/')
def test():
sales = []
con = create_engine('mysql+pymysql://root:1356130369@localhost:3306/test', encoding='utf8')
sql = "select 售价 from lips "
result = con.execute(sql)
result = result.fetchall()
for item in result:
sales.append(item[0])
sales=sorted(sales)[:-19]
number=[]
con = create_engine('mysql+pymysql://root:1356130369@localhost:3306/test', encoding='utf8')
sql = "select 付款人数 from lips "
result = con.execute(sql)
result = result.fetchall()
for item in result:
number.append(item[0])
number = sorted(number)[247:-38]
return render_template('chart-js.html',number=number,sales=sales)
#第二个网页
@app.route('/index')
def testtwo():
group = []
number = []
con = create_engine('mysql+pymysql://root:1356130369@localhost:3306/test', encoding='utf8')
sql = "select 价格组别,付款人数 from jgfz "
result = con.execute(sql)
result = result.fetchall()
for item in result:
group.append(item[0])
number.append(item[1])
sales=[]
number1=[]
con = create_engine('mysql+pymysql://root:1356130369@localhost:3306/test', encoding='utf8')
sql = "select 售价,付款人数 from lips "
result = con.execute(sql)
result = result.fetchall()
for item in result:
sales.append(item[0])
number1.append(item[1])
return render_template('index.html',group=group, number=number,number1=number1,sales=sales)
#第三个网页
@app.route('/indextwo')
def testthree():
xiaoliang = []
gaopinci = []
con = create_engine('mysql+pymysql://root:1356130369@localhost:3306/test', encoding='utf8')
sql = "select xiaoliang,gaopinci from gpcxlqk "
result = con.execute(sql)
result = result.fetchall()
for item in result:
xiaoliang.append(item[0])
gaopinci.append(item[1])
renliang=[i*5 for i in [15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]]
alldata=[]
for i in range(15):
list = []
list.append(renliang[i])
list.append(xiaoliang[i])
list.append(gaopinci[i])
alldata.append(list)
return render_template('index1.html',alldata=alldata,renliang=renliang,xiaoliang=xiaoliang,gaopinci=gaopinci)
#第四个网页
@app.route('/indexthree')
def testfour():
areas = []
number = []
con = create_engine('mysql+pymysql://root:1356130369@localhost:3306/test', encoding='utf8')
sql = "select 商家地址,付款人数 from areas "
result = con.execute(sql)
result = result.fetchall()
for item in result:
areas.append(item[0])
number.append(item[1])
nareas = []
for item in areas:
if item == '黑龙':
item = item + '江'
nareas.append(item)
else:
nareas.append(item)
nnareas = []
for item in nareas:
if item == '新西':
item = item + '兰'
nnareas.append(item)
else:
nnareas.append(item)
areas=[]
number1 = []
con = create_engine('mysql+pymysql://root:1356130369@localhost:3306/test', encoding='utf8')
sql = "select 商家地址,付款人数 as 数量 from areas_amount "
result = con.execute(sql)
result = result.fetchall()
for item in result:
areas.append(item[0])
number1.append(item[1])
nareas=[]
for item in areas:
if item =='黑龙':
item=item+'江'
nareas.append(item)
else:
nareas.append(item)
nnareas1 = []
for item in nareas:
if item == '新西':
item = item + '兰'
nnareas1.append(item)
else:
nnareas1.append(item)
return render_template("index2.html", nnareas=nnareas, number=number,nnareas1=nnareas1,number1=number1)
if __name__ == '__main__':
app.run()书写第一个网页，在chart-js.html文件的基础上修改html编码
<!DOCTYPE html>
<html lang="en">
<!-- 引入 echarts.js -->
<script src="../static/echarts.min.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../static/assets/images/favicon.png" type="image/png">
<title></title>
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="../static/../static/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
<!-- END PAGE LEVEL STYLES -->
<link href="../static/assets/css/icons.css" rel="stylesheet">
<link href="../static/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/assets/css/style.css" rel="stylesheet">
<link href="../static/assets/css/responsive.css" rel="stylesheet">
</head>
<body class="sticky-header">
<!--Start left side Menu-->
<div class="left-side sticky-left-side">
<!--logo-->
<div class="logo">
<a href="/"><img src="../static/assets/images/logo.png" alt=""></a>
</div>
<div class="logo-icon text-center">
<a href="/"><img src="../static/assets/images/logo-icon.png" alt=""></a>
</div>
<!--logo-->
<div class="left-side-inner">
<!--Sidebar nav-->
<ul class="nav nav-pills nav-stacked custom-nav">
<li ><a href="/index"><i class="icon-home"></i> <span>价格与销量的关系</span></a>
</li>
<li ><a href="/indextwo"><i class="icon-layers"></i> <span>标题词频与销量的关系</span></a>
</li>
<li ><a href="/indexthree"><i class="icon-grid"></i> <span>关于地区的分析</span></a>
</li>
</ul>
<!--End sidebar nav-->
</div>
</div>
<!--End left side menu-->
<!-- main content start-->
<div class="main-content" >
<!-- header section start-->
<div class="header-section">
<a class="toggle-btn"><i class="fa fa-bars"></i></a>
</div>
<!-- header section end-->
<!--body wrapper start-->
<div class="wrapper">
<!--Start Page Title-->
<div class="page-title-box">
<h4 class="page-title">口红价格与销量基本情况</h4>
<div class="clearfix"></div>
</div>
<!--End Page Title-->
<!-- Start row-->
<div class="row">
<div class="col-md-6">
<div class="white-box">
<h2 class="header-title">价格直方分布图</h2>
<div id="container" style="width: 80%;height:300px"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var girth = {{ sales }};
// See https://github.com/ecomfe/echarts-stat
var bins = ecStat.histogram(girth);
var interval;
var min = Infinity;
var max = -Infinity;
var data = echarts.util.map(bins.data, function(item, index) {
var x0 = bins.bins[index].x0;
var x1 = bins.bins[index].x1;
interval = x1 - x0;
min = Math.min(min, x0);
max = Math.max(max, x1);
return [x0, x1, item[1]];
});
function renderItem(params, api) {
var yValue = api.value(2);
var start = api.coord([api.value(0), yValue]);
var size = api.size([api.value(1) - api.value(0), yValue]);
var style = api.style();
return {
type: "rect",
shape: {
x: start[0] + 1,
y: start[1],
width: size[0] - 2,
height: size[1]
},
style: style
};
}
option = {
color: "#905a3d",
grid: {
top: "8%",
left: "3%",
right: "3%",
bottom: "20%",
containLabel: true
},
xAxis: [
{
type: "value",
splitLine: { show:true },
/*改变y轴颜色*/
axisLine: {
lineStyle: {
color: "#000000",
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
//字体颜色
show: false,
textStyle: {
color: "#d48265"
}
},
min: min,
max: max,
interval: interval
}
],
yAxis: [
{
type: "value",
splitLine: { show: false },
/*改变y轴颜色*/
axisLine: {
lineStyle: {
color: "#000000",
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
//字体颜色
show: true,
textStyle: {
color: "#d48265"
}
}
}
],
tooltip: {
trigger: "item",
formatter: function(parms) {
//
var str =
"价格分布统计" +
"</br>" +
"价格区间：" +
"" +
parms.data[0] +
"~" +
parms.data[1] +
"元" +
"</br>" +
parms.data[0] +
"~" +
parms.data[1] +
":" +
parms.data[2] +
"种" +
"</br>";
return str;
}
},
series: [
{
name: "height",
type: "custom",
renderItem: renderItem,
// label: {
// normal: {
// show: true,
// position: "insideTop"
// }
// },
encode: {
x: [0, 1],
y: 2,
tooltip: 2,
label: 2
},
data: data
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</div>
</div><!-- /col-md-6-->
<div class="col-md-6">
<div class="white-box">
<h2 class="header-title">销售直方分布图</h2>
<div id="main" style="width: 80%;height:300px"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var app = {};
option = null;
var girth = {{ number }};
// See https://github.com/ecomfe/echarts-stat
var bins = ecStat.histogram(girth);
var interval;
var min = Infinity;
var max = -Infinity;
var data = echarts.util.map(bins.data, function(item, index) {
var x0 = bins.bins[index].x0;
var x1 = bins.bins[index].x1;
interval = x1 - x0;
min = Math.min(min, x0);
max = Math.max(max, x1);
return [x0, x1, item[1]];
});
function renderItem(params, api) {
var yValue = api.value(2);
var start = api.coord([api.value(0), yValue]);
var size = api.size([api.value(1) - api.value(0), yValue]);
var style = api.style();
return {
type: "rect",
shape: {
x: start[0] + 1,
y: start[1],
width: size[0] - 2,
height: size[1]
},
style: style
};
}
option = {
color: "#f05b72",
grid: {
top: "8%",
left: "3%",
right: "3%",
bottom: "20%",
containLabel: true
},
xAxis: [
{
type: "value",
splitLine: { show:true },
/*改变y轴颜色*/
axisLine: {
lineStyle: {
color: "#000000",
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
//字体颜色
show: false,
textStyle: {
color: "#d48265"
}
},
min: min,
max: max,
interval: interval
}
],
yAxis: [
{
type: "value",
splitLine: { show: false },
/*改变y轴颜色*/
axisLine: {
lineStyle: {
color: "#000000",
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
//字体颜色
show: true,
textStyle: {
color: "#d48265"
}
}
}
],
tooltip: {
trigger: "item",
formatter: function(parms) {
//
var str =
"付款人数分布统计" +
"</br>" +
"付款人数区间：" +
"" +
parms.data[0] +
"~" +
parms.data[1] +
"人" +
"</br>" +
parms.data[0] +
"~" +
parms.data[1] +
":" +
parms.data[2] +
"种" +
"</br>";
return str;
}
},
series: [
{
name: "height",
type: "custom",
renderItem: renderItem,
// label: {
// normal: {
// show: true,
// position: "insideTop"
// }
// },
encode: {
x: [0, 1],
y: 2,
tooltip: 2,
label: 2
},
data: data
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</div>
</div>
</div>
<!-- End row-->
</div>
<!-- End Wrapper-->
<!--Start Footer -->
<footer class="footer-main">Copyright © 2018.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">网页模板</a></footer>
<!--End footer -->
</div>
<!--End main content -->
<!--Begin core plugin -->
<script src="../static/assets/js/jquery.min.js"></script>
<script src="../static/assets/js/bootstrap.min.js"></script>
<script src="../static/assets/plugins/moment/moment.js"></script>
<script src="../static/assets/js/jquery.slimscroll.js "></script>
<script src="../static/assets/js/jquery.nicescroll.js"></script>
<script src="../static/assets/js/functions.js"></script>
<!-- End core plugin -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../static/assets/plugins/chart-js/Chart.js"></script>
<script src="../static/assets/pages/chartjs-custom.js"></script>
<!-- BEGIN PAGE LEVEL SCRIPTS -->
</body>
</html>书写第二个网页，在dashboard1.html文件的基础上修改html编码，并重命名为index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../static/assets/images/favicon.png" type="image/png">
<title>Home</title>
<!--Begin Page Level CSS -->
<link href="../static/assets/plugins/morris-chart/morris.css" rel="stylesheet">
<link href="../static/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
<!--End Page Level CSS -->
<link href="../static/assets/css/icons.css" rel="stylesheet">
<link href="../static/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/assets/css/style.css" rel="stylesheet">
<link href="../static/assets/css/responsive.css" rel="stylesheet">
<!-- 引入 echarts.js -->
<script src="../static/echarts.min.js"></script>
</head>
<body class="sticky-header">
<!--Start left side Menu-->
<div class="left-side sticky-left-side">
<!--logo-->
<div class="logo">
<a href="/"><img src="../static/assets/images/logo.png" alt=""></a>
</div>
<div class="logo-icon text-center">
<a href="/"><img src="../static/assets/images/logo-icon.png" alt=""></a>
</div>
<!--logo-->
<div class="left-side-inner">
<!--Sidebar nav-->
<ul class="nav nav-pills nav-stacked custom-nav">
<li ><a href="/index"><i class="icon-home"></i> <span>价格与销量的关系</span></a>
</li>
<li ><a href="/indextwo"><i class="icon-layers"></i> <span>标题词频与销量的关系</span></a>
</li>
<li ><a href="/indexthree"><i class="icon-grid"></i> <span>关于地区的分析</span></a>
</li>
</ul>
<!--End sidebar nav-->
</div>
</div>
<!--End left side menu-->
<!-- main content start-->
<div class="main-content" >
<!-- header section start-->
<div class="header-section">
<a class="toggle-btn"><i class="fa fa-bars"></i></a>
</div>
<!-- header section end-->
<!--body wrapper start-->
<div class="wrapper">
<!--Start Page Title-->
<div class="page-title-box">
<h4 class="page-title">价格与销量的关系</h4>
<div class="clearfix"></div>
</div>
<!--End Page Title-->
<!--Start row-->
<div class="row">
<div class="container">
<div class="analytics-box">
</div>
</div>
</div>
<!--End row-->
<!--Start row-->
<div class="row">
<div class="col-md-6">
<div class="white-box">
<h2 class="header-title">直方图</h2>
<div id="main" style="width: 80%;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [ {% for i in range(12) %}
'{{ group[i] }}',
{% endfor %}],
axisTick: {
alignWithLabel: true
},
axisLabel: {//坐标轴刻度标签的相关设置。
interval: 0,
rotate: "45"
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '付款人数',
type: 'bar',
barWidth: '60%',
data: {{ number }}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
</div>
<div class="col-md-6">
<div class="white-box">
<h2 class="header-title">散点图 </h2>
<div id="container" style="width: 515px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));
// 指定图表的配置项和数据
var option = {
tooltip: {
/*返回需要的信息*/
formatter: function (param) {
var value = param.value;
return "价格:"+value[0]+','+"付款人数:"+value[1];
}
},
xAxis: {},
yAxis: {
},
series: [{
name: 'scatter',
type: 'scatter',
emphasis: {
label: {
show: true,
position: 'right',
color: 'blue',
fontSize: 10
}
},
data: [
{% for i in range(1000) %}
[{{ sales[i] }},{{ number1[i] }}],
{% endfor %}
],
type: 'scatter'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
</div><!-- /col-md-6-->
</div>
<!--End row-->
<!--Start row-->
<div class="row">
<!-- Start inbox widget-->
<div class="col-md-4">
<div class="white-box">
<h2 class="header-title">TOP5 价格段位</h2>
<div class="inbox-widget inbox-scroll-list">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>序号</th>
<th>价格段位</th>
<th >平均付款人数</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>(59,75]</td>
<td>2923</td>
</tr>
<tr>
<td>2</td>
<td>(3.899,39.9]</td>
<td>1852</td>
</tr>
<tr>
<td>3</td>
<td>(39.9,59]</td>
<td>1655</td>
</tr>
<tr>
<td>4</td>
<td>(103,128]</td>
<td>837</td>
</tr>
<tr>
<td>5</td>
<td>(89,103]</td>
<td>814</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- End inbox widget-->
<!-- Start inbox widget-->
<div class="col-md-4">
<div class="white-box">
<h2 class="header-title">放张好看的图片</h2>
<div class="inbox-widget inbox-scroll-list">
</div>
</div>
</div>
<!-- End inbox widget-->
<!-- Start inbox widget-->
<div class="col-md-4">
<div class="white-box">
<h2 class="header-title">TOP5价格</h2>
<div class="inbox-widget inbox-scroll-list">
<table class="table table-hover">
<thead>
<tr>
<th>序号</th>
<th>价格</th>
<th >平均付款人数</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>59.9</td>
<td>250000</td>
</tr>
<tr>
<td>2</td>
<td>69</td>
<td>100000</td>
</tr>
<tr>
<td>3</td>
<td>49.9</td>
<td>90000</td>
</tr>
<tr>
<td>4</td>
<td>119</td>
<td>60000</td>
</tr>
<tr>
<td>5</td>
<td>59.9/310</td>
<td>45000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- End inbox widget-->
</div>
<!--End row-->
</div>
<!-- End Wrapper-->
<!--Start Footer -->
<footer class="footer-main">Copyright © 2018.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">网页模板</a></footer>
<!--End footer -->
</div>
<!--End main content -->
<!--Begin core plugin -->
<script src="../static/assets/js/jquery.min.js"></script>
<script src="../static/assets/js/bootstrap.min.js"></script>
<script src="../static/assets/plugins/moment/moment.js"></script>
<script src="../static/assets/js/jquery.slimscroll.js "></script>
<script src="../static/assets/js/jquery.nicescroll.js"></script>
<script src="../static/assets/js/functions.js"></script>
<!-- End core plugin -->
<!--Begin Page Level Plugin-->
<script src="../static/assets/plugins/morris-chart/morris.js"></script>
<script src="../static/assets/plugins/morris-chart/raphael-min.js"></script>
<script src="../static/assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="../static/assets/pages/dashboard.js"></script>
<!--End Page Level Plugin-->
</body>
</html>书写第三个网页，在dashboard1.html文件的基础上修改html编码，并重命名为index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../static/assets/images/favicon.png" type="image/png">
<title>Home</title>
<!--Begin Page Level CSS -->
<link href="../static/assets/plugins/morris-chart/morris.css" rel="stylesheet">
<link href="../static/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
<!--End Page Level CSS -->
<link href="../static/assets/css/icons.css" rel="stylesheet">
<link href="../static/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/assets/css/style.css" rel="stylesheet">
<link href="../static/assets/css/responsive.css" rel="stylesheet">
<!-- 引入 echarts.js -->
<script src="../static/echarts.min.js"></script>
</head>
<body class="sticky-header">
<!--Start left side Menu-->
<div class="left-side sticky-left-side">
<!--logo-->
<div class="logo">
<a href="/"><img src="../static/assets/images/logo.png" alt=""></a>
</div>
<div class="logo-icon text-center">
<a href="/"><img src="../static/assets/images/logo-icon.png" alt=""></a>
</div>
<!--logo-->
<div class="left-side-inner">
<!--Sidebar nav-->
<ul class="nav nav-pills nav-stacked custom-nav">
<li ><a href="/index"><i class="icon-home"></i> <span>价格与销量的关系</span></a>
</li>
<li ><a href="/indextwo"><i class="icon-layers"></i> <span>标题词频与销量的关系</span></a>
</li>
<li ><a href="/indexthree"><i class="icon-grid"></i> <span>关于地区的分析</span></a>
</li>
</ul>
<!--End sidebar nav-->
</div>
</div>
<!--End left side menu-->
<!-- main content start-->
<div class="main-content" >
<!-- header section start-->
<div class="header-section">
<a class="toggle-btn"><i class="fa fa-bars"></i></a>
</div>
<!-- header section end-->
<!--body wrapper start-->
<div class="wrapper">
<!--Start Page Title-->
<div class="page-title-box">
<h4 class="page-title">标题词频与销量</h4>
<div class="clearfix"></div>
</div>
<!--End Page Title-->
<!--Start row-->
<div class="row">
<div class="container">
<div class="analytics-box">
</div>
</div>
</div>
<!--End row-->
<!--Start row-->
<div class="row">
<div class="col-md-6">
<img src="../static/word.jpg" class="img-fluid" alt="" style="width: 100%;height:450px;">
</div>
<div class="col-md-6">
<div class="white-box">
<h2 class="header-title">Sales Analytics</h2>
<div id="main" style="width: 100%;height:370px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
dataset: {
source:[
['score', 'amount', 'product'],
{% for i in range(15) %}
[{{ renliang[i] }},{{ xiaoliang[i] }},'{{ gaopinci[i]}}'],
{% endfor %}
]
},
grid: {containLabel: true},
xAxis: {name: 'amount'},
yAxis: {type: 'category'},
visualMap: {
orient: 'horizontal',
left: 'center',
min: 10,
max: 100,
text: ['High Score', 'Low Score'],
// Map the score column to color
dimension: 0,
inRange: {
color: ['#d7da8b', '#e15457']
}
},
series: [
{
type: 'bar',
encode: {
// Map the "amount" column to X axis.
x: 'amount',
// Map the "product" column to Y axis
y: 'product'
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
</div>
</div>
</div>
<!--End row-->
<!--Start row-->
<div class="row">
<!--Start info box-->
<div class="col-md-3 col-sm-6">
<div class="info-box-main">
<div class="info-stats">
<p>109,504</p>
<span>唇膏 </span>
</div>
<div class="info-icon text-primary ">
<i class="mdi mdi-cart"></i>
</div>
<div class="info-box-progress">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
</div>
</div>
</div>
</div>
</div>
<!--End info box-->
<!--Start info box-->
<div class="col-md-3 col-sm-6">
<div class="info-box-main">
<div class="info-stats">
<p>79,001</p>
<span>哑光</span>
</div>
<div class="info-icon text-info">
<i class="mdi mdi-account-multiple"></i>
</div>
<div class="info-box-progress">
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
</div>
</div>
</div>
</div>
</div>
<!--End info box-->
<!--Start info box-->
<div class="col-md-3 col-sm-6">
<div class="info-box-main">
<div class="info-stats">
<p>70,151</p>
<span>釉</span>
</div>
<div class="info-icon text-warning">
<i class="fa fa-dollar"></i>
</div>
<div class="info-box-progress">
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
</div>
</div>
</div>
</div>
</div>
<!--End info box-->
<!--Start info box-->
<div class="col-md-3 col-sm-6">
<div class="info-box-main">
<div class="info-stats">
<p>58,528</p>
<span>正品</span>
</div>
<div class="info-icon text-danger">
<i class="mdi mdi-weight"></i>
</div>
<div class="info-box-progress">
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
</div>
</div>
</div>
</div>
</div>
<!--End info box-->
</div>
<!--End row-->
</div>
<!-- End Wrapper-->
<!--Start Footer -->
<footer class="footer-main">Copyright © 2018.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">网页模板</a></footer>
<!--End footer -->
</div>
<!--End main content -->
<!--Begin core plugin -->
<script src="../static/assets/js/jquery.min.js"></script>
<script src="../static/assets/js/bootstrap.min.js"></script>
<script src="../static/assets/plugins/moment/moment.js"></script>
<script src="../static/assets/js/jquery.slimscroll.js "></script>
<script src="../static/assets/js/jquery.nicescroll.js"></script>
<script src="../static/assets/js/functions.js"></script>
<!-- End core plugin -->
<!--Begin Page Level Plugin-->
<script src="../static/assets/plugins/morris-chart/morris.js"></script>
<script src="../static/assets/plugins/morris-chart/raphael-min.js"></script>
<script src="../static/assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="../static/assets/pages/dashboard.js"></script>
<!--End Page Level Plugin-->
</body>
</html>书写第四个网页，在dashboard1.html文件的基础上修改html编码，并重命名为index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../static/assets/images/favicon.png" type="image/png">
<title>Home</title>
<!--Begin Page Level CSS -->
<link href="../static/assets/plugins/morris-chart/morris.css" rel="stylesheet">
<link href="../static/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
<!--End Page Level CSS -->
<link href="../static/assets/css/icons.css" rel="stylesheet">
<link href="../static/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/assets/css/style.css" rel="stylesheet">
<link href="../static/assets/css/responsive.css" rel="stylesheet">
<!-- 引入 echarts.js -->
<script src="../static/echarts.min.js"></script>
</head>
<body class="sticky-header">
<!--Start left side Menu-->
<div class="left-side sticky-left-side">
<!--logo-->
<div class="logo">
<a href="/"><img src="../static/assets/images/logo.png" alt=""></a>
</div>
<div class="logo-icon text-center">
<a href="/"><img src="../static/assets/images/logo-icon.png" alt=""></a>
</div>
<!--logo-->
<div class="left-side-inner">
<!--Sidebar nav-->
<ul class="nav nav-pills nav-stacked custom-nav">
<li ><a href="/index"><i class="icon-home"></i> <span>价格与销量的关系</span></a>
</li>
<li ><a href="/indextwo"><i class="icon-layers"></i> <span>标题词频与销量的关系</span></a>
</li>
<li ><a href="/indexthree"><i class="icon-grid"></i> <span>关于地区的分析</span></a>
</li>
</ul>
<!--End sidebar nav-->
</div>
</div>
<!--End left side menu-->
<!-- main content start-->
<div class="main-content" >
<!-- header section start-->
<div class="header-section">
<a class="toggle-btn"><i class="fa fa-bars"></i></a>
</div>
<!-- header section end-->
<!--body wrapper start-->
<div class="wrapper">
<!--Start Page Title-->
<div class="page-title-box">
<h4 class="page-title">关于地区的分析</h4>
<div class="clearfix"></div>
</div>
<!--End Page Title-->
<!--Start row-->
<div class="row">
<div class="col-md-6">
<div class="white-box">
<h2 class="header-title">商家分布详情</h2>
<div id="main" style="width: 105%;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [ {% for i in range(30) %}
'{{ nnareas1[i] }}',
{% endfor %}],
axisTick: {
alignWithLabel: true
},
axisLabel: {//坐标轴刻度标签的相关设置。
interval: 0,
rotate: "45"
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '商家数量',
type: 'bar',
barWidth: '60%',
data: {{ number1 }}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
</div>
<div class="col-md-6">
<div class="white-box">
<h2 class="header-title">地区与平均付款人数</h2>
<div id="container" style="width: 105%;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));
// 指定图表的配置项和数据
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [ {% for i in range(30) %}
'{{ nnareas[i] }}',
{% endfor %}],
axisTick: {
alignWithLabel: true
},
axisLabel: {//坐标轴刻度标签的相关设置。
interval: 0,
rotate: "45"
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '付款人数',
type: 'bar',
barWidth: '60%',
data: {{ number }}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
</div><!-- /col-md-6-->
</div>
<!--End row-->
<!--Start row-->
<div class="row">
<!-- Start inbox widget-->
<div class="col-md-4">
<div class="white-box">
<h2 class="header-title">TOP5 地区</h2>
<div class="inbox-widget inbox-scroll-list">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>序号</th>
<th>地区</th>
<th >商家数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>广东</td>
<td>912</td>
</tr>
<tr>
<td>2</td>
<td>上海</td>
<td>755</td>
</tr>
<tr>
<td>3</td>
<td>未知</td>
<td>728</td>
</tr>
<tr>
<td>4</td>
<td>浙江</td>
<td>542</td>
</tr>
<tr>
<td>5</td>
<td>山东</td>
<td>194</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- End inbox widget-->
<!-- Start inbox widget-->
<div class="col-md-4">
<div class="white-box">
<h2 class="header-title">放张好看的图片</h2>
<div class="inbox-widget inbox-scroll-list">
</div>
</div>
</div>
<!-- End inbox widget-->
<!-- Start inbox widget-->
<div class="col-md-4">
<div class="white-box">
<h2 class="header-title">TOP5地区</h2>
<div class="inbox-widget inbox-scroll-list">
<table class="table table-hover">
<thead>
<tr>
<th>序号</th>
<th>地区</th>
<th >平均付款人数</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>河北</td>
<td>4526</td>
</tr>
<tr>
<td>2</td>
<td>江苏</td>
<td>2159</td>
</tr>
<tr>
<td>3</td>
<td>未知</td>
<td>1549</td>
</tr>
<tr>
<td>4</td>
<td>吉林</td>
<td>1699</td>
</tr>
<tr>
<td>5</td>
<td>上海</td>
<td>1168</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- End inbox widget-->
</div>
<!--End row-->
</div>
<!-- End Wrapper-->
<!--Start Footer -->
<footer class="footer-main">Copyright © 2018.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">网页模板</a></footer>
<!--End footer -->
</div>
<!--End main content -->
<!--Begin core plugin -->
<script src="../static/assets/js/jquery.min.js"></script>
<script src="../static/assets/js/bootstrap.min.js"></script>
<script src="../static/assets/plugins/moment/moment.js"></script>
<script src="../static/assets/js/jquery.slimscroll.js "></script>
<script src="../static/assets/js/jquery.nicescroll.js"></script>
<script src="../static/assets/js/functions.js"></script>
<!-- End core plugin -->
<!--Begin Page Level Plugin-->
<script src="../static/assets/plugins/morris-chart/morris.js"></script>
<script src="../static/assets/plugins/morris-chart/raphael-min.js"></script>
<script src="../static/assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="../static/assets/pages/dashboard.js"></script>
<!--End Page Level Plugin-->
</body>
</html>注意该文的图形都是基于前几篇文的echart 图形的基础上！！！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
