Echarts—电量进度条实现（Vue）

最新推荐文章于 2023-06-14 17:17:57 发布
最新推荐文章于 2023-06-14 17:17:57 发布
阅读量2.4k 收藏 9
点赞数
文章标签： vue echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wgqjiayou/article/details/118751868
版权

效果：
效果图

代码：


<template>

    <div class="chart" id="chart"></div>

</template>

<script>
	import * as echarts from 'echarts';
    export default {

        name : "Bar",

        data() {

            return {

            };

        },

        mounted() {

            this.bar();

        },

        methods: {

            bar() {

                this.myChart = this.$echarts.init(document.getElementById("chart"));

                var data = [100, 200, 300];

                var titlename = ["苹果", "香蕉", "橙子"];

                var option = {

                    backgroundColor:"#17326b",//如果设置图片背景，在外层div设置css样式

                    grid: {

                        left: "10",

                        top: "10",

                        right: "0",

                        bottom: "10",

                        containLabel: true,

                    },

                    xAxis: {

                        type: "value",

                        splitLine: { show: false },

                        axisLabel: { show: false },

                        axisTick: { show: false },

                        axisLine: { show: false },

                    },

                    yAxis: [

                        {

                            type: "category",

                            axisTick: { show: false },

                            axisLine: { show: false },

                            axisLabel: {

                                color: "black",

                                fontSize: 12,

                                textStyle: {

                                    color: "#fff",

                                },

                            },

                            data: titlename,

                            // max:10, 设置y刻度最大值，相当于设置总体行高

                            inverse: true,//横向进度条的关键

                        },

                        {

                            type: "category",

                            axisTick: { show: false },

                            axisLine: { show: false },

                            axisLabel: {

                                color: "black",

                                fontSize: 12,

                                textStyle: {

                                    color: "#fff",

                                },

                            },

                            data: data,

                            // max:10,

                            inverse: true,

                        },

                    ],

                    series: [

                        {

                            name: "条",

                            type: "pictorialBar",

                            symbolRepeat: "fixed",

                            symbolMargin: 1,

                            symbol: "rect",//内部类型（方块，圆，svg，base64图片）

                            symbolClip: true,

                            symbolSize: [6, 8],//进度条的宽高

                            symbolOffset: [5,0],//柱子的位置偏移

                            data: data,

                            z: 2,

                            // barCategoryGap:0,

                            itemStyle: {

                                normal: {

                                    barBorderRadius: 7,

                                    //柱体的颜色

                                    //右，下，左，上（1，0，0，0）表示从正右开始向左渐变

                                    color: function (params) {

                                        //  console.log(params);

                                        var colorList = [

                                            ["#02f0fe", "#02B8EC"],

                                            ["#02f0fe", "#02B8EC"],

                                            ["#02f0fe", "#02B8EC"],

                                            ["#02f0fe", "#02B8EC"],

                                            ["#02f0fe", "#02B8EC"],

                                        ];

                                        var colorItem = colorList[params.dataIndex];

                                        return new that.$echarts.graphic.LinearGradient(

                                            1,

                                            0,

                                            0,

                                            0,

                                            [

                                                {

                                                    offset: 0,

                                                    color: colorItem[0],

                                                },

                                                {

                                                    offset: 1,

                                                    color: colorItem[1],

                                                },

                                            ],

                                            false

                                        );

                                    },

                                },

                            },

                            zlevel: 1,

                        },

                        {

                            name: "进度条背景",

                            type: "bar",

                            barGap: "-100%",

                            barWidth:16,

                            symbolOffset: [5, 0],//柱子的位置

                            data: [100, 100, 100],

                            color: "#2e5384",

                            itemStyle: {

                                normal: {

                                    barBorderRadius:4,

                                },

                            },

                        },

                    ],

                };

                this.myChart.setOption(option);

                //尺寸自适应

                window.addEventListener("resize", () => { this.myChart.resize();});

            },

        }

</script>

<style>

    .panel {

        height: 340px;

        background: rgba(255, 255, 255, 0.04);

        padding: 10px;

    }

</style>
wgqjiayou
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
模仿金山电池电量进度条(iPhone源代码)
03-17
来源：github/ProgressViewLicence：MIT作者：Mr.Cao     模仿iOS金山电池电量的动画效果，电量有1%的误差，水纹进度条可随着设备倾斜，有水波纹效果很不错。需真机测试。     小编注：感谢开发者@Mr.Cao 。
vue项目用eachars实现电池图
沐天的博客
02-23 1843
vue项目用eachars实现电池图
antdvue进度条
m0_70617074的博客
11-08 353
【代码】antdvue进度条。
vue实现电池条纹状的进度条 类似于斑马线一般的进度条
weixin_44920024的博客
11-10 1431
刚开始以为是要用循环那种写法，后来是用一个小单元作为背景图片，然后在style里面设置进度条的长度 这样的话背景图片就会自动填充然后形成一条斑马线，从而实现进度条那种
vue项目的进度条插件 -- nprogress
weixin_45689946的博客
01-13 4136
在Vue项目中，nprogress ---- Ajax进度条插件的安装与使用
vue利用echarts绘制项目进度条，实例详解
银鞍照白马的博客
10-26 4308
如图所示，想要实现清晰表达当前项目的进度，可以使用百度的免费插件echarts。官网地址：https://echarts.apache.org/zh/index.html 里面文档和api都很齐全，如果还是不太懂，可以去看看echarts社区的开发者开源的各种实例，非常齐全。地址：点击进入 百度echarts安装我这里就不赘述，有大量的资料可以查询。下面我们就开始开发我们的项目进度条。 ...
ecahrts实现进度条功能
qq_42628504的博客
01-28 978
let barWidth = 12; var data1 = [42]; var titlename = ['时间']; var valdata = [100]; option = { backgroundColor: 'balck', xAxis: { show: false, inverse: true, }, yAxis: [ { show: false, data: ti.
echarts象形柱图实现电量效果柱状图
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
06-14 1503
改造的基本思路：将type由bar变为pictorialBar，再修改设置与pictorialBar相关的配置项即可。看到这几种标记类型还不是很抽象，没关系，我们一个一个看下效果。a.type由bar变为pictorialBar，效果如下。看了这么多，那么我们要用到的是哪一个呢？看下官网例子，你就大概明白每个配置项能实现的效果了，接着再改变一下颜色，设置一下label就完成了。为什么是椭圆效果呢？我们去官网配置项中找答案，因此我们设置一下想要实现效果的配置项。但是，还有一个小细节需要注意，
Echarts 实现电池效果的柱状图
大剑师兰特的GIS世界
02-27 910
在vue和echarts联合技术栈的操控下，本专栏提供行之有效的源代码示例。这里既包括样式的修改，又包括常用bug的解决。（1）提供title示例：展示控制标题的颜色、位置、子标题，连接等（2）提供legend示例：展示控制图例的类型、宽度、高度、位置、间隙，边框、阴影、透明度、偏移，字体、颜色，提示语等（3）提供grid示例：展示控制绘图网格的位置、宽度、高度、边框、阴影等（4）提供xAxis示例：展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等。
【Echarts系列】—— 实现电池图、3D立体圆形柱状图
Hannah_wy的博客
05-16 1038
【代码】【Echarts系列】—— 实现电池图、3D立体圆形柱状图。
半圆形进度条(vue)
01-08
export default { data() { return { canvas:'', percent:'', ctx:'', circleX:'', circleY:'', radius:'', cradius:'', lineWidth:'', fontSize:'', color:'', process:'', circleLoading:null, }; }, mounted() { this.toCan
vue组件实现进度条效果
12-30
本文实例为大家分享了vue实现进度条效果的具体代码，供大家参考，具体内容如下 一、效果图 二、代码 progress-bar.vue <template> <div class=vue-progress-bar> <div class=vue-progress-bar__tip> <span class=vue-progress-bar__tiplabel>{{label}}</span> <span class=vue-progress-bar__tiptext>{{text}}</span> </div> <
半圆形进度条(vue加强版)
01-08
半环形进度条DEMO 10 20 30 40 50 60 70 80 90 100 export default { data() { return { canvas:'', percent:'', ctx:'', circleX:'', circleY:'', radius:'', cradius:'', lineWidth:'',
Vue实现带进度条的文件拖动上传功能
08-27
主要介绍了Vue实现带进度条的文件拖动上传功能,本文通过实例代码给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
vue自定义进度条
09-30
这是一个使用vue动态开发的进度条的小例子，里面同时涵盖了多种样式的属性值动态改变的方法。
node-v8.1.4-linux-x64.tar.xz
最新发布
05-05
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
麦肯锡-xxKPI方案gl.ppt
05-05
麦肯锡-xxKPI方案gl.ppt
基于Transformer模型构建的聊天机器人python源码+运行说明.zip
05-05
一、简介 基于Transformer模型构建的聊天机器人，可实现日常聊天。 二、系统说明 2.1 功能介绍 使用者输入文本后，系统可根据文本做出相应的回答。 2.2 数据介绍 * 百度中文问答 WebQA数据集 * 青云数据集 * 豆瓣数据集 * chatterbot数据集 由于数据集过大，因此不会上传，如有需要可以在issue中提出。 2.3. 模型介绍（v1.0版本） 基于Transformer模型，使用Python中的keras-transformer包。 训练的参数文件没有上传，如有需要可在issue中提出。 三、注意事项 * keras-transformer包需要自行安装：`pip install keras-transformer`。 * 如果需要实际运行，参数文件放在`ModelTrainedParameters`文件下；`ListData`文件下包含了已经处理好的字典等数据，不需要修改，直接运行Main.py即可。 * 如果需要自行训练，将数据集文件放在`DataSet`文件下。 * `HyperParameters.py`文件中包含了系统所需
vue3使用。echarts环形进度条
08-19
在Vue3中使用Echarts环形进度条，可以按照以下步骤进行操作： 1. 首先，确保你已经安装了ECharts库，可以通过npm或yarn进行安装。 2. 在Vue项目中引入ECharts库。你可以在main.js文件中全局引入ECharts，或者在需要使用环形进度条的组件中引入。 3. 在组件中创建一个canvas元素作为容器来显示环形进度条。可以使用Vue的指令v-if来判断是否显示环形进度条。 4. 定义环形进度条的配置对象，可以在data选项中定义一个progressOptions对象，其中包含了环形进度条的设置。可以引用上述的引用和引用中提到的设置。 5. 在mounted钩子函数中使用ECharts的init方法来初始化环形进度条，并传入之前创建的canvas容器和配置对象。 6. 在Vue的computed属性中定义一个函数，利用该函数来更新环形进度条的数据。可以在函数中修改progressOptions对象的data属性来更新进度条的数值。 7. 在模板中使用canvas元素来展示环形进度条。 下面是一个示例代码： ```vue <template> <div> <canvas v-if="showProgress" ref="progressChart"></canvas> </div> </template> <script> import * as echarts from 'echarts'; export default { data() { return { showProgress: true, progressOptions: { series: [{ type: 'pie', radius: ['60%', '70%'], center: ['50%', '50%'], label: { show: false, }, data: [ { value: 50, name: '完成' }, { value: 50, name: '剩余' }, ], itemStyle: { normal: { color: '#f5f5f5', borderWidth: 10, borderColor: '#f5f5f5', borderType: 'solid', }, emphasis: { color: '#f5f5f5', }, }, }], }, }; }, mounted() { const chart = echarts.init(this.$refs.progressChart); chart.setOption(this.progressOptions); }, }; </script> ``` 这是一个基本的示例，你可以根据你的需求来修改配置对象和模板代码。通过上述步骤，你就可以在Vue3中使用ECharts来创建一个环形进度条了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Echarts 环形进度条 环形图嵌套](https://blog.csdn.net/Windyluna/article/details/120026774)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值