vue3+vite+typescript+element-plus(3)

我是一只代码狗

已于 2023-07-13 19:35:30 修改

阅读量246

点赞数

分类专栏： vue 文章标签： vue

于 2023-07-12 20:58:38 首次发布

原文链接：http://t.csdn.cn/CcbUc

版权

vue 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

暗黑模式,主题颜色切换

修改src\views\tabbar\index.vue，引入设置的组件

修改src\views\tabbar\shezhi\index.vue，在这里设置暗黑模式和主题颜色切换

<template>
    <div>
             <!--设置-->
            <el-popover
                placement="bottom"
                title="主题设置"
                :width="200"
                trigger="hover"
              >
                <!--表单元素-->
                <el-form >
                  <el-form-item label="主题颜色">
                    <!--ColorPicker 支持预定义颜色-->
                    <el-color-picker v-model="color" show-alpha :predefine="predefineColors" @change="setColor"/>
                  </el-form-item>
                  <el-form-item label="暗黑模式">
                    <el-switch
                            v-model="value2"
                            class="mt-2"
                            style="margin-left: 24px"
                            inline-prompt
                            :active-icon="Moon"
                            :inactive-icon="Sunny"
                            @change="qieHuan"
                        />
                  </el-form-item>
                
                </el-form>
                <template #reference>
                  <el-button class="m-2" icon="Setting"></el-button>
                </template>
              </el-popover>
            
         
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Sunny, Moon } from '@element-plus/icons-vue'
const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])

const value2 = ref(true)

//切换开关
let qieHuan=()=>{
    let html=document.documentElement
    console.log('aaa',value2)
    if(value2.value){
       //开启暗黑模式
        html.className='dark'
    }else{
        //关闭暗黑模式
        html.className=''
    }
    
}

//全局设置颜色
let setColor=()=>{
    let html=document.documentElement;
    html.style.setProperty('--el-color-primary', color.value)
}

</script>

<style scoped>

</style>

修改main.ts,引入暗黑模式样式

import 'element-plus/theme-chalk/dark/css-vars.css'

颜色切换效果

暗黑模式效果

水球图

安装echarts

pnpm install echarts

pnpm install echarts-liquidfill

<template>
    <div>
            <!--水球图-->
            <div ref="liquidFill" style="width:600px;height:400px;"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import {ref,onMounted} from 'vue'

let liquidFill=ref()


//加载时调用
onMounted(()=>{

    //水球图配置
    //获取echarts实例
    let myChart=echarts.init(liquidFill.value)
    let option = {
    series: [{
            type: 'liquidFill',
            data: [0.6, 0.5, 0.4, 0.3]
        }]
    };
    myChart.setOption(option)

})




</script>

<style scoped>

</style>

比例图

<template>
    <div>
            <!--比例图-->
            <span>张三60%,李四40%</span>
            <div ref="liquidFill" style="width:600px;height:100px;"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue'

let liquidFill=ref()


//加载时调用
onMounted(()=>{

    //获取echarts实例
    let myChart=echarts.init(liquidFill.value)
    let option = {
        grid: {
            left: 0,
            right: 0,
            bottom: 0,
            top:0
        },
        xAxis: {
            //不显示横线
            show:false
        },
        yAxis: {
            //不显示横线
            show:false,
            type: 'category',
        },
        series: [
            {
                type: 'bar',
                data: [60],
                barWidth:20,
                z:100,
                itemStyle:{
                    //椭圆
                    borderRadius:20
                }
            },
            {
                type: 'bar',
                data: [100],
                barWidth:20,
                //调整柱子条位置 往上面那个柱子合并
                barGap:'-100%',
                itemStyle:{
                    //椭圆
                    borderRadius:20
                }
            }
        ]
    };

    myChart.setOption(option)

})




</script>

<style scoped>

</style>

饼图

<template>
    <div>
            <!--饼图-->
            <div ref="liquidFill" style="width:600px;height:400px;"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue'

let liquidFill=ref()


//加载时调用
onMounted(()=>{

    //获取echarts实例
    let myChart=echarts.init(liquidFill.value)
    let option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: 40,
            right: 10,
            //图例组件显示的方向
            orient:'vertical',
            textStyle:{
                fontSize:14
            }
        },
        series: [
            {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: '张三' },
                { value: 735, name: '李四' },
                { value: 580, name: '王五' },
                { value: 484, name: '赵六' },
                { value: 300, name: '田七' }
            ]
            }
        ]
        };

    myChart.setOption(option)

})




</script>

<style scoped>

</style>

折线图

<template>
    <div>
            <!--折线图-->
            <div ref="map" style="width:400px;height:400px;"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue'
let map=ref()
//加载时调用
onMounted(()=>{
    //初始化
    let myChart=echarts.init(map.value)
    let option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['张三', '李四', '王五', '赵六', '田七', '老八', '老九']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [820, 200, 901, 300, 1290, 500, 1320],
            type: 'line',
            //平滑曲线的设置
            smooth:true,
            areaStyle: {
                color:'red'
            }
            }
        ]
    };
    myChart.setOption(option);

})




</script>

<style scoped>

</style>

散点图

<template>
    <div>
            <!--散点图-->
            <div ref="map" style="width:400px;height:400px;"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue'
let map=ref()
//加载时调用
onMounted(()=>{
    //初始化
    let myChart=echarts.init(map.value)
    let  option = {
    xAxis: {},
    yAxis: {},
    series: [
        {
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.07, 6.95],
            [13.0, 7.58],
            [9.05, 8.81],
            [11.0, 8.33],
            [14.0, 7.66],
            [13.4, 6.81],
            [10.0, 6.33],
            [14.0, 8.96],
            [12.5, 6.82],
            [9.15, 7.2],
            [11.5, 7.2],
            [3.03, 4.23],
            [12.2, 7.83],
            [2.02, 4.47],
            [1.05, 3.33],
            [4.05, 4.96],
            [6.03, 7.24],
            [12.0, 6.26],
            [12.0, 8.84],
            [7.08, 5.82],
            [5.02, 5.68]
        ],
        type: 'scatter'
        }
    ]
    };

    myChart.setOption(option);

})




</script>

<style scoped>

</style>

雷达图

<template>
    <div>
            <!--雷达图-->
            <div ref="map" style="width:400px;height:400px;"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue'
let map=ref()
//加载时调用
onMounted(()=>{
    //初始化
    let myChart=echarts.init(map.value)
    let  option = {
            
            legend: {
                data: ['未分配', '已分配']
            },
            radar: {
                indicator: [
                { name: '张三', max: 6500 },
                { name: '李四', max: 16000 },
                { name: '王五', max: 30000 },
                { name: '赵六', max: 38000 },
                { name: '老七', max: 52000 },
                { name: '老八', max: 25000 }
                ]
            },
            series: [
                {
               
                type: 'radar',
                data: [
                    {
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: '未分配'
                    },
                    {
                    value: [5000, 14000, 28000, 26000, 42000, 21000],
                    name: '已分配'
                    }
                ]
                }
            ]
            };


    myChart.setOption(option);

})




</script>

<style scoped>

</style>