vue3+ts项目中使用水球图

下载水球图

npm install echarts

npm install echarts-liquidfill

在对应组件中引入也可在main.ts中引入水球图

 import * as echarts from 'echarts'import 'echarts-liquidfill'

使用echarts必须给echarts图表设置宽高

<template><div class="water-wave"><div ref="liquidEchart" style="width: 200px; height: 200px"></div></div></template>

此处绑定ref 是为了给图表数据宽高是为了显示水球图

效果图

底部发光图是切图定位显示

代码如下

<template><div class="water-wave"><div ref="liquidEchart" style="width: 200px; height: 200px"></div></div></template><script lang="ts">import { defineComponent, onMounted, ref } from 'vue'import * as echarts from 'echarts'import 'echarts-liquidfill'export default defineComponent({name: 'WaterWave',setup() {// 组件逻辑const liquidEchart = ref<HTMLElement>()onMounted(() => {initLiquidEchart()})const initLiquidEchart = () => {let myChart = echarts.init(liquidEchart.value!)let value = 0.6// 把配置和数据放这里myChart.setOption({title: {// 标题text: '',textStyle: {// 标题的样式color: '#888', // 字体颜色fontFamily: 'Microsoft YaHei', // 字体fontSize: 24,fontWeight: '400',align: 'center', // 文字的水平方式baseline: 'middle',position: 'inside',verticalAlign: 'middle', // 文字的垂直方式},left: 'center', // 定位top: '20%',},series: [{type: 'liquidFill',radius: '80%', //水球大小center: ['50%', '50%'],waveAnimation: true,color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#138FE2',},{offset: 1,color: '#126ABC',},],globalCoord: false,},],data: [0.3, 0.3], // data个数代表波浪数amplitude: 10, //振幅backgroundStyle: {borderWidth: 2, //边框大小borderColor:'rgba(17, 94, 176, 0.8)',//边框颜色color: 'rgba(17, 94, 176, 0.4)',},label: {normal: {textStyle: {fontSize: 24,fontWeight: 'bold',color: '#fff',},},},outline: {borderDistance: 0,itemStyle: {borderWidth: 4,borderColor: 'transparent',},},}],})}return { liquidEchart }},})</script><style lang="scss" scoped  />

借鉴代码

效果图

<template><div class="water-wave"><div ref="liquidEchart" style="width: 200px; height: 200px"></div></div>
</template><script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'export default defineComponent({name: 'WaterWave',setup() {// 组件逻辑const liquidEchart = ref<HTMLElement>()onMounted(() => {initLiquidEchart()})const initLiquidEchart = () => {let myChart = echarts.init(liquidEchart.value!)let value = 0.6// 把配置和数据放这里myChart.setOption({title: {// 标题text: '',textStyle: {// 标题的样式color: '#888', // 字体颜色fontFamily: 'Microsoft YaHei', // 字体fontSize: 24,fontWeight: '400',align: 'center', // 文字的水平方式baseline: 'middle',position: 'inside',verticalAlign: 'middle', // 文字的垂直方式},left: 'center', // 定位top: '20%',},series: [{type: 'liquidFill',radius: '78%', // 水球大小waveAnimation: true,center: ['50%', '50%'],color: ['#FFEFD6', '#FEAF2E'],data: [value, value], // data个数代表波浪数amplitude: 10, //振幅// 图形样式itemStyle: {opacity: 1, // 波浪的透明度shadowBlur: 0, // 波浪的阴影范围},backgroundStyle: {borderWidth: 1, // 边框的宽度borderColor: '#FEAF2E', // 边框颜色color: '#fff',},label: {// 数据展示样式show: true,textStyle: {color: '#000',insideColor: '#fff',fontSize: 30,fontWeight: 600,},formatter: (params: any) => {return `${(params.value * 100).toFixed(1)}/200` // 文字显示},},outline: {show: false,},},],})}return { liquidEchart }},
})
</script><style lang="scss" scoped src="./index.scss" />

vue3项目中封装为组件

新建组件liquidFill.vue

<template></template><script lang="ts" setup>
// 1. 引入
import { nextTick, watch } from 'vue';
import echarts from '@/assets/ts/echarts';
import 'echarts-liquidfill';
const props = defineProps({// 父容器IDpid: {type: String,required: true,},title: {type: String,required: true,},value: {type: Number,required: true,},// 水球图背景颜色bgColor: {type: String,default: 'rgba(32, 165, 255, 0.3)',},// 波纹的颜色color: {type: String,default: '#20a5ff',},// 单位unit: {type: String,default: '',},
});nextTick(() => {// 2. 容器const container = document.querySelector('#' + props.pid) as HTMLElement;if (container) initChart(container);
});
// 3. 初始化 echarts 实例, 将配置添加给 echarts 实例
let myChart: echarts.ECharts | null = null;
const initChart = (container?: HTMLElement) => {if (!myChart) myChart = echarts.init(container as HTMLElement);myChart.setOption(option);
};watch(() => props.value,newVal => {option.series[0].data[0] = newVal;initChart();},
);
// 4.配置项
const option = {title: {text: props.title,x: '40%',y: '88%',textStyle: {fontSize: 14,fontWeight: '100',color: '#fff',lineHeight: 16,textAlign: 'center',},},series: [{type: 'liquidFill',radius: '70%',center: ['50%', '40%'],color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,// color: "#446bf5",color: props.color,},{offset: 1,color: '#2ca3e2',},],globalCoord: false,},],data: [props.value, 0.5], // data个数代表波浪数backgroundStyle: {borderWidth: 1,color: props.bgColor,},label: {// show:false,fontSize: 50,color: '#fff',formatter: '{c}' + props.unit,},outline: {show: false,borderDistance: 0,itemStyle: {borderWidth: 2,borderColor: '#112165',},},},],
};
</script>

使用

  <div id="load-chart" v-if="curSiteInfo.loadPer || curSiteInfo.loadPer === 0"><LiquidFill pid="load-chart" title="负荷率" :value="curSiteInfo.loadPer" unit="%"></LiquidFill></div><div id="power-factor" v-if="curSiteInfo.Pf || curSiteInfo.Pf === 0"><LiquidFill pid="power-factor" title="功率因数" :value="curSiteInfo.Pf" color="rgba(37, 227, 255)"bgColor="rgba(37, 227, 255,0.3)"></LiquidFill></div>

 #load-chart,#power-factor {width: 50%;height: 83%;margin-top: 8%;background: url('@/assets/img/Profile/DomesticService/bottom.png') no-repeat 80% 93%;background-size: 95% 20%;}

vue3+ts项目中使用水球图相关推荐

Vue3+TS项目中element-plus自动导入组件后，找不到文件
问题原因从报错代码来看,这是一个ts错误,而且是找不到名称是没有将*.d.ts文件加入到tsconfig.json配置文件中,所以Typescript还不认识它们解决 //找到项目根目录下 t ...
TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的语 ...
使用vue-cli创建vue3+ts项目
使用vue-cli创建vue3+ts项目提示:该文章为vue3+ts的!该文章是博主看的B站尚硅谷视频课来进行整理的!尚硅谷的课真的很不错! 文章目录使用vue-cli创建vue3+ts项目前言 ...
使用Vite创建Vue3+TS项目并整合Element Plus框架等一条龙服务
记录一下使用Vite创建Vue3+TS项目以及整合Element Plus框架,还有Less.Pinia.Vue-router.monaco-editor等插件或组件. 一.使用Vite创建Vue3+ ...
Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...
vue+ts项目中import图片时报错Cannot find module ‘xxx‘ or its corresponding type declarations
TS项目中import图片时报错Cannot find module 'xxx' or its corresponding type declarations 在vue+ts项目中使用import的形 ...
用vite创建 vue3 ts项目
先看看vite官网这都2022年了,你肯定玩过vite + vue3 + ts项目吧原先都是其他同事创建好项目,我直接上手这次我自己来创建一下,在这里做一下记录可以直接跟着官方教程走 http ...
在ts项目中接入live2d-widget.js , 在网页中展示二次元老婆
原文链接: 在ts项目中接入live2d-widget.js , 在网页中展示二次元老婆上一篇: tailwindcss 简单场景和官方案例下一篇: git Submodule 将别人的模型文件通 ...
vue项目中使用echarts-地图
vue项目中使用echarts-地图 npm install echarts 在使用的页面或main.js中进行引用 import echarts from "echarts"; ...

vue3+ts项目中使用水球图

vue3项目中封装为组件

vue3+ts项目中使用水球图相关推荐

最新文章

热门文章