vue echarts 实现速度的那种进度蓄力效果

这个标题写的我很纠结，因为我一个语言组织能力不咋地的人真的不知道该怎么描述这个效果，所以呢，就这样描述一下，希望各位可以理解我。

简单来说就是这种效果的啦！

其实这个效果是就是使用echarts的柱形图。简单的写一下option的样式，如果有需要的话就参考一下，仅供参考兄弟们！

let option = {grid: {top: '30%',bottom: '4%',left: '2%',right: '2%'},xAxis: {type: 'value',position: 'top',min: -50,max: 50,axisLine: { show: false },axisLabel: { show: false },axisTick: { show: false },splitLine: { show: false },},yAxis: {show: false,type: 'category',axisLine: { show: false },axisLabel: { show: false },axisTick: { show: false },splitLine: { show: false },data: ['one']},series: [{name: '',type: 'pictorialBar',symbol: 'rect', // 类型label: {normal: {position: 'right',}},symbolRepeat: true,symbolSize: [6, 20],data: [{value: -50,label: this.labelRight,itemStyle: {color: '#d9030e27'},},{value: 50, itemStyle: {color: '#00e2691a'}},]},{ //分隔type: 'pictorialBar',symbolRepeat: 'fixed',symbol: 'Rect',symbolClip: true,symbolSize: [6, 20],data: [{value:0, itemStyle: {color: '#d9030e'},},{value: 20,itemStyle: {color: '#00e268'}},]},]};

效果就是这个样子。

加油！

vue echarts 实现速度的那种进度蓄力效果相关推荐

基于VUE + Echarts 实现可视化数据大屏展示效果
中国(寿光)国际蔬菜科技博览会智慧农业系统 - LED拼接屏展示前端开发文档上线后呈现效果: 一.开发需求及方案制定 1.确定现场led拼接屏的宽高比,按照1920px*1080px的分辨率,F11 ...
vue+echarts+自适应实现可视化大屏展示效果
展示效果: 一.分辨率按照1920px*1080px,16:9展示效果最佳,不同分辨率可自适应,但图像可能有拉伸. 二.全屏页面的自适应适配方案采用rem 方案实现自适应,可参考 https://ww ...
echarts中半圆的环形进度图形
echarts中半圆的环形进度图形效果如图: 一.html代码如下: <div id="pieDiagram1" style="width:330px;heigh ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
vue Echarts 填坑记(Echarts数据量大,导致浏览器卡顿)
最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速 ...
vue + Echarts 填坑记（Echarts数据量大，导致浏览器卡顿）
最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速 ...
Vue+ECharts实现可视化地图
Apache ECharts 一个基于 JavaScript 的开源可视化图表库,提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图,用于关系数 ...
vue中进度条写法_vue组件实现进度条效果
这篇文章主要为大家详细介绍了vue组件实现进度条效果,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 本文实例为大家分享了vue实现进度条效果的具 ...
提高 webpack 构建 Vue 项目的速度
提高 webpack 构建 Vue 项目的速度前言最近有人给我的 Vue2 后台管理系统解决方案提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了 ...
Vue+ECharts的小示例
Vue+ECharts做数据可视化 1. Vue Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手, ...

vue echarts 实现速度的那种进度蓄力效果

vue echarts 实现速度的那种进度蓄力效果

vue echarts 实现速度的那种进度蓄力效果相关推荐

最新文章

热门文章