E-DataV

Appearance

On this page

动态文字 ​

基本示例 ​

点击查看代码
js
<template>
  <div id="app">
    <e-dynamic-text :text="text" style="font-size: 36px;font-weight: bold;" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      text: 'E-DATAV数据可视化大屏'
    }
  }
}
</script>
js
<template>
    <div>
        <e-dynamic-text text="E-DATAV数据可视化大屏" style="font-size: 36px;font-weight: bold;" />
    </div>
</template>
<script setup>
import { EDynamicText } from 'e-datav-vue3';
</script>
js
import { EDynamicText } from 'e-datav-react';

function Page() {
  return (
    <div>
      <DynamicText text={'E-DATAV数据可视化大屏'} style={{ fontSize: 36, fontWeight: 'bold' }} />
    </div>
  )
}

export default Page

自定义颜色 ​

点击查看代码
js
<template>
  <div id="app">
    <e-dynamic-text :text="text" style="font-size: 36px;font-weight: bold;" :colors="['#f53f3f', '#1e80ff']" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      text: 'E-DATAV数据可视化大屏'
    }
  }
}
</script>
js
<template>
    <div>
        <e-dynamic-text text="E-DATAV数据可视化大屏" style="font-size: 36px;font-weight: bold;" :colors="['#f53f3f', '#1e80ff']" />
    </div>
</template>
<script setup>
import { EDynamicText } from 'e-datav-vue3';
</script>
js
import { EDynamicText } from 'e-datav-react';

function Page() {
  return (
    <div>
      <DynamicText text={'E-DATAV数据可视化大屏'} style={{ fontSize: 36, fontWeight: 'bold' }} colors={['#f53f3f', '#1e80ff']} />
    </div>
  )
}

export default Page

属性 ​

字段类型备注
textstring文字
spacingnumber左右间距，默认5
colorsstring[]文本渐变颜色，只支持两种颜色，第一个为起始颜色，第二个为结束颜色，默认['#fff', '#1e80ff']