Skip to content

梁建民 / activity

Go to a project
Commit 0293dc04 by liangjianmin
Options

css

parent fe7b43f9
Expand all
Inline Side-by-side
Showing with 213 additions and 185 deletions
images/vis/i1.png
images/vis/i1.png

17.1 KB | W: | H:

images/vis/i1.png

46.8 KB | W: | H:

images/vis/i1.png
images/vis/i1.png
images/vis/i1.png
images/vis/i1.png
  • 2-up
  • Swipe
  • Onion skin
images/vis/i2.png
images/vis/i2.png

38.9 KB | W: | H:

images/vis/i2.png

3.52 KB | W: | H:

images/vis/i2.png
images/vis/i2.png
images/vis/i2.png
images/vis/i2.png
  • 2-up
  • Swipe
  • Onion skin
images/vis/i3.png
images/vis/i3.png

23.9 KB | W: | H:

images/vis/i3.png

72.7 KB | W: | H:

images/vis/i3.png
images/vis/i3.png
images/vis/i3.png
images/vis/i3.png
  • 2-up
  • Swipe
  • Onion skin
images/vis/i4.png
images/vis/i4.png

24 KB | W: | H:

images/vis/i4.png

74.8 KB | W: | H:

images/vis/i4.png
images/vis/i4.png
images/vis/i4.png
images/vis/i4.png
  • 2-up
  • Swipe
  • Onion skin
vis.html
...@@ -36,25 +36,25 @@ ...@@ -36,25 +36,25 @@
<div class="data-left"> <div class="data-left">
<div class="box1 boxsiz mb"> <div class="box1 boxsiz mb">
<p class="tit row rowCenter verCenter">日均访问量PV (2016-2021)</p> <p class="tit row rowCenter verCenter">日均访问量PV (2016-2021)</p>
<div class="bar boxsiz" id="daily_pv" style="width:100%;height: 4rem;"></div> <div class="bar boxsiz" id="daily_pv" style="width: 480px; height: 255px;"></div>
</div> </div>
<div class="box2 boxsiz mb"> <div class="box2 boxsiz mb">
<p class="tit row rowCenter verCenter">日均活跃用户 (2016-2021)</p> <p class="tit row rowCenter verCenter">日均活跃用户 (2016-2021)</p>
<div class="bar boxsiz" id="daily_active_users" style="width:100%;height: 4rem;"></div> <div class="bar boxsiz" id="daily_active_users" style="width: 480px;height:255px;"></div>
</div> </div>
<div class="box3 boxsiz"> <div class="box3 boxsiz">
<p class="tit row rowCenter verCenter">客户分布应用领域</p> <p class="tit row rowCenter verCenter">客户分布应用领域</p>
<div class="bar boxsiz" id="customer_application" style="width:90%;height: 7.5rem;"></div> <div class="boxsiz" id="customer_application" style="height: 314px;"></div>
</div> </div>
</div> </div>
<div class="data-right"> <div class="data-right">
<div class="box1 boxsiz mb"> <div class="box1 boxsiz mb">
<p class="tit row rowCenter verCenter">日均下单用户 (2016-2021)</p> <p class="tit row rowCenter verCenter">日均下单用户 (2016-2021)</p>
<div class="bar boxsiz" id="daily_order_users" style="width:100%;height: 4rem;"></div> <div class="bar boxsiz" id="daily_order_users" style="width: 480px;height: 255px;"></div>
</div> </div>
<div class="box2 boxsiz"> <div class="box2 boxsiz">
<p class="tit row rowCenter verCenter">日均订单数 (2016-2021)</p> <p class="tit row rowCenter verCenter">日均订单数 (2016-2021)</p>
<div class="bar boxsiz" id="daily_order" style="width:100%;height: 4rem;"></div> <div class="bar boxsiz" id="daily_order" style="width: 480px;height: 255px;"></div>
</div> </div>
<div class="box3 boxsiz"> <div class="box3 boxsiz">
<p class="t1">运营中公众号：</p> <p class="t1">运营中公众号：</p>
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
<script type="text/javascript"> <script type="text/javascript">
var charts = { var charts = {
date: "", date: "",
api: window.location.host == "btv.ichunt.com" ? "https://api.ichunt.com" : "http://api.liexin.com", api: window.location.host == "btv.ichunt.com" ? "https://api.ichunt.com" : "https://api.ichunt.com",
init: function () { init: function () {
charts.date(); charts.date();
charts.getData(); charts.getData();
...@@ -157,9 +157,16 @@ ...@@ -157,9 +157,16 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xAxis, data: xAxis,
axisLine:{ axisLabel: {
lineStyle:{ interval: 0,
color:'#25a9ab' textStyle: {
color: "#25a9ab",
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: '#25a9ab'
} }
} }
}, },
...@@ -170,23 +177,33 @@ ...@@ -170,23 +177,33 @@
series: [{ series: [{
data: series, data: series,
type: 'bar', type: 'bar',
barWidth: 25,
itemStyle: { itemStyle: {
normal: { normal: {
color: '#25a9ab' color: '#25a9ab'
} }
}, },
}] }]
}; }
;
myChart.setOption(option); myChart.setOption(option);
} else if (type == 2) { } else if (type == 2
) {
let myChart = echarts.init(document.getElementById('daily_active_users')); let myChart = echarts.init(document.getElementById('daily_active_users'));
let option = { let option = {
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xAxis, data: xAxis,
axisLine:{ axisLabel: {
lineStyle:{ interval: 0,
color:'#de6e6a' textStyle: {
color: "#de6e6a",
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: '#de6e6a'
} }
} }
}, },
...@@ -197,6 +214,7 @@ ...@@ -197,6 +214,7 @@
series: [{ series: [{
data: series, data: series,
type: 'bar', type: 'bar',
barWidth: 25,
itemStyle: { itemStyle: {
normal: { normal: {
color: '#de6e6a' color: '#de6e6a'
...@@ -211,9 +229,16 @@ ...@@ -211,9 +229,16 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xAxis, data: xAxis,
axisLine:{ axisLabel: {
lineStyle:{ interval: 0,
color:'#5da6f1' textStyle: {
color: "#5da6f1",
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: '#5da6f1'
} }
} }
}, },
...@@ -224,6 +249,7 @@ ...@@ -224,6 +249,7 @@
series: [{ series: [{
data: series, data: series,
type: 'bar', type: 'bar',
barWidth: 25,
itemStyle: { itemStyle: {
normal: { normal: {
color: '#5da6f1' color: '#5da6f1'
...@@ -238,9 +264,16 @@ ...@@ -238,9 +264,16 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xAxis, data: xAxis,
axisLine:{ axisLabel: {
lineStyle:{ interval: 0,
color:'#d7a545' textStyle: {
color: "#d7a545",
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: '#d7a545'
} }
} }
}, },
...@@ -251,6 +284,7 @@ ...@@ -251,6 +284,7 @@
series: [{ series: [{
data: series, data: series,
type: 'bar', type: 'bar',
barWidth: 25,
itemStyle: { itemStyle: {
normal: { normal: {
color: '#d7a545' color: '#d7a545'
...@@ -266,10 +300,9 @@ ...@@ -266,10 +300,9 @@
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
bottom: '40', bottom: 'left',
textStyle: { textStyle: {
color: "#96bcf6", color: "#96bcf6"
fontSize:20
} }
}, },
series: [ series: [
...@@ -389,7 +422,8 @@ ...@@ -389,7 +422,8 @@
} }
}); });
}, }
,
date: function () { date: function () {
var day1 = new Date(); var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
...@@ -432,7 +466,8 @@ ...@@ -432,7 +466,8 @@
} }
$("#time").html(h + ":" + m + ":" + s); $("#time").html(h + ":" + m + ":" + s);
}, 1000) }, 1000)
}, }
,
} }
charts.init() charts.init()
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment