简柏林 / thingskit-view · Commits

Commit c445ce722852d64bfa9397807232dc6838b4d7f2

Authored by fengwotao
1 parent e0ae3bd2

feat(packages/external): 重写部分柱状图和部分折线图，新增开启关闭动画效果和全屏效果

Inline Side-by-side
Showing 5 changed files with 119 additions and 16 deletions
@@ -5,11 +5,10 @@ import cloneDeep from 'lodash/cloneDeep' @@ -5,11 +5,10 @@ import cloneDeep from 'lodash/cloneDeep'
5 import dataJson from './data.json' 5 import dataJson from './data.json'
6 6
7 export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] 7 export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
8 -  
9 // 其它配置项比如新增（动画） 8 // 其它配置项比如新增（动画）
10 const otherConfig = { 9 const otherConfig = {
11 // 轮播动画 10 // 轮播动画
12 - isCarousel: false, 11 + isCarousel: false
13 } 12 }
14 export const seriesItem = { 13 export const seriesItem = {
15 type: 'bar', 14 type: 'bar',
@@ -35,7 +34,7 @@ export const option = { @@ -35,7 +34,7 @@ export const option = {
35 type: 'shadow' 34 type: 'shadow'
36 } 35 }
37 }, 36 },
38 -xAxis: { 37 + xAxis: {
39 show: true, 38 show: true,
40 type: 'category' 39 type: 'category'
41 }, 40 },
@@ -11,7 +11,8 @@ @@ -11,7 +11,8 @@
11 autoresize 11 autoresize
12 @mouseover="handleHighlight" 12 @mouseover="handleHighlight"
13 @mouseout="handleDownplay" 13 @mouseout="handleDownplay"
14 - ></v-chart> 14 + >
  15 + </v-chart>
15 </template> 16 </template>
16 17
17 <script setup lang="ts"> 18 <script setup lang="ts">
@@ -30,6 +31,7 @@ import { isPreview } from '@/utils' @@ -30,6 +31,7 @@ import { isPreview } from '@/utils'
30 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' 31 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
31 import isObject from 'lodash/isObject' 32 import isObject from 'lodash/isObject'
32 import dataJson from './data.json' 33 import dataJson from './data.json'
  34 +import { isFullScreen } from '../../utls/isFullScreen'
33 35
34 const props = defineProps({ 36 const props = defineProps({
35 themeSetting: { 37 themeSetting: {
@@ -56,6 +58,28 @@ const option = computed(() => { @@ -56,6 +58,28 @@ const option = computed(() => {
56 return mergeTheme(props.chartConfig.option, props.themeSetting, includes) 58 return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
57 }) 59 })
58 60
  61 +const toolBoxOption = {
  62 + show: true,
  63 + right: 20,
  64 + feature: {
  65 + myFullButton: {
  66 + show: true,
  67 + title: '全屏查看',
  68 + icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
  69 + onclick: () => {
  70 + const getEchartDom = vChartRef.value?.getDom()
  71 + const domName = document.getElementById(getEchartDom.id) as any
  72 + const htmlName = document.querySelector('html') as any
  73 + isFullScreen(domName, htmlName)
  74 + }
  75 + }
  76 + }
  77 +}
  78 +props.chartConfig.option = {
  79 + ...props.chartConfig.option,
  80 + ...{ toolbox: toolBoxOption }
  81 +}
  82 +
59 // dataset 无法变更条数的补丁 83 // dataset 无法变更条数的补丁
60 watch( 84 watch(
61 () => props.chartConfig.option.dataset, 85 () => props.chartConfig.option.dataset,
@@ -161,7 +185,6 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n @@ -161,7 +185,6 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
161 185
162 onMounted(() => { 186 onMounted(() => {
163 seriesDataMaxLength = dataJson.source.length 187 seriesDataMaxLength = dataJson.source.length
164 - console.log(props.chartConfig.option.isCarousel)  
165 if (props.chartConfig.option.isCarousel) { 188 if (props.chartConfig.option.isCarousel) {
166 addPieInterval(undefined, true) 189 addPieInterval(undefined, true)
167 } 190 }
@@ -30,6 +30,7 @@ import { isPreview } from '@/utils' @@ -30,6 +30,7 @@ import { isPreview } from '@/utils'
30 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' 30 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
31 import isObject from 'lodash/isObject' 31 import isObject from 'lodash/isObject'
32 import dataJson from './data.json' 32 import dataJson from './data.json'
  33 +import { isFullScreen } from '../../utls/isFullScreen'
33 34
34 const props = defineProps({ 35 const props = defineProps({
35 themeSetting: { 36 themeSetting: {
@@ -56,6 +57,28 @@ const option = computed(() => { @@ -56,6 +57,28 @@ const option = computed(() => {
56 return mergeTheme(props.chartConfig.option, props.themeSetting, includes) 57 return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
57 }) 58 })
58 59
  60 +const toolBoxOption = {
  61 + show: true,
  62 + right: 20,
  63 + feature: {
  64 + myFullButton: {
  65 + show: true,
  66 + title: '全屏查看',
  67 + icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
  68 + onclick: () => {
  69 + const getEchartDom = vChartRef.value?.getDom()
  70 + const domName = document.getElementById(getEchartDom.id) as any
  71 + const htmlName = document.querySelector('html') as any
  72 + isFullScreen(domName, htmlName)
  73 + }
  74 + }
  75 + }
  76 +}
  77 +props.chartConfig.option = {
  78 + ...props.chartConfig.option,
  79 + ...{ toolbox: toolBoxOption }
  80 +}
  81 +
59 // dataset 无法变更条数的补丁 82 // dataset 无法变更条数的补丁
60 watch( 83 watch(
61 () => props.chartConfig.option.dataset, 84 () => props.chartConfig.option.dataset,
1 <template> 1 <template>
2 - <v-chart  
3 - ref="vChartRef"  
4 - :init-options="initOptions"  
5 - :theme="themeColor"  
6 - :option="option.value"  
7 - :manual-update="isPreview()"  
8 - autoresize  
9 - @mouseover="handleHighlight"  
10 - @mouseout="handleDownplay" 2 + <v-chart
  3 + ref="vChartRef"
  4 + :init-options="initOptions"
  5 + :theme="themeColor"
  6 + :option="option.value"
  7 + :manual-update="isPreview()"
  8 + autoresize
  9 + @mouseover="handleHighlight"
  10 + @mouseout="handleDownplay"
11 ></v-chart> 11 ></v-chart>
12 </template> 12 </template>
13 13
14 <script setup lang="ts"> 14 <script setup lang="ts">
15 -import { reactive, watch, PropType,onMounted } from 'vue' 15 +import { reactive, watch, PropType, onMounted } from 'vue'
16 import VChart from 'vue-echarts' 16 import VChart from 'vue-echarts'
17 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook' 17 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
18 import { use, graphic } from 'echarts/core' 18 import { use, graphic } from 'echarts/core'
@@ -24,8 +24,9 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore @@ -24,8 +24,9 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
24 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' 24 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
25 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' 25 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
26 import { useChartDataFetch } from '@/hooks' 26 import { useChartDataFetch } from '@/hooks'
27 -import { isPreview, colorGradientCustomMerge} from '@/utils' 27 +import { isPreview, colorGradientCustomMerge } from '@/utils'
28 import dataJson from './data.json' 28 import dataJson from './data.json'
  29 +import { isFullScreen } from '../../utls/isFullScreen'
29 30
30 const props = defineProps({ 31 const props = defineProps({
31 themeSetting: { 32 themeSetting: {
@@ -50,6 +51,27 @@ const chartEditStore = useChartEditStore() @@ -50,6 +51,27 @@ const chartEditStore = useChartEditStore()
50 const option = reactive({ 51 const option = reactive({
51 value: {} 52 value: {}
52 }) 53 })
  54 +const toolBoxOption = {
  55 + show: true,
  56 + right: 20,
  57 + feature: {
  58 + myFullButton: {
  59 + show: true,
  60 + title: '全屏查看',
  61 + icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
  62 + onclick: () => {
  63 + const getEchartDom = vChartRef.value?.getDom()
  64 + const domName = document.getElementById(getEchartDom.id) as any
  65 + const htmlName = document.querySelector('html') as any
  66 + isFullScreen(domName, htmlName)
  67 + }
  68 + }
  69 + }
  70 +}
  71 +props.chartConfig.option = {
  72 + ...props.chartConfig.option,
  73 + ...{ toolbox: toolBoxOption }
  74 +}
53 75
54 // 渐变色处理 76 // 渐变色处理
55 watch( 77 watch(
  1 +export const isFullScreen = (domName: any, htmlName: any) => {
  2 + const isFullScreen = document.fullscreenElement
  3 + const currentDatkTheme = htmlName.getAttribute('data-theme')
  4 +
  5 + if (isFullScreen) {
  6 + console.log('退出全屏')
  7 + if (document.exitFullscreen) {
  8 + document.exitFullscreen()
  9 + domName.style.background = ''
  10 + } else if (document.msExitFullscreen) {
  11 + document.msExitFullscreen()
  12 + domName.style.background = ''
  13 + } else if (document.mozCancelFullScreen) {
  14 + document.mozCancelFullScreen()
  15 + domName.style.background = ''
  16 + } else if (document.webkitCancelFullScreen) {
  17 + document.webkitCancelFullScreen()
  18 + domName.style.background = ''
  19 + }
  20 + } else {
  21 + console.log('进入全屏')
  22 + if (domName.requestFullscreen) {
  23 + domName.requestFullscreen()
  24 + domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
  25 + } else if (domName.mozRequestFullScreen) {
  26 + domName.mozRequestFullScreen()
  27 + domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
  28 + } else if (domName.webkitRequestFullscreen) {
  29 + domName.webkitRequestFullscreen()
  30 + domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
  31 + } else if (domName.msRequestFullscreen) {
  32 + domName.msRequestFullscreen()
  33 + domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
  34 + }
  35 + }
  36 +}