xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
lnn19986213 2024-04-15 09:43:44 +08:00
parent eba9d53f45
commit e06c7cdd98
7 changed files with 240 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": {
"echarts": "^5.4.2",
"echarts-gl": "^2.0.9",
"echarts-liquidfill": "^3.1.0",
"sass": "^1.60.0",
"vue": "^3.2.47",
"vue-router": "^4.1.6"
@ -263,6 +264,14 @@
"echarts": "^5.1.2"
}
},
"node_modules/echarts-liquidfill": {
"version": "3.1.0",
"resolved": "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz",
"integrity": "sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==",
"peerDependencies": {
"echarts": "^5.0.1"
}
},
"node_modules/esbuild": {
"version": "0.17.14",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.14.tgz",

1
package.json
View File

@ -11,6 +11,7 @@
"dependencies": {
"echarts": "^5.4.2",
"echarts-gl": "^2.0.9",
"echarts-liquidfill": "^3.1.0",
"sass": "^1.60.0",
"vue": "^3.2.47",
"vue-router": "^4.1.6"

BIN
src/assets/bgImg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

219
src/view/echarts/waterBall.vue Normal file
View File

@ -0,0 +1,219 @@
<template>
<div ref="chart" style="width: 50%; height: 160px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";
import "echarts-liquidfill";
const chart = ref(); // 创建DOM引用
const liq = reactive({ //chart数据
value: 0.18,
})
const Pie = () => {
let dataArr = [];
for (var i = 0; i < 150; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 50,
itemStyle: {
normal: {
color: '#00AFFF',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)',
},
},
});
} else {
dataArr.push({
name: (i + 1).toString(),
value: 100,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)',
},
},
});
}
}
return dataArr;
}
let option = {
series: [
{
value: liq.value, // 内容 配合formatter
type: 'liquidFill',
radius: '70%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
center: ['50%', '50%'],
data: [
liq.value,
{
value: liq.value,
direction: 'left', //波浪方向
},
], // data个数代表波浪数
backgroundStyle: {
borderWidth: 1,
color: 'rgba(62, 208, 255, 1)', // 球体本景色
},
amplitude: '6 %', //波浪的振幅
// 修改波浪颜色
// color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: '#6CDEFC',
},
{
offset: 0,
color: '#429BF7',
},
],
globalCoord: false,
},
],
label: {
normal: {
// formatter: 0.87 * 100 + '\n%',
// formatter: 0.6 * 100 + '{d|%}',
formatter: function(params){
return params.value * 100 + "%";
},
rich: {
d: {
fontSize: 20,
},
},
textStyle: {
fontSize: 20,
color: '#fff',
},
},
},
outline: {
show: false,
},
},
{
type: 'pie',
z: 1,
center: ['50%', '50%'],
radius: ['72%', '73.5%'], // 控制外圈圆的粗细
hoverAnimation: false,
data: [
{
name: '',
value: 500,
labelLine: {
show: false,
},
itemStyle: {
color: '#00AFFF',
},
emphasis: {
labelLine: {
show: false,
},
itemStyle: {
color: '#00AFFF',
},
},
},
],
},
{
//外发光
type: 'pie',
z: 1,
zlevel: -1,
radius: ['70%', '90.5%'],
center: ['50%', '50%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
borderWidth: 20,
color: 'rgba(224,242,255,1)',
},
},
label: {
show: false,
},
data: [100],
},
// {
// //底层外发光
// type: 'pie',
// z: 1,
// zlevel: -2,
// radius: ['70%', '100%'],
// center: ['50%', '50%'],
// hoverAnimation: false,
// clockWise: false,
// itemStyle: {
// normal: {
// borderWidth: 20,
// color: 'rgba(224,242,255,.4)',
// },
// },
// label: {
// show: false,
// },
// data: [100],
// },
{
type: 'pie',
zlevel: 0,
silent: true,
radius: ['78%', '80%'],
z: 1,
label: {
normal: {
show: false,
},
},
labelLine: {
normal: {
show: false,
},
},
data: Pie(),
},
],
};
// 使用生命钩子
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入
var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 单图表响应式: 跟随浏览器大小改变
window.addEventListener("resize", () => {
myChart.resize();
});
});
</script>
<style scoped></style>

4
src/view/home.vue
View File

@ -41,7 +41,9 @@ onBeforeMount(() => {
<style scoped lang="scss">
.content {
background-color: rgba(2, 4, 27, 1);
background-image: url("../assets/bgImg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
background-repeat: no-repeat;

2
src/view/yl.vue
View File

@ -75,6 +75,7 @@
<div class="yd_title">
<span class="text">活动数据分析</span>
</div>
<waterBall></waterBall>
<ePie3d></ePie3d>
</div>
<div class="flex1">
@ -222,6 +223,7 @@ import ePie from "./echarts/pie.vue";
import ePie2 from "./echarts/pie2.vue";
import eGraph from "./echarts/graph.vue";
import ePie3d from "./echarts/pie3d.vue";
import waterBall from "./echarts/waterBall.vue";
</script>
<style lang="scss" scoped>

7
yarn.lock
View File

@ -165,7 +165,12 @@ echarts-gl@^2.0.9:
claygl "^1.2.1"
zrender "^5.1.1"
echarts@^5.1.2, echarts@^5.4.2:
echarts-liquidfill@^3.1.0:
version "3.1.0"
resolved "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz"
integrity sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==
echarts@^5.0.1, echarts@^5.1.2, echarts@^5.4.2:
version "5.4.2"
resolved "https://registry.npmjs.org/echarts/-/echarts-5.4.2.tgz"
integrity sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==