测试修改
This commit is contained in:
hh
parent
91404f1b58
commit
c77b299bc0
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -1,8 +1,99 @@
|
|||
<template>
|
||||
<div>
|
||||
测试文件1
|
||||
<div style="padding: 10px;">
|
||||
<a-card>
|
||||
<template #header>
|
||||
<div style="font-size: 25px;">
|
||||
天气分析系统
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="center">
|
||||
<div id="chart1" style="width: 600px; height: 400px;"></div>
|
||||
<div id="chart2" style="width: 600px; height: 400px;"></div>
|
||||
</div>
|
||||
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const chart1 = echarts.init(document.getElementById('chart1'))
|
||||
const chart2 = echarts.init(document.getElementById('chart2'))
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '年销售数据'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['销量']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2012', '2013', '2014', '2015']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [5016, 16870, 23440, 3152]
|
||||
}
|
||||
]
|
||||
}
|
||||
const data = [["2013-06-05", 116], ["2013-06-06", 129], ["2013-06-07", 135], ["2013-06-08", 86], ["2013-06-09", 73], ["2013-06-10", 85], ["2013-06-11", 73], ["2013-06-12", 68], ["2013-06-13", 92], ["2013-06-14", 130], ["2013-06-15", 245], ["2013-06-16", 139], ["2013-06-17", 115], ["2013-06-18", 111], ["2013-06-19", 309], ["2013-06-20", 206], ["2013-06-21", 137], ["2013-06-22", 128], ["2013-06-23", 85], ["2013-06-24", 94], ["2013-06-25", 71], ["2013-06-26", 106], ["2013-06-27", 84], ["2013-06-28", 93], ["2013-06-29", 85], ["2013-06-30", 73], ["2013-07-01", 83], ["2013-07-02", 125], ["2013-07-03", 107], ["2013-07-04", 82], ["2013-07-05", 44], ["2013-07-06", 72], ["2013-07-07", 106], ["2013-07-08", 107], ["2013-07-09", 66], ["2013-07-10", 91], ["2013-07-11", 92], ["2013-07-12", 113], ["2013-07-13", 107], ["2013-07-14", 131], ["2013-07-15", 111], ["2013-07-16", 64], ["2013-07-17", 69], ["2013-07-18", 88], ["2013-07-19", 77], ["2013-07-20", 83], ["2013-07-21", 111], ["2013-07-22", 57], ["2013-07-23", 55], ["2013-07-24", 60]];
|
||||
const dateList = data.map(function (item) {
|
||||
return item[0];
|
||||
});
|
||||
const valueList = data.map(function (item) {
|
||||
return item[1];
|
||||
});
|
||||
const option2 = {
|
||||
title: {
|
||||
text: '月份销量数据'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dateList
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: valueList,
|
||||
type: 'line'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart1.setOption(option)
|
||||
chart2.setOption(option2)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.center {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,120 @@
|
|||
<template>
|
||||
<div>
|
||||
测试文件2
|
||||
<div style="padding: 10px;">
|
||||
<a-card>
|
||||
<template #header>
|
||||
<div style="font-size: 25px;">
|
||||
天气分析系统
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="center">
|
||||
<div id="chart1" style="width: 600px; height: 400px;"></div>
|
||||
<div id="chart2" style="width: 600px; height: 400px;"></div>
|
||||
</div>
|
||||
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const chart1 = echarts.init(document.getElementById('chart1'))
|
||||
const chart2 = echarts.init(document.getElementById('chart2'))
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '常见回购物品',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{ value: 1048, name: '饮食' },
|
||||
{ value: 735, name: '医疗用品' },
|
||||
{ value: 580, name: '衣物' },
|
||||
{ value: 484, name: '电子用品' },
|
||||
{ value: 300, name: '书籍' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const option2 = {
|
||||
title: {
|
||||
text: '回购次数',
|
||||
left: 'center'
|
||||
},
|
||||
xAxis: {},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
symbolSize: 20,
|
||||
data: [
|
||||
[10.0, 8.04],
|
||||
[8.07, 6.95],
|
||||
[13.0, 7.58],
|
||||
[9.05, 8.81],
|
||||
[11.0, 8.33],
|
||||
[14.0, 7.66],
|
||||
[13.4, 6.81],
|
||||
[10.0, 6.33],
|
||||
[14.0, 8.96],
|
||||
[12.5, 6.82],
|
||||
[9.15, 7.2],
|
||||
[11.5, 7.2],
|
||||
[3.03, 4.23],
|
||||
[12.2, 7.83],
|
||||
[2.02, 4.47],
|
||||
[1.05, 3.33],
|
||||
[4.05, 4.96],
|
||||
[6.03, 7.24],
|
||||
[12.0, 6.26],
|
||||
[12.0, 8.84],
|
||||
[7.08, 5.82],
|
||||
[5.02, 5.68]
|
||||
],
|
||||
type: 'scatter'
|
||||
}
|
||||
]
|
||||
};
|
||||
chart1.setOption(option)
|
||||
chart2.setOption(option2)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.center {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,78 @@
|
|||
<template>
|
||||
<div>
|
||||
测试文件3
|
||||
<div style="padding: 10px;">
|
||||
<a-card>
|
||||
<template #header>
|
||||
<div style="font-size: 25px;">
|
||||
天气分析系统
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="center">
|
||||
<img style="width: 512px;height: 440px;margin-left: 40px;margin-top: 20px;" src="@/assets/logo.png">
|
||||
<div style="width: 450px;margin-left: 40px;margin-top: 100px;font-size: 25px;">
|
||||
<div style="font-size: 30px;margin-left: 40px;margin-bottom: 15px;">基于Spark的母婴品牌数据可视化分析系统设计</div>
|
||||
<div> 本项目旨在设计一套基于Spark的母婴品牌数据可视化分析系统，
|
||||
通过对“淘宝母婴购物”数据集的深入分析，提供直观、全面的数据洞察，
|
||||
辅助品牌做出更加精准的市场判断和策略规划。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
<!-- <div id="chart" style="width: 600px; height: 400px;"></div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
mounted() {
|
||||
// this.initChart()
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const chart = echarts.init(document.getElementById('chart'))
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '图表测试'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['销量']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.center {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,47 +1,34 @@
|
|||
<template>
|
||||
<div id="chart" style="width: 600px; height: 400px;"></div>
|
||||
<div style="padding: 10px;">
|
||||
<a-card>
|
||||
<template #header>
|
||||
<div style="font-size: 25px;">
|
||||
天气分析系统
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="center">
|
||||
<img style="width: 512px;height: 440px;margin-left: 40px;margin-top: 20px;" src="@/assets/logo.png">
|
||||
<div style="width: 450px;margin-left: 40px;margin-top: 100px;font-size: 25px;">
|
||||
<div style="font-size: 30px;margin-left: 40px;margin-bottom: 15px;">基于Spark的母婴品牌数据可视化分析系统设计</div>
|
||||
<div> 本项目旨在设计一套基于Spark的母婴品牌数据可视化分析系统，
|
||||
通过对“淘宝母婴购物”数据集的深入分析，提供直观、全面的数据洞察，
|
||||
辅助品牌做出更加精准的市场判断和策略规划。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- <div id="chart" style="width: 600px; height: 400px;"></div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const chart = echarts.init(document.getElementById('chart'))
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '图表测试'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['销量']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
}
|
||||
<style lang="less" scoped>
|
||||
.card {
|
||||
padding: 10px;
|
||||
}
|
||||
</script>
|
||||
|
||||
.center {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue