vue中echarts实现水球动画图

实现如上图样式

思路：把后面图片用背景图片写入中间水球图使用echarts中的liquidFill

由于自己是在vue中使用的首先要用npm安装

npm i echarts-liquidfill -s

在页面引用

import "echarts-liquidfill";

//html模块<div class="carLeft"><div class="carCharts" ref="carCharts"></div>
</div>//css模块.carLeft{width: 1.4rem;height: 1.66rem;margin-right: 0.24rem;margin-top: 0.24rem;background: url(../assets/image/carBg.png) no-repeat;background-size: 100%;position: relative;.carCharts{position: absolute;top: 0.26rem;left: .13rem;width: .9rem;height: .9rem;// left: 0.1rem;}}//js模块var myChart = echarts.init(this.$refs.carCharts);const echartsData =  [40, 60];var option = {waveLength:'100%',// x轴xAxis:{show:false, // 不显示},// y轴yAxis: {show:false, // 不显示},grid:{top:'2.5%',right:'40',bottom:'2.5%',left:0,},series: [{type: 'liquidFill',radius: '100%',  // 半径大小center: ['50%', '50%'],    // 布局位置waveLength:'150',data:echartsData, // 水球波纹值//根据设计设置水波球背景颜色为透明backgroundStyle: {color: 'rgba(255,255,255,0)',},outline: { // 轮廓设置  不展示show: false},itemStyle: {  //设置水球波动的渐变颜色color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1,color: 'rgba(23,242,206, .65)'},  {offset: 0.9,color: 'rgba(23,242,206, .15)'},{offset: 0.4,color: 'rgba(23,242,206, .15)'},{offset: 0,color: 'rgba(12,255,215,1)'}],globalCoord: false}},//水球中间展示字体及颜色label:{normal:{textStyle: {fontSize: 24,color:'#fff',fontWeight:400,formatter: '',}}}}]};myChart.clear();myChart.resize();myChart.setOption(option);

vue中echarts实现水球动画图相关推荐

vue中echarts自适应屏幕大小
vue中echarts自适应屏幕大小,延迟执行项目中出现echarts适应屏幕大小,有时会遇到不管屏幕大小如何变化echarts图表大小不变的情况:或者出现图表变化延迟的情况,针对这两种情况,分别解 ...
vue 中 echarts 中国地图
我们先来看一下效果说明:echarts 版本 "echarts": "^4.2.0-rc.2", 版本高的话,node_model 里面没有 map ...
vue中echarts折线图双折线，鼠标悬浮时间，将两个X轴的内容以及Y轴的内容全部显示出来
vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来: 只要修改一个地方,用formatter方法 tooltip: {trigger: 'axis',axis ...
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点先看效果图我们可以看到图中图表不仅有渐变色,同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来,我们一起来实现一下这个效果 1. ...
Vue中echarts图表x轴文字倾斜展示(防止字迹展示重叠)
前言 Vue中echarts图表x轴文字倾斜展示效果图代码 axisLabel: {fontSize: 12,color: '#666',interval: 0,//主要是下面的代码-倾斜rota ...
vue中echarts使用记录
1. echarts的使用安装 npm i -S echarts@4.9.0 引入 main.js中引入(版本4.9.0) import Echarts from 'echarts' Vue.pro ...
vue中echarts使用案例：饼图（可直接使用）
目录功能.效果图: 代码实现 1.下载echarts包:终端运行 2.代码 3.运行项目:终端运行 4.可能遇到的错误具体代码详解: 功能.效果图: 1.点击对应模块,放大并显示数据 2.点击下方 ...
vue中Echarts之省市地图（北京市）展示相关数据
1. 下载ECharts 插件 npm i echarts --save 2. 引入省市地图 import echarts from 'echarts' Vue.prototype.echarts = ...
【Vue+Echarts】Vue中Echarts图表的使用（三）—— 组件模块调用不同类型的Echarts图表（动态图表生成）
这节也是这个系列最后的一篇文章了. 第二篇文章,将Echarts封装成了组件,在使用的时候,只需将ChartsOption传递进去即可,同时,提供了监听事件,当Option发生变化时,会刷新图表. 因 ...

vue中echarts实现水球动画图

vue中echarts实现水球动画图相关推荐

最新文章

热门文章