echarts刻度饼图

最新推荐文章于 2023-07-30 22:01:30 发布
最新推荐文章于 2023-07-30 22:01:30 发布
阅读量822 收藏 2
点赞数 1
分类专栏： echarts 文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songqiu821/article/details/122600853
版权

在这里插入图片描述

<head>
	<meta charset="utf-8">
	<title>刻度饼图</title>
	<!-- 引入 echarts.js -->
	<script src="js/echarts501.min.js" type="text/javascript"></script>
	<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<style>
    body{
        background-color: #00062E;
    }
</style>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        let dataset ={
			data: [
                [ "20220119", "0.707", "0.86",'0.04','0.1','0.56']
			],
			count: 4,
			fields: [{
				name: "SJ",
				title: "SJ",
				type: 6
			}, {
				name: "ZBFB",
				title: "总百分比",
				type: 6
			}, {
				name: "ZYC_DM",
				title: "铵油炸药",
				type: 3
            },
            {
				name: "ZYC_MC",
				title: "铵油炸药2",
				type: 3
            },
            {
				name: "ZYC_MC",
				title: "铵油炸药3",
				type: 3
            },
            {
				name: "ZJH",
				title: "铵油炸药3",
				type: 3
			}]
		}
		// 数据集合
		var dataArray = dataset.data;
		// 字段集合
		var fieldArray = dataset.fields;
        var dataResult = [];
        let rzcl = 0;  
        // 找出字段标题对应的数据下标位置
        for(let i = 0; i < fieldArray.length; i++){
            if(fieldArray[i].name.trim()=='ZBFB'){//日总产量
                rzcl = dataArray[0][i]*100;
            }else{
                if((fieldArray[i].name.trim()!=='SJ') && (fieldArray[i].name.trim()!=='ZJH')){
                    dataResult.push({
                        //name:fieldArray[i].name.trim(),
                        value: dataArray[0][i]*100==0?null:dataArray[0][i]*100,
                        title:fieldArray[i].title.trim(),
                    });
                }
            }
        }
		console.log(dataResult)
        const labelItemArr = [];
        for (let i = 0; i < 100; ++i) {
            labelItemArr.push({
                value: 1,
                name: i,
                itemStyle: { normal: { color: i < rzcl ? '#00ACFF' : '#024ADD' } }
            }, {
                value: 3,
                name: '',
                itemStyle: {
                    normal: {
                        label: { show: false },
                        labelLine: { show: false },
                        color: 'rgba(0, 0, 0, 0)',
                        borderColor: 'rgba(0, 0, 0, 0)',
                        borderWidth: 0
                    }
                }
            });
        }
       // 指定图表的配置项和数据
		myChart.setOption({
            title: [{
                text: rzcl+'%',
                x: '50%',
                y: '45%',
                textAlign: 'center',
                textStyle: {
                    fontSize: '30',
                    fontWeight: '600',
                    color: '#ffffff',
                    textAlign: 'center',
                },
            }, {
                text: '完成率',
                left: '50%',
                top: '55%',
                textAlign: 'center',
                textStyle: {
                    fontSize: '18',
                    fontWeight: '600',
                    color: '#00DBF3',
                    textAlign: 'center',
                },
            }],
            polar: {
                radius: ['61%', '57%'],
                center: ['50%', '50%'],
            },
            angleAxis: {
                max: 100,
                show: false,
                startAngle: 0,
            },
            radiusAxis: {
                type: 'category',
                show: true,
                axisLabel: { show: false },
                axisLine: { show: false },
                axisTick: { show: false },
            },
            color:['#FAD20C', '#FF6500','#00FFF2'],
            series: [
                //刻度圆
                {
                    hoverAnimation: false,
                    type: 'pie',
                    z: 2,
                    data: labelItemArr,
                    radius: ['56%', '60%'],
                    zlevel: -2,
                    label: {
                        normal: {
                            position: 'inside',
                            show: false,
                        }
                    },
                },
                {
                    type: 'pie',
                    hoverAnimation:false,　//鼠标悬浮是否有区域弹出动画，false:无 true:有
                    label: {
                        show: true, 
                        color:'#FFFFFF',
                        fontSize: '14',
                        formatter: '{b}\n\n{c}%',
                        position:'outside',
                        padding: [0, -10],
                    },
                    labelLine: {//去除饼图的指示折线label
                        normal: {
                            show: false
                        }
                    }, 
                    radius: ['68%', '75%'],
                    center: ['50%', '50%'],
                    z: 15,
                    data: dataResult
                },
                 {
                    name: '阴影圆',
                    type: 'pie',
                    clockWise: false, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    center: ['50%', '50%'],
                    radius: ['68%', '75%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    z:5,
                    data: [{
                        value: 5,
                        name: '',
                        itemStyle: {
                            normal: {
                                borderWidth: 25,
                                borderColor: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1, //从左到右 0-1
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgb(106,0,210,0.3)'
                                    }, { 
                                        offset: 1,
                                        color: 'rgb(0,166,255,0.3)'
                                    }],
                                },
                            },
                        },
                    }]
                },
            ]
        });
	</script>
</body>
小宋子
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts饼图（带动画效果）
God's asylum的博客
05-19 490
1、外围圆环运用仪表盘gauge，设置仪表盘的起始角度“startAngle”，和终止角度“endAngle”，设置仪表盘最小值“min”和最大值“max”属性来确定仪表盘数值大小， 隐藏仪表盘指针‘pointer’，隐藏detail，设置仪表盘外维宽度和颜色“axisLine”，隐藏刻度“axisTick”，设置进度条progress属性，隐藏刻度标签“axisLabel”，itemStyle属性设置渐变色 2、中间旋转的轮毂也是运用仪表盘来制作的，将仪表盘其他属性隐藏只保留刻度线，给刻度线添加阴影，动态
Echarts实现带刻度的饼图
万能小灯泡的博客
02-26 4936
Echarts版本 以下效果实现使用的echarts版本为 4.X 带刻度的饼图 实现效果: 实现代码： const labelItemArr = []; for (let i = 0; i < 100; ++i) { labelItemArr.push({ value: 1, name: i, itemStyle: { normal: { color: i < 75 ? '#EB4B4B' : '#ccc' } } }, {
16Echarts - 折线图（Line Chart in Cartesian Coordinate System）
阿甘兄
04-30 2298
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&lt...
如何用python画数据图-利用Python绘制数据的瀑布图的教程
weixin_37988176的博客
11-01 782
介绍对于绘制某些类型的数据来说，瀑布图是一种十分有用的工具。不足为奇的是，我们可以使用Pandas和matplotlib创建一个可重复的瀑布图。在往下进行之前，我想先告诉大家我指代的是哪种类型的图表。我将建立一个维基百科文章中描述的2D瀑布图。这种图表的一个典型的用处是显示开始值和结束值之间起“桥梁”作用的+和-的值。因为这个原因，财务人员有时会将其称为一个桥梁。跟我之前所采用的其他例子相似，这种...
1. 创建一个vue实例
洪布斯的博客
12-26 571
vue.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
利用Echarts制作不规则刻度的仪表盘图表示例
老杨头的博客
02-24 3291
Echarts的仪表盘组件是一个比较炫酷的图表，能瞬间提升页面B格。但是默认的仪表盘组件的刻度都是按照设置的最大值均匀分布的。而实际应用中很多场景需要将部分数值区间放大显示到仪表盘上，比如仪表盘前面 50% 显示 0-10 的数值范围后面 50% 就显示 10-50 的范围。这种不规则的刻度不能直接调用 Echarts 提供的方法。需要将数据根据需求进行转换。 本文展示了通过数据转换后实现的不规则刻度仪表盘效果。 1、 let ruler = [0, 10, 25, 50, 100, 200, 50
收入与利润分析瀑布图（堆积瀑布图）
weixin_34387284的博客
11-30 4112
2019独角兽企业重金招聘Python工程师标准>>> ...
非常好用的Echarts饼图和折线图源码Demo
06-14
在这个“非常好用的Echarts饼图和折线图源码Demo”中，我们可以学习到如何利用Echarts库来实现这两种常见的数据展示方式。 首先，让我们深入了解一下Echarts的饼图。饼图是一种用于表示部分与整体之间关系的图形，...
绘制饼图并实现动画效果
10-26
饼图作为一种常见的图表类型，可以直观地显示各部分占整体的比例关系。本篇将深入探讨如何使用SVG（Scalable Vector Graphics）和JavaScript来绘制饼图并实现动态的动画效果。 SVG是一种基于XML的矢量图形格式，它...
Echarts饼图柱图1.rar
05-04
Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如饼图、柱状图、折线图等，用于在Web应用中展示数据。在这个名为"Echarts饼图柱图1.rar"的压缩包中，包含了使用Echarts创建饼图和柱状图的...
Echarts时间轴的刻度优化和自适应
09-13
Echarts是一款广泛应用于数据可视化的JavaScript库，尤其在制作各种图表如折线图、柱状图、饼图等时表现出色。然而，在处理时间轴（timeline）时，Echarts默认的刻度计算策略可能无法满足所有场景的需求。尤其是在...
echarts操作盘中间显示内容、刻度线的修改.docx
01-20
ECharts 是一个流行的数据可视化库，它提供了许多种类的图表组件，包括仪表盘、折线图、柱形图、饼图等。仪表盘组件是 ECharts 中的一种特殊的图表类型，可以用来显示进度、百分比、评分等类型的数据。本文将对 ...
柱状图、堆叠柱状图、瀑布图有什么区别？怎样用Python绘制？
华章IT官方博客
02-10 598
导读：柱状图是当前应用最广泛的图表之一，你几乎每天都可以在电子产品上看到它。它有哪些分类？可以展示哪些数据关系？怎样用Python绘制？本文带你逐一了解。作者：屈希峰，资深Python工...
120_PowerBI堆积瀑布图_R脚本Visual
焦棚子的博客
10-17 758
博客：www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件   一、效果 二、data 三、添加字段 注意红色框标注地方 四、code # 下面用于创建数据帧并删除重复行的代码始终执行，并用作脚本报头: # dataset <- data.frame(dim, wd, values) # 在此处粘贴或键入脚本代码: ==========================================================================
使用echarts仪表盘+柱形图+饼图实现数据可视化
qq_38655872的博客
08-09 1595
最近公司有个需求，使用echarts仪表盘+柱形图+饼图实现数据可视化，现在功能已经完成，在此做个总结，记录这几天的开发成果。
在Power BI中利用DAX实现现金流量表的可视化，使用堆积柱状图模拟出瀑布图。
weixin_38775843的博客
07-30 1096
一个度量值计累加到当前的值，另一个度量值计算累加到前一项的值，以此为确定当前所要的柱形的起点与终点。在这样的情况下，使其它柱子高度归为0，只留一个柱子的高度是不行的，必须要有2个柱子有高度，一个是正数，一个负数，才能实现图中的效果。并且，我们的图中是有类似小计的效果的，也就是将三大类现金流量的净额，用特殊颜色的柱子进行了强调。上面的度量值，也能很好的处理这一点。为此，我们可以将我们所要的柱子分成5种情况，在0线上方的上升部分，在上方的下降部分，在下方的上升部分，在下方的下降部分，和留出空白的部分。
ECharts
sh2001824的博客
08-20 543
ECharts
echarts 横向堆叠柱状图，展示2种状态
不知名的博客
10-15 2742
echarts 横向堆叠柱状图，展示2种状态 例图: 数据部分 //自定义x轴刻度文字 xAxisJudge: [ { val: 0, date: "2020/9/19" }, { val: 24, date: "2020/9/20" }, { val: 48, date: "2020/9/21" }, { val: 72, date: "2020/9/22" }, { val: 96, date: "2020/9/23" }, { val: 1
Coordinate system
qq_66485519的博客
11-14 265
1
echarts params
最新发布
08-31
每个系列代表一组数据，可以是线图、柱状图、饼图等。 4. xAxis和yAxis：x轴和y轴的配置，包括坐标轴类型、刻度、标签等。可以通过设置xAxis和yAxis数组来定义多个坐标轴。 5. tooltip：鼠标悬停时显示的提示框...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值