3D地球图示例
<template>
<div ref="chartCom" id="chartCom" class="earthmap"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import 'echarts-gl';
import { nextTick, onMounted, ref, watch, computed } from 'vue';
import { useStore } from 'vuex'
const store = useStore()
const emit = defineEmits(['loadingTrue', 'loadingFalse'])
import imgUrl from '../image/map2.jpg'
import imgUrl1 from '../image/mapBg.png'
import iconUrl from '../image/yellow.png'
import iconUrl1 from '../image/red.png'
import { ElMessageBox, ElMessage } from 'element-plus';
import { geocoordmap } from '../utils/nameMap.js'
import {
selectAtlas,//地图数据
} from '@/web/apis/Analysisplatform/index.js'
const Iscollapse = computed(() => {
return store.state.layout.collapse
})
// console.log(Iscollapse, "=========")
const chartCom = ref()
let myChart, chartDom, option;
const initChart = (cityData) => {
let geocoordmapObj = geocoordmap()
const cities = []
for (let key in geocoordmapObj) {
cityData.forEach(item => {
if (key === item.countryName) {
cities.push([item.countryName, geocoordmapObj[key]])
}
})
}
chartDom = document.getElementById('chartCom');
myChart = echarts.init(chartDom);
option = {
backgroundColor: 'transparent',
globe: {
// top: '-20%',
// globeRadius: 'auto',
baseTexture: imgUrl,
// heightTexture: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data-gl/asset/bathymetry_bw_composite_4k.jpg',
displacementScale: 0.1,
shading: 'color',
atmosphere: {
show: true
},
// // environment: imgUrl1,
// realisticMaterial: {
// roughness: 1,
// metalness: 1
// },
// postEffect: {
// enable: true,
// SSAO: {
// enable: true,
// radius: 2
// }
// },
// light: {
// ambient: {
// intensity: 0.5
// },
// main: {
// // 主光源的颜色
// color: '#fff', // 光照颜色
// intensity: 0.5, // 光照强度
// shadow: true, // 是否显示阴影
// alpha: 0, // 主光源绕 x 轴，即上下旋转的角度
// beta: 0 //主光源绕 y 轴，即左右旋转的角度。
// },
// // 全局的环境光设置。
// ambient: {
// // /环境光的强度
// intensity: 0.5
// },
// },
viewControl: {
autoRotate: false,
targetCoord: [106.46, 20.92], // 定位到北京
maxDistance: 166,
minDistance: 166
// maxDistance: 200,
// minDistance: 200
},
},
series: []
};
// cities = [
// ['缅甸', [96.077119, 19.763943]],
// ['中国', [116.407394, 39.904211]],
// ["泰国", [100.451117, 13.724061]],
// ["老挝", [102.632451, 17.975794]],
// ["柬埔寨", [104.891769, 11.545102]],
// ["", [67.97622, 50.757498],]
// ];
cities.push(['中国', [116.407394, 39.904211]])
cities.forEach((item) => {
option.series.push({
name: item[0],
type: 'scatter3D',
coordinateSystem: 'globe',
// symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
symbolSize: 0,
label: {
show: true,
position: "top",
distance: -20,
// formatter: " ",
formatter(params) {
return " ";
},
textStyle: {
color: "#fff",
fongSize: 20,
padding: [20, 15],
backgroundColor: {
image: item[0] === '中国' ? iconUrl1 : iconUrl,
},
},
},
encode: {
value: 5,
},
emphasis: {
label: {
show: true,
textStyle: {
backgroundColor: {
image: item[0] === '中国' ? iconUrl1 : iconUrl,
},
},
},
},
data: [{
name: item[0],
value: [item[1][0], item[1][1], 0]
}]
});
option.series.push({
name: item[0],
type: 'scatter3D',
coordinateSystem: 'globe',
// symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
symbolSize: 0,
label: {
show: true,
position: "right",
distance: -20,
formatter: "{b}",
textStyle: {
color: '#fff',
borderWidth: 0,
// borderColor: '#fff',
fontFamily: 'sans-serif',
fontSize: 18,
fontWeight: 700,
},
// textStyle: {
// color: "#fff",
// fontSize: 16,
// fontWeight: "700",
// // padding: [20, 0],
// backgroundColor: {
// // image: iconUrl,
// color: 'rgba(255,255,255,1)',
// },
// },
},
data: [{
name: item[0],
value: [item[1][0], item[1][1], 0]
}]
});
option.series.push({
name: item[0],
type: 'lines3D',
coordinateSystem: 'globe',
// symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
effect: {
show: true,
trailWidth: 10
},
blendMode: "lighter",
lineStyle: {
width: 3,
// color: 'red',
opacity: 1
},
data: [
[[item[1][0], item[1][1], 0], [116.407394, 39.904211]]
]
});
});
option && myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize()
});
}
const getList = () => {
emit('loadingTrue')
selectAtlas().then(res => {
emit('loadingFalse')
if (res.code === 10001) {
nextTick(() => {
initChart(res.data)
})
} else {
ElMessage({
type: 'error',
message: res.msg
});
}
})
}
watch(() => Iscollapse.value, (n, o) => {
nextTick(() => {
myChart.resize()
})
})
onMounted(() => {
getList()
// nextTick(() => {
// initChart()
// })
})
</script>
<style lang="less" scoped>
.earthmap {
height: 100%;
width: 100%;
// border: 1px solid red;
// background: url("../image/mapBg.png") no-repeat center center;
// background-size: contain;
}
</style>
立体柱状图示例
<template>
<div id="jjtjqk" class="pieChart"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { nextTick, onMounted, watch, computed } from 'vue';
import { useStore } from 'vuex'
import { ElMessageBox, ElMessage } from 'element-plus';
const store = useStore()
import {
selectInCountry,//入境国家统计情况
} from '@/web/apis/Analysisplatform/index.js'
const emit = defineEmits(['loadingTrue', 'loadingFalse'])
const Iscollapse = computed(() => {
return store.state.layout.collapse
})
//获取进境国家统计情况数据
const getselectInCountry = () => {
var yData = [], xData = []
emit('loadingTrue')
selectInCountry().then(res => {
emit('loadingFalse')
if (res.code === 10001) {
res.data.forEach(item => {
yData.push(item.countNo)
xData.push(item.countryName)
});
nextTick(() => {
chartInit(yData, xData)
})
} else {
ElMessage({
type: 'error',
message: res.msg
});
}
})
}
var chartDom, myChart;
const chartInit = (yData, xData) => {
chartDom = document.getElementById('jjtjqk');
myChart = echarts.init(chartDom);
var option;
//组织数据
let setData = function (data, constData, showData) {
data.filter(function (item) {
if (item) {
constData.push(1);
showData.push(item);
} else {
constData.push(0);
showData.push({
value: 1,
itemStyle: {
normal: {
borderColor: 'rgba(0,0,0,0)',
borderWidth: 2,
color: 'rgba(0,0,0,0)'
}
}
});
}
});
};
//组织颜色
let setColor = function (colorArr) {
let color = {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
/* 此处决定阴暗面 若为横向柱状图则x,y轴调换
x: 0,
x2: 0,
y: 0,
y2: 1, */
colorStops: [
{
offset: 0,
color: colorArr[0]
},
{
offset: 0.5,
color: colorArr[0]
},
{
offset: 0.5,
color: colorArr[1]
},
{
offset: 1,
color: colorArr[1]
}
]
};
return color;
};
let vehicle = yData;
var barWidth = 30;
var constData1 = [];
var showData1 = [];
setData(vehicle, constData1, showData1);
var colorArr1 = ['#345A8B', '#387ABD', '#51C0DB'];
var colorArr2 = ['#51C0DB', '#42D9D6', '#45F5F1'];
var color1 = setColor(colorArr1);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
show: false
},
grid: {
top: '15%',
bottom: '15%'
},
xAxis: {
type: 'category',
axisLabel: {
color: '#FFFFFF'
},
axisLine: {
show: true,
lineStyle: {
color: '#1B3F66'
}
},
axisTick: {
show: false
},
data: xData
// data: ['老挝', '越南', '柬埔寨', '泰国', '缅甸']
},
yAxis: {
type: 'value',
axisLabel: {
color: '#FFFFFF'
},
axisLine: {
show: true,
lineStyle: {
color: '#1B3F66'
}
},
splitLine: {
lineStyle: {
color: '#1B3F66'
}
}
},
series: [
{
z: 1,
type: 'bar',
name: '进境国家统计情况',
barGap: '-100%',
barWidth: barWidth,
itemStyle: {
color: (params) => {
if ((params.dataIndex + 1) % 2 == 0) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0.6, color: '#51C0DB' },
{ offset: 0, color: 'rgba(0, 20, 61, 0)' },
])
} else {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0.6, color: '#0062B3' },
{ offset: 0, color: 'rgba(0, 20, 61, 0)' },
])
}
}
},
data: vehicle //Y轴上的高度
},
// ---------------------------------------------
{
z: 2,
name: '柱子1',
type: 'pictorialBar',
symbolPosition: 'start',
data: vehicle, //此数据对应底部组件
symbol: 'diamond', //底部组件形状，不写默认为椭圆
// symbolOffset: [-barWidth / 2, '50%'], //与柱子的偏移角度
symbolSize: [barWidth, (10 * (barWidth - 4)) / barWidth],
itemStyle: {
normal: {
color: color1 //底面左右颜色（深，浅）
}
},
tooltip: {
show: false
}
},
{
z: 2,
name: '柱子top',
type: 'pictorialBar',
symbolPosition: 'end',
data: vehicle, //此数据对应顶部组件
symbol: 'diamond',
symbolOffset: [0, '-50%'],
symbolSize: [barWidth, (10 * (barWidth - 4)) / barWidth],
itemStyle: {
normal: {
color: (params) => {
return (params.dataIndex + 1) % 2 == 0 ? colorArr2[2] : colorArr1[1]
}
}
},
tooltip: {
show: false
}
},
{
z: 4,
type: 'pictorialBar',
name: '柱子Line',
symbolPosition: 'center',
symbolSize: [1, '93%'], //底面[宽，高]
itemStyle: {
borderRadius: [0, 0, 0, 0], //柱子四周圆角
color: (params) => new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{ offset: 0, color: 'rgba(0, 20, 61, 0.5)' },
{ offset: 0.5, color: 'rgba(0, 131, 235, 0.8)' },
])
},
data: vehicle, //Y轴上的高度
tooltip: {
show: false
}
},
]
};
option && myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize()
});
}
watch(() => Iscollapse.value, (n, o) => {
nextTick(() => {
myChart.resize()
})
})
onMounted(() => {
getselectInCountry()
})
// defineExpose({
// chartInit
// })
</script>
<style lang="less" scoped>
.pieChart {
height: 100%;
width: 100%;
// border: 1px solid rgb(255, 0, 0);
}
</style>
立体饼状图示例
<template>
<div class="earthmap">
<div ref="chartCom3d" id="chartCom3d" class="PieCom"></div>
<div class="rightText">
<div class="rightText-item">
<span class="lable">总数</span>
<span class="valueNum">{{state.totleValue.countNo}}</span>
<span class="dw">头</span>
</div>
<div class="rightText-item" v-for="item,i in state.seriesData" :key="i">
<span class="lable" :title="item.name">{{item.name}}</span>
<span class="valueNum" :title="item.value">{{item.value}}</span>
<span class="dw">头</span>
</div>
</div>
</div>
</template>
<script setup>
import * as echarts from 'echarts';
import 'echarts-gl';
import { nextTick, onMounted, ref, watch, computed, reactive } from 'vue';
import { useStore } from 'vuex'
const store = useStore()
import {
selectInAnimalCount,//入境动物统计情况
} from '@/web/apis/Analysisplatform/index.js'
import { ElMessageBox, ElMessage } from 'element-plus';
const emit = defineEmits(['loadingTrue', 'loadingFalse'])
const Iscollapse = computed(() => {
return store.state.layout.collapse
})
const fontSize = (res) => {
const clientWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
if (!clientWidth) return;
const fontSize = 40 * (clientWidth / 1920);
return res * fontSize;
}
const chartCom3d = ref()
let myChart, chartDom;
const initChart = (data) => {
if (data.length == 0) return;
chartDom = document.getElementById('chartCom3d');
myChart = echarts.init(chartDom);
let maxvalue = Math.max.apply(data, data.map(item => item.value))
let colors = [
"rgba(16, 155, 229, 0.5)",
"RGBA(209, 228, 74, 0.5)",
"RGBA(183, 49, 81,0.5)",
"RGBA(44, 231,255,0.5)",
];
//写一个方法来计算环形的高度
const getPie3D = (pieData, internalDiameterRatio) => {
//internalDiameterRatio:透明的空心占比
let series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let k = 1 - internalDiameterRatio;
pieData.sort((a, b) => {
return b.value - a.value
})
pieData.forEach((item, i) => {
sumValue += item.value;
let seriesItem = {
name: typeof pieData[i].name === "undefined"
? `series${i}`
: pieData[i].name,
type: "surface",
parametric: true,
wireframe: {
show: false,
},
pieData: item,
pieStatus: {
selected: false,
hovered: false,
k: k,
},
radius: "20%",
center: ["10%", "20%"],
};
if (typeof colors[i] != "undefined") {
let itemStyle = {};
typeof colors[i] != "undefined"
? (itemStyle.color = colors[i])
: null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
})
series.forEach((item, i) => {
endValue = startValue + item.pieData.value;
item.pieData.startRatio = startValue / sumValue;
item.pieData.endRatio = endValue / sumValue;
item.parametricEquation = getParametricEquation(item.pieData.startRatio, item.pieData.endRatio, false,
false,
k,
item.pieData.value);
startValue = endValue;
})
let boxHeight = getHeight3D(series, 15); //通过传参设定3d饼/环的高度，26代表26px
// 准备待返回的配置项，把准备好的 legendData、series 传入。
let option = {
labelLine: {
show: true,
lineStyle: {
color: "#7BC0CB",
},
},
legend: {
show: false,
},
label: {
show: false,
formatter: "",
},
tooltip: {
show: true,
formatter: (params) => {
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
let bfb = (
(option.series[params.seriesIndex].pieData.endRatio -
option.series[params.seriesIndex].pieData.startRatio) *
100
).toFixed(2);
return (
`${params.seriesName}<br/>` +
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
`${bfb}%` + `<span style="display:inline-block;margin-left:20px;">数量：${option.series[params.seriesIndex].pieData.value}</span> `
);
}
},
position: function (point) { // 自定义 tooltip 的显示位置
return {
left: point[0], // 水平方向的偏移
top: point[1] // 垂直方向的偏移
};
}
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false,
boxHeight: boxHeight,
// boxHeight: maxvalue > 999 ? (maxvalue > 9999 ? maxvalue * 0.0000001 : maxvalue * 0.00001) : (maxvalue < 100 ? (maxvalue < 10 ? maxvalue * -2 : maxvalue * 0.05) : maxvalue * 0.001), //圆环的高度 根据数据来算
// left: -fontSize(1.8),
// top: -fontSize(1.12), //3d饼图的位置
viewControl: {
//3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 25, //角度
distance: 220, //调整视角到主体的距离，类似调整zoom
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: false, //自动旋转
},
},
series: series,
}
return option;
}
const getHeight3D = (series, height) => {
series.sort((a, b) => {
//给series的值从大到小排序
return (b.pieData.value - a.pieData.value);
})
//动态计算 图形高度 series[0].pieData.value是最大的值
return (height * 25 / series[0].pieData.value) > 10 ? 20 : (height * 25 / series[0].pieData.value)
}
const getParametricEquation = (
startRatio,
endRatio,
isSelected,
isHovered,
k,
h
) => {
// 计算
let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== "undefined" ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32,
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
x: function (u, v) {
if (u < startRadian) {
return (
offsetX +
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetX +
Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function (u, v) {
if (u < startRadian) {
return (
offsetY +
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetY +
Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function (u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u) * h * 0.1;
}
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
}
let option = getPie3D(data, 0.8);
option.series.push({
name: "pie2d",
type: "pie",
labelLine: {
show: false,
length: 15,
length2: 15,
},
startAngle: -fontSize(0.3), //起始角度，支持范围[0, 360]。
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: [fontSize(1.3) + "%", fontSize(1.4) + "%"],
center: [fontSize(1.5) + "%", fontSize(1.8) + "%"], //指示线的位置
data: data,
itemStyle: {
opacity: 0,
},
});
option && myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize()
});
}
const state = reactive({
totleValue: {},
seriesData: [
// {
// name: "印度尼西亚",
// value: 100,
// },
// {
// name: "越南",
// value: 10,
// },
// {
// name: "柬埔寨",
// value: 10,
// },
// {
// name: "泰国",
// value: 5,
// },
]
})
const getList = () => {
emit('loadingTrue')
selectInAnimalCount().then(res => {
emit('loadingFalse')
if (res.code === 10001) {
let seriesData = [],
allValue = {};//总数的数据
res.data.forEach(item => {
if (item.countryName === '总数') {
allValue = item
} else {
seriesData.push({
name: item.countryName,
value: item.countNo
})
}
})
state.seriesData = seriesData
state.totleValue = allValue
nextTick(() => {
initChart(state.seriesData)
})
} else {
ElMessage({
type: 'error',
message: res.msg
});
}
})
}
watch(() => Iscollapse.value, (n, o) => {
nextTick(() => {
myChart.resize()
})
})
onMounted(() => {
getList()
})
</script>
<style lang="less" scoped>
.earthmap {
height: 100%;
width: 100%;
overflow: hidden;
// border: 1px solid red;
display: flex;
justify-content: center;
.PieCom {
height: 100%;
width: 50%;
// border: 1px solid red;
background: url("../image/9.png") no-repeat bottom center;
background-size: contain;
}
.rightText {
height: 100%;
width: 50%;
padding-top: 8%;
padding-left: 5%;
.rightText-item {
color: #fff;
height: 18%;
display: flex;
align-items: center;
// border: 1px solid red;
&:nth-child(2) {
// border: 1px solid red;
.valueNum {
background: linear-gradient(
0deg,
#f6f594 0%,
#ffffff 80%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&:nth-child(3) {
// border: 1px solid red;
.valueNum {
background: linear-gradient(
0deg,
#97fdff 0%,
#ffffff 80%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&:nth-child(4) {
// border: 1px solid red;
.valueNum {
background: linear-gradient(
0deg,
#ffdede 0%,
#ffffff 80%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&:nth-child(5) {
// border: 1px solid red;
.valueNum {
background: linear-gradient(
0deg,
#8dc0ef 0%,
#ffffff 80%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.lable {
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #ffffff;
width: 60px;
// border: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.valueNum {
margin-left: 10px;
font-family: pmzd;
font-weight: 600;
font-size: 24px;
letter-spacing: 2px;
// margin-left: 10%;
max-width: calc(100% - 70px);
// border: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
.dw {
font-family: PingFang SC;
font-weight: 500;
font-size: 12px;
color: #ffffff;
line-height: 40px;
opacity: 0.5;
margin-left: 10%;
}
}
}
}
</style>
