Echarts图表之条形进度条(二)

最新推荐文章于 2024-06-23 13:00:46 发布
最新推荐文章于 2024-06-23 13:00:46 发布
阅读量1.4k 收藏 7
点赞数
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gly_technology/article/details/122574072
版权

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Echarts图表</title>
        <!-- 引入echarts.min.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            let myColor = ['#0f89e7', '#f57674', '#54d2e6', '#f9b348']
            // 指定图表的配置项和数据
            var option = {
                backgroundColor: '#000',
                grid: {
                    left: "50",
                    top: "40",
                    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: 14,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        data: ["厦门第一医院", "厦门中山医院", "厦门中医院", "厦门第五医院"],
                        max: 4, // 关键：设置y刻度最大值，相当于设置总体行高
                        inverse: true
                    },
                    {
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            color: "black",
                            fontSize: 14,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        data: [4000, 3000, 2000, 1000],
                        max: 4, // 关键：设置y刻度最大值，相当于设置总体行高
                        inverse: true
                    }
                ],
                series: [{
                    name: "%",
                    type: "bar",
                    barWidth: 13,
                    data: [40, 30, 20, 10],
                    barCategoryGap: 20,
                    label: {
                        show: true,
                        position: 'inside',
                        formatter: '{c}{a}',
                        color: '#fff',
                        fontSize: 12
                    },
                    // 颜色设置
                    itemStyle: {
                        normal: {
                            barBorderRadius: 10,
                            color: function(params) {
                                let num = myColor.length;
                                return myColor[params.dataIndex % num];
                            }
                        }
                    },
                    zlevel: 1
                }, {
                    name: "进度条背景",
                    type: "bar",
                    barGap: "-100%",
                    barWidth: 15,
                    data: [100, 100, 100, 100],
                    color: "rgba(255,255,255,0)",
                    itemStyle: {
                        normal: {
                            barBorderRadius: 10,
                            barBorderColor: '#01a4bf',
                            barBorderWidth: 3,
                        }
                    },
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
</html>

gly_technology
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
两种方法滚动横向进度条图表
编程酸菜鱼的博客
08-13 2223
滚动的横向进度条图表 效果： 被遮掉的是商品名，问题不大 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rK3KEmiX-1628837518466)(C:\Users\zrc\Pictures\blog\进度条滚动1.png) 一.直接写 滚动使用vue-seamless-scroll插件实现,可以查看该插件的说明文档 然后写图表，层次通过ul和li标签实现 写进度条，通过两个div块实现，一个用来显示当前量，一个当做进度条的底色背景 代码： class b
Echarts环形进度条
weixin_43790703的博客
02-01 2220
最终效果图如下： 注意和基础折线图不同，进度条需要额外定义2个变量： var value = 66;//当前进度 var maxvalue = 100;//进度条最大值 完整代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--title表示网页名称--> <title>右上-圆环图</title> <!--引入E
Axure集成echarts图表组件.rplib
06-28
主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 echarts Ax
带进度的圆形进度条,可显示百分比
06-12
带进度的圆形进度条,可显示百分比。可以在统计控球率的时候使用
Echarts饼图-实现今日进度-动态图
最新发布
qq_36463299的博客
06-23 662
renderItem// ... 绘制弧线或圆点的逻辑},data: [0],},
echarts 百分比进度条
BigOrange的博客
10-14 6318
echarts 百分比进度条如下图两种，下面代码是第二张图的，第一个的稍加修改label值即可 <div id="main" style="width: 180px;height:30px;"></div> <script> var myChart = echarts.init(document.getElementById('main')); var option = { grid: { top: 5, bottom: 5,
Echarts实现进度条效果
pyj2017的博客
05-20 5403
Echarts实现进度条效果 实现效果如图： option = { grid: { containLabel: true, left: 0, right: 0, top: 0, bottom: 0, }, xAxis: {
echarts图表进度条类型图
qq_43840793的博客
07-11 3090
x轴不显示，y轴的axisLabel用富文本，显示机器与台数；图表有两个数据组，分别用蓝色和灰色表示，两个柱子重合，灰色柱子在蓝色柱子下面；灰色柱子的label用富文本，显示占比。在methods里写个配置图表的函数，输入参数为dataAll,包含了机具的类型、数量、占比等信息。dataPercent: dataPercent,//占比。左边是类别、数量，中间类似于进度条，右边是所占百分比。（1）在template里写个容器。dataX: dataX,//类别。dataY: dataY,//数量。
echarts条形图
qq_49732089的博客
03-08 1114
<div id="sexColumnPic" v-show="isShowSexPic === 2" style="height:313px;"></div> // 性别条形图 getSexColumnPic(){ let option; option = { yAxis:{ type:'category', data:this.columnOptio.
echarts图表导出excel示例
09-04
在本文中，我们将深入探讨如何使用ECharts图表库来实现数据的导出功能，特别是将图表数据导出为Excel格式。ECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型和强大的交互性，广泛应用于Web应用...
java后台生成echarts图表
11-13
Java 后台生成 ECharts 图表是一种常见的数据可视化方法，特别是在大数据处理和Web应用中。ECharts 是百度推出的一个开源的、基于 JavaScript 的数据可视化库，提供了丰富的图表类型和强大的交互功能。然而，在某些...
echarts图表导出到excel
12-19
echarts图表导出到excel中的解决方法，做个备忘录，以防忘记
微信小程序Echarts图表组件使用方法详解
10-16
此外，如果出现错误，但没有具体的报错信息，就要考虑检查各个文件是否配置正确，尤其是css文件，因为样式问题可能是导致图表不显示的常见原因之一。微信小程序的开发还需要遵循微信官方的开发文档和技术标准，这样...
ECharts进度条，环饼图，折线图案例记录
lwx931449660的博客
09-14 7353
ECharts 没有提供进度条类型的图表，但是可以根据仪表盘类型修改得到，上图 官方文档请看：ECharts官方配置项文档 上代码： <template> <div class="box-container"> <BoxHeader info="车辆类型" utils="万辆" type="dis" /> <div class="content"> <div class="item_image"> <d..
Echarts 之横向柱状图（完成进度）
Lane Lee&CSDN
05-18 2845
效果图 代码 <script src="../js/echarts-4.1.0/echarts.js"></script> <script src="../js/theme/customed.js"></script> <script type="text/javascript"> var legendData = ['xx事件总计划','xx事件已完成','xx事件1总计划','xx事件2已完成']; var yAx..
ECharts条形进度图及滚动条设置案例
每一个想要学习的念头，都是未来的你在呼救。
06-26 3683
ECharts条形进度图及滚动条设置案例
Echarts图表之条形进度条(一)
gly_technology的博客
01-27 1125
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Echarts图表</title> <!-- 引入echarts.min.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min....
echart 横向柱状图（进度条模式的）
afterAll0的博客
11-19 5098
getChartBarHeng(id, xData, yData) { //横向柱状图 let that = this; let echarts = that.$echarts; var chartDom = document.getElementById(id); var myChart = echarts.init(chartDom); var option; option = { tooltip: { axisPointer: { type: "shadow", }
echarts-进度条
joan_yb的博客
10-25 1903
echarts-进度条
Echarts实现3d环形进度条
05-10
Echarts提供了一个3D柱状图（bar3D）的组件，我们可以利用这个组件实现一个3D环形进度条。 具体实现步骤如下： 1. 安装Echarts ```bash npm install echarts --save ``` 2. 引入Echarts库 ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值