Skip to content

Commit be78741

Browse files
CupccCupcc
committed
全部构建完成，但无法加载
1 parent 079311f commit be78741

14 files changed

+1490
-973
lines changed

‎.prettierrc

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2+
"tabWidth": 2,
23
"singleQuote": true
34
}

‎src/assets/css/global.less

+7
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,19 @@ body,
77
margin: 0;
88
overflow: hidden;
99
}
10+
1011
.com-page {
1112
width: 100%;
1213
height: 100%;
1314
overflow: hidden;
1415
}
16+
1517
.com-container {
1618
width: 100%;
1719
height: 100%;
1820
overflow: hidden;
1921
}
22+
2023
.com-chart {
2124
width: 100%;
2225
height: 100%;
@@ -26,3 +29,7 @@ body,
2629
canvas {
2730
border-radius: 20px;
2831
}
32+
33+
.com-container {
34+
position: relative;
35+
}

‎src/components/Hot.vue

+170-146
Original file line numberDiff line numberDiff line change
@@ -13,166 +13,190 @@
1313
</template>
1414

1515
<script>
16+
import { mapState } from 'vuex'
17+
import { getThemeValue } from '@/utils/theme_utils'
1618
export default {
17-
data() {
18-
return {
19-
chartInstance: null,
20-
allData: null,
21-
currentIndex: 0, // 当前所展示出的一级分类数据
22-
titleFontSize: 0
23-
};
24-
},
25-
computed: {
26-
catName() {
27-
if (!this.allData) {
28-
return '';
29-
} else {
30-
return this.allData[this.currentIndex].name;
31-
}
19+
data() {
20+
return {
21+
chartInstance: null,
22+
allData: null,
23+
currentIndex: 0, // 当前所展示出的一级分类数据
24+
titleFontSize: 0
25+
}
3226
},
33-
comStyle() {
34-
return {
35-
fontSize: this.titleFontSize + 'px'
36-
};
37-
}
38-
},
39-
mounted() {
40-
this.initChart();
41-
this.getData();
42-
window.addEventListener('resize', this.screenAdapter);
43-
this.screenAdapter();
44-
},
45-
destroyed() {
46-
window.removeEventListener('resize', this.screenAdapter);
47-
},
48-
methods: {
49-
initChart() {
50-
this.chartInstance = this.$echarts.init(this.$refs.hot_ref, 'chalk');
51-
const initOption = {
52-
title: {
53-
text: '▎ 热销商品的占比',
54-
left: 20,
55-
top: 20
27+
created() {
28+
// 在组件创建完成之后 进行回调函数的注册
29+
this.$socket.registerCallBack('hotData', this.getData)
30+
},
31+
computed: {
32+
catName() {
33+
if (!this.allData) {
34+
return ''
35+
} else {
36+
return this.allData[this.currentIndex].name
37+
}
5638
},
57-
legend: {
58-
top: '15%',
59-
icon: 'circle'
39+
comStyle() {
40+
return {
41+
fontSize: this.titleFontSize + 'px',
42+
color: getThemeValue(this.theme).titleColor
43+
}
6044
},
61-
tooltip: {
62-
show: true,
63-
formatter: arg => {
64-
// console.log(arg)
65-
const thirdCategory = arg.data.children;
66-
// 计算出所有三级分类的数值总和
67-
let total = 0;
68-
thirdCategory.forEach(item => {
69-
total += item.value;
70-
});
71-
let retStr = '';
72-
thirdCategory.forEach(item => {
73-
retStr += `
74-
${item.name}:${parseInt((item.value / total) * 100) + '%'}
45+
...mapState(['theme'])
46+
},
47+
mounted() {
48+
this.initChart()
49+
// this.getData()
50+
this.$socket.send({
51+
action: 'getData',
52+
socketType: 'hotData',
53+
chartName: 'hot',
54+
value: ''
55+
})
56+
window.addEventListener('resize', this.screenAdapter)
57+
this.screenAdapter()
58+
},
59+
destroyed() {
60+
window.removeEventListener('resize', this.screenAdapter)
61+
this.$socket.unRegisterCallBack('hotData')
62+
},
63+
methods: {
64+
initChart() {
65+
this.chartInstance = this.$echarts.init(this.$refs.hot_ref, this.theme)
66+
const initOption = {
67+
title: {
68+
text: '▎ 热销商品的占比',
69+
left: 20,
70+
top: 20
71+
},
72+
legend: {
73+
top: '15%',
74+
icon: 'circle'
75+
},
76+
tooltip: {
77+
show: true,
78+
formatter: arg => {
79+
// console.log(arg)
80+
const thirdCategory = arg.data.children
81+
// 计算出所有三级分类的数值总和
82+
let total = 0
83+
thirdCategory.forEach(item => {
84+
total += item.value
85+
})
86+
let retStr = ''
87+
thirdCategory.forEach(item => {
88+
retStr += `
89+
${item.name}:${parseInt(item.value / total * 100) + '%'}
7590
<br/>
76-
`;
77-
});
78-
return retStr;
79-
}
91+
`
92+
})
93+
return retStr
94+
}
95+
},
96+
series: [
97+
{
98+
type: 'pie',
99+
label: {
100+
show: false
101+
},
102+
emphasis: {
103+
label: {
104+
show: true
105+
},
106+
labelLine: {
107+
show: false
108+
}
109+
}
110+
}
111+
]
112+
}
113+
this.chartInstance.setOption(initOption)
114+
},
115+
getData(ret) {
116+
// 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表
117+
// const { data: ret } = await this.$http.get('hotproduct')
118+
this.allData = ret
119+
console.log(this.allData)
120+
this.updateChart()
80121
},
81-
series: [
82-
{
83-
type: 'pie',
84-
label: {
85-
show: false
86-
},
87-
emphasis: {
88-
label: {
89-
show: true
90-
},
91-
labelLine: {
92-
show: false
93-
}
122+
updateChart() {
123+
// 处理图表需要的数据
124+
const legendData = this.allData[this.currentIndex].children.map(item => {
125+
return item.name
126+
})
127+
const seriesData = this.allData[this.currentIndex].children.map(item => {
128+
return {
129+
name: item.name,
130+
value: item.value,
131+
children: item.children // 新增加children的原因是为了在tooltip中的formatter的回调函数中,来拿到这个二级分类下的三级分类数据
132+
}
133+
})
134+
const dataOption = {
135+
legend: {
136+
data: legendData
137+
},
138+
series: [
139+
{
140+
data: seriesData
141+
}
142+
]
94143
}
95-
}
96-
]
97-
};
98-
this.chartInstance.setOption(initOption);
99-
},
100-
async getData() {
101-
// 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表
102-
const { data: ret } = await this.$http.get('hotproduct');
103-
this.allData = ret;
104-
console.log(this.allData);
105-
this.updateChart();
106-
},
107-
updateChart() {
108-
// 处理图表需要的数据
109-
const legendData = this.allData[this.currentIndex].children.map(item => {
110-
return item.name;
111-
});
112-
const seriesData = this.allData[this.currentIndex].children.map(item => {
113-
return {
114-
name: item.name,
115-
value: item.value,
116-
children: item.children // 新增加children的原因是为了在tooltip中的formatter的回调函数中,来拿到这个二级分类下的三级分类数据
117-
};
118-
});
119-
const dataOption = {
120-
legend: {
121-
data: legendData
144+
this.chartInstance.setOption(dataOption)
122145
},
123-
series: [
124-
{
125-
data: seriesData
126-
}
127-
]
128-
};
129-
this.chartInstance.setOption(dataOption);
130-
},
131-
screenAdapter() {
132-
this.titleFontSize = (this.$refs.hot_ref.offsetWidth / 100) * 3.6;
133-
const adapterOption = {
134-
title: {
135-
textStyle: {
136-
fontSize: this.titleFontSize
137-
}
146+
screenAdapter() {
147+
this.titleFontSize = this.$refs.hot_ref.offsetWidth / 100 * 3.6
148+
const adapterOption = {
149+
title: {
150+
textStyle: {
151+
fontSize: this.titleFontSize
152+
}
153+
},
154+
legend: {
155+
itemWidth: this.titleFontSize,
156+
itemHeight: this.titleFontSize,
157+
itemGap: this.titleFontSize / 2,
158+
textStyle: {
159+
fontSize: this.titleFontSize / 2
160+
}
161+
},
162+
series: [
163+
{
164+
radius: this.titleFontSize * 4.5,
165+
center: ['50%', '60%']
166+
}
167+
]
168+
}
169+
this.chartInstance.setOption(adapterOption)
170+
this.chartInstance.resize()
138171
},
139-
legend: {
140-
itemWidth: this.titleFontSize / 2,
141-
itemHeight: this.titleFontSize / 2,
142-
itemGap: this.titleFontSize / 2,
143-
textStyle: {
144-
fontSize: this.titleFontSize / 2
145-
}
172+
toLeft() {
173+
this.currentIndex--
174+
if (this.currentIndex < 0) {
175+
this.currentIndex = this.allData.length - 1
176+
}
177+
this.updateChart()
146178
},
147-
series: [
148-
{
149-
radius: this.titleFontSize * 4.5,
150-
center: ['50%', '60%']
151-
}
152-
]
153-
};
154-
this.chartInstance.setOption(adapterOption);
155-
this.chartInstance.resize();
156-
},
157-
toLeft() {
158-
this.currentIndex--;
159-
if (this.currentIndex < 0) {
160-
this.currentIndex = this.allData.length - 1;
161-
}
162-
this.updateChart();
179+
toRight() {
180+
this.currentIndex++
181+
if (this.currentIndex > this.allData.length - 1) {
182+
this.currentIndex = 0
183+
}
184+
this.updateChart()
185+
}
163186
},
164-
toRight() {
165-
this.currentIndex++;
166-
if (this.currentIndex > this.allData.length - 1) {
167-
this.currentIndex = 0;
168-
}
169-
this.updateChart();
187+
watch: {
188+
theme() {
189+
console.log('主题切换了')
190+
this.chartInstance.dispose() // 销毁当前的图表
191+
this.initChart() // 重新以最新的主题名称初始化图表对象
192+
this.screenAdapter() // 完成屏幕的适配
193+
this.updateChart() // 更新图表的展示
194+
}
170195
}
171-
}
172-
};
196+
}
173197
</script>
174198

175-
<style lang="less" scoped>
199+
<style lang='less' scoped>
176200
.arr-left {
177201
position: absolute;
178202
left: 10%;

0 commit comments

Comments
 (0)