mirror of
https://gitee.com/ice-gl/icegl-three-vue-tres.git
synced 2025-04-05 06:22:43 +08:00
增加 表格的样式例子
This commit is contained in:
hawk86104
parent
c90f2b15d3
commit
1d78ccd4d0
@ -46,6 +46,7 @@
|
||||
"compressing": "^1.10.0",
|
||||
"core-js": "3.35.1",
|
||||
"d3-geo": "^3.1.0",
|
||||
"echarts": "^5.5.0",
|
||||
"gl-matrix": "^3.4.3",
|
||||
"gsap": "3.12.5",
|
||||
"heatmap.js-fix": "^1.0.0",
|
||||
|
||||
BIN
public/plugins/UIdemo/preview/echartSample.png
Normal file
BIN
public/plugins/UIdemo/preview/echartSample.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
103
src/plugins/UIdemo/components/echarts/animationChart.vue
Normal file
103
src/plugins/UIdemo/components/echarts/animationChart.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-03-19 16:05:04
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-03-19 19:28:05
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts"
|
||||
import * as THREE from "three"
|
||||
import { createVNode, render } from 'vue'
|
||||
import { useRenderLoop } from '@tresjs/core'
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
for (var i = 0; i < 100; i++) {
|
||||
xAxisData.push('A' + i);
|
||||
data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
|
||||
data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
|
||||
}
|
||||
|
||||
const width = 1024
|
||||
const height = 768
|
||||
const scale = [0.006, 0.006]
|
||||
const chartNode = createVNode('canvas', { width, height, style: {} })
|
||||
render(chartNode, document.createElement('div'))
|
||||
const pieChart = echarts.init(chartNode.el as HTMLCanvasElement, 'dark')
|
||||
const option = {
|
||||
title: {
|
||||
text: 'Bar Animation Delay',
|
||||
padding: 20
|
||||
},
|
||||
legend: {
|
||||
data: ['bar', 'bar2'],
|
||||
padding: 20
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
data: data1,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
animationDelay: function (idx) {
|
||||
return idx * 10;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'bar2',
|
||||
type: 'bar',
|
||||
data: data2,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
animationDelay: function (idx) {
|
||||
return idx * 10 + 100;
|
||||
}
|
||||
}
|
||||
],
|
||||
animationEasing: 'elasticOut',
|
||||
}
|
||||
const chartTexture = new THREE.CanvasTexture(chartNode.el)
|
||||
let isFinished = false
|
||||
|
||||
const resetChart = () => {
|
||||
isFinished = false
|
||||
pieChart.off('finished')
|
||||
|
||||
//可循环动画
|
||||
pieChart.clear()
|
||||
pieChart.on('finished', () => {
|
||||
isFinished = true
|
||||
})
|
||||
pieChart.setOption(option)
|
||||
}
|
||||
resetChart()
|
||||
|
||||
const { onLoop } = useRenderLoop()
|
||||
onLoop(() => {
|
||||
if (!isFinished) {
|
||||
chartTexture.needsUpdate = true
|
||||
} else {
|
||||
resetChart()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TresMesh :scale="[width * scale[0], height * scale[1], 1]">
|
||||
<TresPlaneGeometry :args="[1, 1]" />
|
||||
<TresMeshBasicMaterial transparent :side="THREE.DoubleSide" :map="chartTexture" :depthWrite="false" />
|
||||
</TresMesh>
|
||||
</template>
|
||||
212
src/plugins/UIdemo/components/echarts/debugChart.vue
Normal file
212
src/plugins/UIdemo/components/echarts/debugChart.vue
Normal file
@ -0,0 +1,212 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-03-19 16:35:21
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-03-19 17:12:05
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts"
|
||||
import { createVNode, render, onMounted, ref } from 'vue'
|
||||
|
||||
const cccc = ref<HTMLElement | null>(null)
|
||||
const width = 1024
|
||||
const height = 768
|
||||
const scale = [0.003, 0.002]
|
||||
const chartNode = createVNode('canvas', { width, height, style: {} })
|
||||
|
||||
onMounted(() => {
|
||||
render(chartNode, cccc.value)
|
||||
const pieChart = echarts.init(chartNode.el as HTMLCanvasElement, 'dark')
|
||||
const option = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
text: 'Gradient Stacked Area Chart',
|
||||
padding: 20
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
|
||||
padding: [20, 0]
|
||||
},
|
||||
grid: {
|
||||
left: '30',
|
||||
right: '30',
|
||||
bottom: '30',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Line 1',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250]
|
||||
},
|
||||
{
|
||||
name: 'Line 2',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 282, 111, 234, 220, 340, 310]
|
||||
},
|
||||
{
|
||||
name: 'Line 3',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(55, 162, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(116, 21, 219)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 132, 201, 334, 190, 130, 220]
|
||||
},
|
||||
{
|
||||
name: 'Line 4',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 0, 135)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(135, 0, 157)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 402, 231, 134, 190, 230, 120]
|
||||
},
|
||||
{
|
||||
name: 'Line 5',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 302, 181, 234, 210, 290, 150]
|
||||
}
|
||||
]
|
||||
}
|
||||
pieChart.setOption(option)
|
||||
|
||||
pieChart.on('finished', () => {
|
||||
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="cccc" class="aaaaaa"></div>
|
||||
</template>
|
||||
61
src/plugins/UIdemo/components/echarts/meshChart.vue
Normal file
61
src/plugins/UIdemo/components/echarts/meshChart.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-03-19 16:05:04
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-03-19 18:15:58
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts"
|
||||
import * as THREE from "three"
|
||||
import { createVNode, render } from 'vue'
|
||||
|
||||
const width = 1024
|
||||
const height = 768
|
||||
const scale = [0.006, 0.006]
|
||||
const chartNode = createVNode('canvas', { width, height, style: {} })
|
||||
render(chartNode, document.createElement('div'))
|
||||
const pieChart = echarts.init(chartNode.el as HTMLCanvasElement, 'dark')
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
padding: [0, 0, 30, 0]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Nightingale Chart',
|
||||
type: 'pie',
|
||||
radius: [50, 250],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 8
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: 'rose 1' },
|
||||
{ value: 38, name: 'rose 2' },
|
||||
{ value: 32, name: 'rose 3' },
|
||||
{ value: 30, name: 'rose 4' },
|
||||
{ value: 28, name: 'rose 5' },
|
||||
{ value: 26, name: 'rose 6' },
|
||||
{ value: 22, name: 'rose 7' },
|
||||
{ value: 18, name: 'rose 8' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
pieChart.setOption(option)
|
||||
const chartTexture = new THREE.CanvasTexture(chartNode.el)
|
||||
pieChart.on('finished', () => {
|
||||
chartTexture.needsUpdate = true
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TresMesh :scale="[width * scale[0], height * scale[1], 1]">
|
||||
<TresPlaneGeometry :args="[1, 1]" />
|
||||
<TresMeshBasicMaterial transparent :side="THREE.DoubleSide" :map="chartTexture" :depthWrite="false" />
|
||||
</TresMesh>
|
||||
</template>
|
||||
203
src/plugins/UIdemo/components/echarts/spriteChart.vue
Normal file
203
src/plugins/UIdemo/components/echarts/spriteChart.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts"
|
||||
import * as THREE from "three"
|
||||
import { createVNode, render } from 'vue'
|
||||
|
||||
const width = 1024
|
||||
const height = 768
|
||||
const scale = [0.006, 0.005]
|
||||
const chartNode = createVNode('canvas', { width, height, style: {} })
|
||||
render(chartNode, document.createElement('div'))
|
||||
const pieChart = echarts.init(chartNode.el as HTMLCanvasElement, 'dark')
|
||||
const option = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
text: 'Gradient Stacked Area Chart',
|
||||
padding: 20
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
|
||||
padding: [20, 0]
|
||||
},
|
||||
grid: {
|
||||
left: '30',
|
||||
right: '30',
|
||||
bottom: '30',
|
||||
top: '60',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Line 1',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250]
|
||||
},
|
||||
{
|
||||
name: 'Line 2',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 282, 111, 234, 220, 340, 310]
|
||||
},
|
||||
{
|
||||
name: 'Line 3',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(55, 162, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(116, 21, 219)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 132, 201, 334, 190, 130, 220]
|
||||
},
|
||||
{
|
||||
name: 'Line 4',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 0, 135)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(135, 0, 157)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 402, 231, 134, 190, 230, 120]
|
||||
},
|
||||
{
|
||||
name: 'Line 5',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 302, 181, 234, 210, 290, 150]
|
||||
}
|
||||
]
|
||||
}
|
||||
pieChart.setOption(option)
|
||||
const chartTexture = new THREE.CanvasTexture(chartNode.el)
|
||||
pieChart.on('finished', () => {
|
||||
chartTexture.needsUpdate = true
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TresSprite :scale="[width * scale[0], height * scale[1], 1]">
|
||||
<TresSpriteMaterial transparent :side="THREE.DoubleSide" :map="chartTexture" />
|
||||
</TresSprite>
|
||||
</template>
|
||||
69
src/plugins/UIdemo/components/echarts/useHtmlComChart.vue
Normal file
69
src/plugins/UIdemo/components/echarts/useHtmlComChart.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-03-19 08:37:20
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-03-19 15:00:48
|
||||
-->
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { Html } from '@tresjs/cientos'
|
||||
import { useTresContext, useRenderLoop } from '@tresjs/core'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const { scene } = useTresContext()
|
||||
const state = reactive({
|
||||
wrapperClass: 'chartDiv',
|
||||
as: 'div',
|
||||
// center: true,
|
||||
transform: true,
|
||||
distanceFactor: 10,
|
||||
// prepend: true,
|
||||
// sprite: true,
|
||||
// occlude: [],//Can be true, Ref<TresObject3D>[], 'raycast', or 'blending'. True occludes the entire scene.
|
||||
})
|
||||
|
||||
let chart = null
|
||||
const intChart = () => {
|
||||
chart = echarts.init(document.getElementById('main'))
|
||||
chart.setOption({
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [5, 20, 36, 10, 10, 20, 10],
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
const htmlRef = ref(null as any)
|
||||
const { onLoop } = useRenderLoop()
|
||||
onLoop(() => {
|
||||
if (htmlRef.value && !chart) {
|
||||
intChart()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Html ref="htmlRef" v-bind="state" :position="[0, 0, -1]">
|
||||
<div id="main" style="width: 300px; height: 300px"></div>
|
||||
|
||||
</Html>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.chartDiv {
|
||||
#inner {
|
||||
user-select: none;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,7 +4,7 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-03-12 11:16:41
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-03-12 15:08:10
|
||||
* @LastEditTime: 2024-03-19 08:32:31
|
||||
*/
|
||||
export default {
|
||||
"name": "UIdemo",
|
||||
@ -16,10 +16,11 @@ export default {
|
||||
"state": "active",
|
||||
"require": [],
|
||||
"creatTime": "2024-01-12",
|
||||
"updateTime": "2024-03-11",
|
||||
"updateTime": "2024-03-19",
|
||||
"preview": [
|
||||
{ "src": "plugins/UIdemo/preview/divSample.png", "type": "img", "name": "divSample", "title": "简单DIV" },
|
||||
{ "src": "plugins/UIdemo/preview/divIllustrate.png", "type": "img", "name": "divIllustrate", "title": "DIV说明样例" },
|
||||
{ "src": "plugins/UIdemo/preview/echartSample.png", "type": "img", "name": "echartSample", "title": "Echart表格样例" },
|
||||
{ "src": "plugins/UIdemo/preview/sizeMark.png", "type": "img", "name": "sizeMark", "title": "尺寸样式" },
|
||||
{
|
||||
"src": "plugins/UIdemo/preview/scrollPartical.png", "type": "img", "name": "scrollPartical", "title": "滚动粒子",
|
||||
|
||||
45
src/plugins/UIdemo/pages/echartSample.vue
Normal file
45
src/plugins/UIdemo/pages/echartSample.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2023-11-06 11:08:24
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-03-19 18:31:09
|
||||
-->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TresCanvas } from '@tresjs/core'
|
||||
import { OrbitControls } from '@tresjs/cientos'
|
||||
|
||||
// import debugChart from '../components/echarts/debugChart.vue'
|
||||
|
||||
import spriteChart from '../components/echarts/spriteChart.vue'
|
||||
import meshChart from '../components/echarts/meshChart.vue'
|
||||
import animationChart from '../components/echarts/animationChart.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TresCanvas clearColor="#000000" window-size>
|
||||
<TresPerspectiveCamera :position="[2, -6, 12]" />
|
||||
<OrbitControls />
|
||||
<TresMesh :position="[-2.5, -1, -1]">
|
||||
<TresBoxGeometry />
|
||||
<TresMeshNormalMaterial />
|
||||
</TresMesh>
|
||||
<spriteChart :position="[-2.5, 1, -1]" />
|
||||
|
||||
<TresMesh :position="[2.5, -0.6, -1]">
|
||||
<TresBoxGeometry />
|
||||
<TresMeshNormalMaterial />
|
||||
</TresMesh>
|
||||
<meshChart :position="[2.5, 2, -1]" :renderOrder="1" />
|
||||
|
||||
<TresMesh :position="[1, -7, -1]">
|
||||
<TresBoxGeometry />
|
||||
<TresMeshNormalMaterial />
|
||||
</TresMesh>
|
||||
<animationChart :position="[1.5, -4, -1]" :renderOrder="2" />
|
||||
</TresCanvas>
|
||||
|
||||
<!-- <debugChart /> -->
|
||||
</template>
|
||||
@ -4,7 +4,7 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-02-23 16:40:14
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-03-18 10:08:47
|
||||
* @LastEditTime: 2024-03-19 08:32:13
|
||||
*/
|
||||
|
||||
export default {
|
||||
@ -17,7 +17,7 @@ export default {
|
||||
"state": "active",
|
||||
"require": [],
|
||||
"creatTime": "2024-02-12",
|
||||
"updateTime": "2024-03-10",
|
||||
"updateTime": "2024-03-19",
|
||||
"preview": [
|
||||
{ "src": "plugins/simpleGIS/preview/chinaMap.png", "type": "img", "name": "chinaMap", "title": "中国地图展示" },
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user