数据可视化-ECharts Html项目实战(10)

在之前的文章中,我们学习了如何在ECharts中编写雷达图,实现特殊效果的插入运用,函数的插入,以及多图表雷达图。想了解的朋友可以查看这篇文章。同时,希望我的文章能帮助到你,如果觉得我的文章写的不错,请留下你宝贵的点赞,谢谢。

数据可视化-ECharts Html项目实战(9)-CSDN博客文章浏览阅读1.5k次,点赞26次,收藏21次。今天的文章,会带着大家深入学习ECharts特殊图表中的雷达图,实现特殊效果的插入运用,函数的插入,以及多图表雷达图。希望我的文章能帮助到正在学习的你,也欢迎各位来本篇文章下一起交流学习,共同进步。https://blog.csdn.net/qq_49513817/article/details/137226435今天的文章,会带着大家深入学习ECharts特殊图表中的双y图以及自定义形状词云图,希望你能在本篇文章中有所收获。 

目录

一、知识回顾

二、双y图

三、自定义形状词云图

拓展-maskImage用法


一、知识回顾

 在上一篇文章中我们学习了雷达图

设置雷达图其实和饼图圆环图差不多,要注意的是要将type类型更改为radar,并且添加数据数组值。

添加视觉组件则需要用到visualMap,并修改里面的配置项达到不同的效果。 

最后就是我们的多图表雷达图。 

​ 

它需要考虑我们的多图表的位置,通过设置不同的位置调整它们之间的间隙,不要让其重叠。

现在,开始今天的学习吧。

二、双y图

在绘制双y图(即具有两个y轴的图表)时,我们需要注意以下几个方面:

  • 数据选择与整理:首先,需要确定哪些数据需要展示在两个不同的y轴上。这些数据通常具有不同的度量单位或量级,如果放在同一个y轴上会导致可读性降低。
  • y轴刻度与范围:对于每个y轴,要分别设置合适的刻度和范围。确保每个y轴的刻度能够清晰地反映对应数据的分布情况,同时避免范围过大或过小导致信息展示不全或过于拥挤。
  • 颜色与标识:为了区分两个不同的y轴及其对应的数据系列,通常会给它们设置不同的颜色和标识。例如,在我的代码中,降水量和蒸发量分别使用了蓝色和红色的y轴,这有助于我们读表时快速区分不同的数据系列。
  • 图例与提示:确保图例清晰地列出了所有的数据系列,并正确对应到各自的y轴。同时,为图表添加提示功能(tooltip),以便读者在鼠标悬停时能够查看具体的数据点信息。
  • 布局与可读性:注意图表的布局,确保两个y轴不会相互干扰,同时保持足够的空间来展示所有的数据点。尽量使用不同的形状或样式来区分不同的数据系列,以提高图表的可读性。
  • 标签与标题:为图表添加适当的标签和标题,说明每个y轴的含义、单位以及图表的整体目的。这有助于读者更好地理解图表的内容和含义。

下面是一个双y图:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8"> 
    <!--引入ECharts脚本-->
    <!-- <第一步引入脚本> -->
    <script src="js\echarts.js"></script> 
</head>
 
<body>
    <!---为ECharts准备一个具备大小(宽高)的DOM-->
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript"> 
        //第二步基于准备好的DOM,初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //第三步指定图表的配置项和数据
    // 指定图表的配置项和数据
var option = {
            backgroundColor:'rgba(128,128,128,0.1)',
            tooltip:{trigger:'axis'},
            legend:{data:['降水量','蒸发量'],left:'center',top:12},
            xAxis:[
                {
                    type:'category',
                    data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis: [
                    {
                    type: 'value',
                    name: '降水量(mL)',
                    min:0,
                    max:250,
                    interval:50,
                    axisLine: {lineStyle:{color:'blue'}},
                    axisLabel: {formatter: '{value}'}
                    },
                    {
                    type: 'value',
                    name: '蒸发量(mL)',
                    min:0,
                    max:200,
                    position:'right',
                    offset:0,
                    axisLine: {lineStyle:{color:'red'}},
                    axisLabel: {formatter: '{value}'}
                    },
                    
                ],
            series:[
                {
                    name:'降水量(ml)',type:'bar',
                    itemStyle:{
                        normal:{
                            color:function(params){
                                var colorList = [
                                    '#fe9f4f','#feca2b','#feca2b','#fed728','#c5ee4a',
                                    '#87ee4a','#46eda9','#47e4ed','#4bbbee','#4f8fa8',
                                    '#4586d8','#4f68d8','#f4E001','#F0805A','#26c0C0'];
                                    return colorList[params.dataIndex]
                            },
                            label:{show:true,position:'top',formatter:'{b}:{c}'}
                        }
                    },
                    data:[50,75,100,150,200,248,220,180,155,130,90,75]
                },
                {
                    name:'蒸发量',type:'line',
                    yAxisIndex:1,
                    itemStyle:{normal:{color:'red'}},
                    data:[58,65,90,120,130,180,150,130,125,110,150,145]
                }
            ]
        };
        myChart.setOption(option);
</script>
</body>
</html>

 在代码中可以看到我们定义了两条y轴,名称分别为降水量和蒸发量。降水量值的范围从0到250,位置默认颜色设置了一个blue蓝色,而蒸发量值的范围设置了从0到200,颜色为red红色,位置也设置了右边,现在运行代码看看效果。

可以看到和我们预期的效果一致,这就是我们需要的一个双y图。 

三、自定义形状词云图

词云图在之前的文章中我们以及学习过了,那么更改为自定义形状,我们需要注意以下几点:

我们需要下载需要的形状图片,最好为黑色填充,我们可以去这里下载iconfont-阿里巴巴矢量图标库

其次我们需要转化图片的格式为base64,再插入到我们的代码中。我们可以去这里转化base64图片在线转换工具

转化完成后该怎么操作呢?看代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>词云图</title>
    
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
</head>
<body>
    
    <div id="main" style="width: 600px;height: 500px; "></div>

    <script >
        var mycharts = echarts.init(document.getElementById("main"));
        var jsonlist = [];
        jsonlist.push(
            {
						name: "Java",
						value: 50
					}, {
						name: "C",
						value: 1150
					},
					{
						name: "Python",
						value: 142
					}, {
						name: "C++",
						value: 135
					},
					{
						name: "C#",
						value: 165
					}, {
						name: "VB.NET",
						value: 175
					},
					{
						name: "Ruby",
						value: 168
					}, {
						name: "Assembly",
						value: 132
					},
					{
						name: "R",
						value: 155
					}, {
						name: "Delphi",
						value: 135
					},
					{
						name: "VB",
						value: 152
					}, {
						name: "Go",
						value: 127
					},
					{
						name: "Delphi",
						value: 188
					}, {
						name: "SAS",
						value: 195
					},
					{
						name: "Perl",
						value: 176
					}, {
						name: "Matlab",
						value: 145
					},
					{
						name: "PL/SQL",
						value: 152
					}, {
						name: "D",
						value: 135
					},
					{
						name: "Scheme",
						value: 193
					}, {
						name: "COBEL",
						value: 174
					},
					{
						name: "Scratch",
						value: 173
					}, {
						name: "Dart",
						value: 178
					},
					{
						name: "ABAP",
						value: 146
					}, {
						name: "Scala",
						value: 168
					},
					{
						name: "Fortran",
						value: 172
					}, {
						name: "LiveCode",
						value: 169
					},
					{
						name: "Lisp",
						value: 178
					}, {
						name: "F#",
						value: 138
					}, 
					{
						name: "Rust",
						value: 356
					}, {
						name: "Kotlin",
						value: 319
					},
					{
						name: "Ada",
						value: 316
					}, {
						name: "Logo",
						value: 261
					},
					{
						name: "SQL",
						value: 138
					}, {
						name: "RPG",
						value: 274
					},
					{
						name: "PHP",
						value: 30
					}, {
						name: "LabVIEW",
						value: 50
					},
					{
						name: "Haskell",
						value: 20
					}, {
						name: "Bash",
						value: 40
					},
					{
						name: "ActionScript",
						value: 90
					}, {
						name: "Transact-SQL",
						value: 40
					},
					{
						name: "PowerShell",
						value: 20
					}, {
						name: "VBScript",
						value: 40
					},
					{
						name: "JavaScript",
						value: 50
					}, {
						name: "TypeScript",
						value: 50
					},
					{
						name: "Objective-C",
						value: 65
					}, {
						name: "Prolog",
						value: 54
					},
					{
						name: "Groovy",
						value: 23
					}, {
						name: "Swift",
						value: 35
					},
					{
						name: "Crystal",
						value: 37
					}, {
						name: "Lua",
						value: 45
					},
					{
						name: "Julia",
						value: 42
					},

                    {
						name: "Delphi",
						value: 43
					}, {
						name: "SAS",
						value: 45
					},
					{
						name: "Perl",
						value: 68
					}, {
						name: "Matlab",
						value: 73
					},
					{
						name: "PL/SQL",
						value: 78
					}, {
						name: "D",
						value: 90
					},
					{
						name: "Scheme",
						value: 92
					}, {
						name: "COBEL",
						value: 93
					},
					{
						name: "Scratch",
						value: 95
					}, {
						name: "Dart",
						value: 98
					},
					{
						name: "ABAP",
						value: 47
					}, {
						name: "Scala",
						value: 74
					},
					{
						name: "Fortran",
						value: 78
					}, {
						name: "LiveCode",
						value: 79
					},
					{
						name: "Lisp",
						value: 156
					}, {
						name: "F#",
						value: 43
					}, 
					{
						name: "Rust",
						value: 46
					}, {
						name: "Kotlin",
						value: 49
					},
					{
						name: "Ada",
						value: 79
					}, {
						name: "Logo",
						value: 67
					},
					{
						name: "SQL",
						value: 53
					}, {
						name: "RPG",
						value: 58
					},
					{
						name: "PHP",
						value: 91
					}, {
						name: "LabVIEW",
						value: 73
					},
					{
						name: "Haskell",
						value: 13
					}, {
						name: "Bash",
						value: 17
					},
					{
						name: "ActionScript",
						value: 12
					}, {
						name: "Transact-SQL",
						value: 26
					},
					{
						name: "PowerShell",
						value: 28
					}, {
						name: "VBScript",
						value: 31
					},
					{
						name: "JavaScript",
						value: 32
					}, {
						name: "TypeScript",
						value: 65
					},
					{
						name: "Objective-C",
						value: 36
					}, {
						name: "Prolog",
						value: 42
					},
					{
						name: "Groovy",
						value: 16
					}, {
						name: "Swift",
						value: 12
					},
					{
						name: "Crystal",
						value: 32
					}, {
						name: "Lua",
						value: 80
					},
					{
						name: "Julia",
						value: 60
					},
                    {
						name: "Lisp",
						value: 178
					}, {
						name: "F#",
						value: 138
					}, 
					{
						name: "Rust",
						value: 356
					}, {
						name: "Kotlin",
						value: 319
					},
					{
						name: "Ada",
						value: 316
					}, {
						name: "Logo",
						value: 261
					},
					{
						name: "SQL",
						value: 138
					}, {
						name: "RPG",
						value: 274
					},
					{
						name: "PHP",
						value: 30
					}, {
						name: "LabVIEW",
						value: 50
					},
					{
						name: "Haskell",
						value: 20
					}, {
						name: "Bash",
						value: 40
					},
					{
						name: "ActionScript",
						value: 90
					}, {
						name: "Transact-SQL",
						value: 40
					},
					{
						name: "PowerShell",
						value: 20
					}, {
						name: "VBScript",
						value: 40
					},
					{
						name: "JavaScript",
						value: 50
					}, {
						name: "TypeScript",
						value: 50
					},
					{
						name: "Objective-C",
						value: 65
					}, {
						name: "Prolog",
						value: 54
					},
					{
						name: "Groovy",
						value: 23
					}, {
						name: "Swift",
						value: 35
					},
					{
						name: "Crystal",
						value: 37
					}, {
						name: "Lua",
						value: 45
					},
					{
						name: "Julia",
						value: 42
					},

                    {
						name: "Delphi",
						value: 43
					}, {
						name: "SAS",
						value: 45
					},
					{
						name: "Perl",
						value: 68
					}, {
						name: "Matlab",
						value: 73
					},
					{
						name: "PL/SQL",
						value: 78
					}, {
						name: "D",
						value: 90
					},
					{
						name: "Scheme",
						value: 92
					}, {
						name: "COBEL",
						value: 93
					},
					{
						name: "Scratch",
						value: 95
					}, {
						name: "Dart",
						value: 98
					},
					{
						name: "ABAP",
						value: 47
					}, {
						name: "Scala",
						value: 74
					},
					{
						name: "Fortran",
						value: 78
					}, {
						name: "LiveCode",
						value: 79
					},
					{
						name: "Lisp",
						value: 156
					}, {
						name: "F#",
						value: 43
					}, 
					{
						name: "Rust",
						value: 46
					}, {
						name: "Kotlin",
						value: 49
					},
					{
						name: "Ada",
						value: 79
					}, {
						name: "Logo",
						value: 67
					},
					{
						name: "SQL",
						value: 53
					}, {
						name: "RPG",
						value: 58
					},
					{
						name: "PHP",
						value: 91
					}, {
						name: "LabVIEW",
						value: 73
					},
					{
						name: "Haskell",
						value: 13
					}, {
						name: "Bash",
						value: 17
					},
					{
						name: "ActionScript",
						value: 12
					}, {
						name: "Transact-SQL",
						value: 26
					},
					{
						name: "PowerShell",
						value: 28
					}, {
						name: "VBScript",
						value: 31
					},
					{
						name: "JavaScript",
						value: 32
					}, {
						name: "TypeScript",
						value: 65
					},
					{
						name: "Objective-C",
						value: 36
					}, {
						name: "Prolog",
						value: 42
					},
					{
						name: "Groovy",
						value: 16
					}, {
						name: "Swift",
						value: 12
					},
					{
						name: "Crystal",
						value: 32
					}, {
						name: "Lua",
						value: 80
					},
					{
						name: "Julia",
						value: 60
					},
                    
    );
    // 图片的base64编码
        image1= "data:image/png;base64,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"
        var maskResource = new Image()
        maskResource.src=image1;
        var option ={
            //设置标题,居中显示
            title:{
                text: 'E词云图',
                left:'center',
             },
            //数据可以点击
            tooltip:{

            },

            series:[
                {
                    maskImage:maskResource,
                    //词的类型
                    type: 'wordCloud',
                    //设置字符大小范围
                    sizeRange:[6,78],
                    rotationRange:[-45,90],
                    textStyle: {
                        normal:{
                            //生成随机的字体颜色
                            color:function () {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',')+')';

                            }
                        }

                    },
                       data:jsonlist

                 }
            ]

        };
        //加载图像,将数据放在图像中
        maskResource.onload = function(){
            mycharts.setOption(option)

            };
    </script>

</body>
</html>

首先我们创建了一个image1来存放刚才图片转成的base64码,再给到我们的maskResource.src,最后在series中添加 maskImage:maskResource,末尾修改成        maskResource.onload = function(){ mycharts.setOption(option)};即可

 

现在,运行代码看看效果,我的代码图片是一个爱心

 可以看到我们的词云图成功变成一个爱心。

在这里面我们有一点需要注意,词云图的数据不要过少且大小过大,否则可能会显示不明显看不出效果。

拓展-maskImage用法

属性名描述示例值
image遮罩图片的路径或 DataURL'path/to/your/image.png' 或 DataURL
width遮罩图片的宽度(像素)500
height遮罩图片的高度(像素)500
silent是否静默加载图片false

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/537184.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python基于Django的微博热搜、微博舆论可视化系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

host文件nginx代理 综合理解

之前一直理解得很糙 导致遇到问题很迷糊 今天经过大佬两句话讲明白了 特此记录 host文件 首先host做了代理 也就是对浏览器的DNS寻址做了拦截 具体原理可以参照当我们在地址栏输入URL的时候浏览器发生了什么 例如127.0.0.1 www.baidu.com 将 127.0.0.1 www.baidu.com 链接自…

春游江淮|出发,上宁国“村游”去

竹川村、赤岸村打卡佳处&#xff0c;春花烂漫,春意盎然,胡乐镇竹川村、赤岸村的油菜花,是宁国春天不可错过的风光。等大片大片的油菜花盛放,与悠悠远山交相辉映,可以来此骑行、散步,静静欣赏美好的春日风光。 山门村 世外桃源经过奇特的“山门洞”,来到山门村,村内古木参天,在春…

Cloudshark数据包分析功能介绍

什么是CloudShark CloudShark是一种基于Web的数据包分析平台&#xff0c;可以认为是wiresshark的cloud版本&#xff0c;但是其在威胁分析等方面比Wireshark的功能强大&#xff0c;如下是他们的主要区别。 Wireshark VS Cloudshark Wireshark定位是一款本地开源的网络数据包分…

2024年第十四届MathorCup数学应用挑战赛B题解题思路

B题https://mbd.pub/o/bread/ZZ6Wm5dx 问题1:对于附件I(Pre_test文件夹)给定的三张甲骨文原始拓片图 片进行图像预处理&#xff0c;提取图像特征&#xff0c;建立甲骨文图像预处理模型&#xff0c;实现对 甲骨文图像干扰元素的初步判别和处理。 针对问题1&#xff0c;对于附件…

考虑预同步的虚拟同步机T型三电平逆变器并离网MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 模型简介 三相 T 型三电平逆变器电路如图所示&#xff0c;逆变器主回路由三个单相 T 型逆变器组成。 直流侧输入电压为 UPV&#xff0c;直流侧中点电位 O 设为零电位&#xff0c;交流侧输出侧是三相三线制连…

Linux的学习之路:6、Linux编译器-gcc/g++使用

摘要 本文主要是说一些gcc的使用&#xff0c;g和gcc使用一样就没有特殊讲述。 目录 摘要 一、背景知识 二、gcc如何完成 1、预处理(进行宏替换) 2、编译&#xff08;生成汇编&#xff09; 3、汇编&#xff08;生成机器可识别代码 4、链接&#xff08;生成可执行文件或…

如何调节变阻器的电阻值?

变阻器是一种可以改变电阻值的电子元件&#xff0c;广泛应用于各种电子设备中。调节变阻器的电阻值可以实现对电路中电流和电压的控制&#xff0c;从而实现对设备的控制和调节。下面是如何调节变阻器的电阻值的方法&#xff1a; 了解变阻器的基本原理&#xff1a;变阻器主要由固…

统信UOS桌面操作系统1060上隐藏Windows磁盘

原文链接&#xff1a;统信UOS桌面操作系统1060上隐藏Windows磁盘 Hello&#xff0c;大家好啊&#xff01;继之前我们讨论了如何在统信UOS桌面操作系统1060上安装双系统之后&#xff0c;今天我要给大家介绍的是&#xff0c;在这个基础上如何隐藏Windows磁盘分区。这样做可以让你…

CDN优化

一、是什么 CDN (全称 Content Delivery Network)&#xff0c;即内容分发网络 构建在现有网络基础之上的智能虚拟网络&#xff0c;依靠部署在各地的边缘服务器&#xff0c;通过中心平台的负载均衡、内容分发、调度等功能模块&#xff0c;使用户就近获取所需内容&#xff0c;降…

IT行业网络安全守护者-行云管家云堡垒机

IT行业即信息技术行业&#xff0c;是一个涵盖广泛的行业领域&#xff0c;主要涉及与信息的处理、存储、传输和应用相关的技术。对于IT行业而言&#xff0c;保障数据安全以及网络安全至关重要&#xff0c;一不小心就容易造成数据泄露事件。今天我们小编就给大家介绍一下IT行业网…

Mongodb入门--头歌实验MongoDB 文档的高级查询操作

数据库存储了大量的数据&#xff0c;当我们需要特定的数据时就要使用查询方法&#xff0c;根据一定的条件&#xff0c;筛选出我们想要的数据&#xff0c;前一章我们简单介绍了条件操作符&#xff08;<、<、>、>、!等&#xff09;&#xff0c;在这一章中我们将更全面…

【Linux学习】初识Linux指令(一)

文章目录 1.指令操作与图形化界面操作1.什么是指令操作&#xff0c;什么是图形化界面操作&#xff1f; 2.Linux下基本指令1.Linux下的复制粘贴2.Linux两个who命令3.补充知识4.pwd指令5. ls 指令6.cd 指令1.目录树2.相对路径与绝对路劲3.常用cd指令 7.tree指令8. touch指令9.sta…

从浅入深理解JAVA异常

从浅入深理解JAVA异常 一、什么是异常以及异常的分类二、异常的分类1、常见的系统错误2、常见的编译时异常3、常见的运行时异常 三、创建异常1、创建JAVA中已经存在的异常 -- throw关键字1.1 语法1.2 使用2、自定义异常&#xff08;1&#xff09;区分你要创建哪种异常&#xff…

volatile 关键字

我们先看这段代码 class MyCounter {public int flag 0; }public class ThreadDemo15 {public static void main(String[] args) {MyCounter myCounter new MyCounter();Thread t1 new Thread(() -> {while (myCounter.flag 0) {// 这个循环体咱们就空着}System.out.pr…

平板设备IP地址设置指南

在数字化时代&#xff0c;平板电脑作为便携且功能强大的设备&#xff0c;广泛应用于日常生活和工作中。为了确保平板能够正常接入网络并与其他设备进行通信&#xff0c;正确设置IP地址是至关重要的。虎观小二将为您介绍如何设置平板的IP地址&#xff0c;帮助您轻松完成网络配置…

JavaScript ECMAScript标准的与时俱进:从ES6至ES14的革新之路与关键技术特性剖析

ECMAScript&#xff08;通常缩写为ES&#xff09;是一种标准化的脚本语言规范&#xff0c;由ECMA International&#xff08;前身为European Computer Manufacturers Association&#xff0c;欧洲计算机制造商协会&#xff09;制定。自1997年发布首个版本以来&#xff0c;ECMAS…

嵌入式|蓝桥杯STM32G431(HAL库开发)——CT117E学习笔记13:RTC实时时钟

系列文章目录 嵌入式|蓝桥杯STM32G431&#xff08;HAL库开发&#xff09;——CT117E学习笔记01&#xff1a;赛事介绍与硬件平台 嵌入式|蓝桥杯STM32G431&#xff08;HAL库开发&#xff09;——CT117E学习笔记02&#xff1a;开发环境安装 嵌入式|蓝桥杯STM32G431&#xff08;…

PAN1026蓝牙收发芯片

1 概述 PAN1026 系列产品是一款低成本、高集成度的无线 BLE 数据收发芯片&#xff0c;工作在射频 2400MHz ~2483MHz 的通用 ISM 频段。具有较低的系统应用成本&#xff0c;只需要一个 MCU 和少量外部无 源组件即可构建满足无线应用的系统。同时&#xff0c;操作方式非…

七大免费SSL证书获取方法

为了保护用户数据的安全&#xff0c;越来越多的网站开始使用SSL证书。SSL证书是一种数字证书&#xff0c;它能够为网站提供一个安全的加密连接&#xff0c;从而保护用户的敏感信息。然而&#xff0c;购买SSL证书需要一定的费用&#xff0c;这对于一些小型企业或个人来说可能是一…