数据可视化-ECharts Html项目实战（4）

在之前的文章中，我们学习了如何创建圆环图、嵌套圆环图、蓝丁格尔玫瑰图。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢。

数据可视化-ECharts Html项目实战（3）-CSDN博客文章浏览阅读1.2k次，点赞36次，收藏23次。​今天的文章，我会从上一篇结尾的案例开始，带着大家在VScode中绘制ECharts里的圆环图、嵌套圆环图、蓝丁格尔玫瑰图。并带着大家开始开始真正的任务实现。希望大家能在本篇文章有所收货，并欢迎各位来这一起交流共同进步。​https://blog.csdn.net/qq_49513817/article/details/136803159?spm=1001.2014.3001.5501今天的文章，会正式进入ECharts工具组建的学习，带着大家在VS code中设置工具箱，设置滚动标题和插入照片。

目录

一、滚动图例

二、工具箱

三、插入照片

拓展-工具箱操作

一、滚动图例

 在我们的ECharts中，要想实现滚动图例，还是要在我们的legend中下功夫，具体如何操作呢？

首先，我们需要把我们legend属性设置为scroll，因为在ECharts，不设置它，它会默认为普通样式。

 legend:{
            type:"scroll",
            data:['黄鹤楼', '张家界','九寨沟','东湖','故宫'],
            left:260,
            top:"bottom",
            
        },

就像这样，那我们来进行 对比看一下加与不加的区别

这是添加了的

这是没有添加的，区别还是有的，如果我的盒子设置的比较小，那它显示的肯定就不怎么好看了。 

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/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'));
    var option={
        title:{
            text:'景区门票价格',
            textStyle:{
                color:'red'
            },
            left:15,
            top:0
            //subtext:'2024年3月13日'
        },
        tooltip: {//提示框组建
                trigger: 'axis',
                backgroundColor:'#ffccff',//提示框背景颜色
                borderColor:'#cc33cc',//边框颜色
                borderWidth:'3'//边框宽度
            },
            
        legend:{
            type:"scroll",
            data:['黄鹤楼', '张家界','九寨沟','东湖','故宫'],
            left:260,
            top:"bottom",
            
        },
        calculabe:true,
        xAxis:[
            {
                type:'category',
                data:['2013年','2014年','2015年','2016年','2017年','2018年','2019年']
            },
        ],
        yAxis:[
            {
                type:'value'
            },
        ],
        series:[
            {
                name:'故宫',
                type:'line',
                step:'start',
                data:[120,182,191,145,167,178,189]
            },
            {
                name:'张家界',
                type:'line',
                step:'middle',
                data:[245,247,267,278,289,310,320]
            },
            {
                name:'九寨沟',
                type:'line',
                step:'end',
                data:[255,234,276,321,345,367,380]
            },
            {
                name:'东湖',
                type:'line',
                step:'start',
                data:[150,199,226,178,145,188,210]
            },
            {
                name:'黄鹤楼',
                type:'line',
                step:'start',
                data:[178,189,199,209,219,229,239]
            },
        ],
    };
    myChart.setOption(option);
   </script> 
</body>
</html>

二、工具箱

在我们的ECharts中，想要做好一个图表工具箱是必不可少的。在之前的文章中，就说过了toolbox就是我们的一个工具箱，它的作用我用注释注解了，大家可以看着理解一下。

// 定义一个名为 toolbox 的对象，该对象通常用于配置图表工具箱的功能  
toolbox: {  
    // 设置工具箱是否显示  
    show: true,  
      
    // 定义一个名为 feature 的对象，用于配置工具箱内的具体功能  
    feature: {  
        // 配置标记功能，允许用户标记图表上的数据点  
        mark: { show: true },  
          
        // 配置数据视图功能，允许用户查看图表的数据并可能编辑  
        dataView: { show: true, readOnly: false },  
          
        // 配置图表的类型切换功能，允许用户在折线图（line）和柱状图（bar）之间切换  
        magicType: { show: true, type: ['line', 'bar'] },  
          
        // 配置重置功能，允许用户将图表恢复到初始状态  
        restore: { show: true },  
          
        // 配置保存为图片功能，允许用户将当前图表保存为图片  
        saveAsImage: { show: true },  
    },  
},

 

这就是我们的一个工具箱 ，它的功能非常多，我在文章末尾会给大家列出来的。

现在，我们就把它加到代码中。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/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'));
    var option={
        title:{
            text:'景区门票价格',
            textStyle:{
                color:'red'
            },
            left:15,
            top:0
            //subtext:'2024年3月13日'
        },
        tooltip: {//提示框组建
                trigger: 'axis',
                backgroundColor:'#ffccff',//提示框背景颜色
                borderColor:'#cc33cc',//边框颜色
                borderWidth:'3'//边框宽度
            },
            toolbox: {//工具箱
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            
        legend:{
            type:"scroll",
            data:['黄鹤楼', '张家界','九寨沟','东湖','故宫'],
            left:260,
            top:"bottom",
            
        },
        calculabe:true,
        xAxis:[
            {
                type:'category',
                data:['2013年','2014年','2015年','2016年','2017年','2018年','2019年']
            },
        ],
        yAxis:[
            {
                type:'value'
            },
        ],
        series:[
            {
                name:'故宫',
                type:'line',
                step:'start',
                data:[120,182,191,145,167,178,189]
            },
            {
                name:'张家界',
                type:'line',
                step:'middle',
                data:[245,247,267,278,289,310,320]
            },
            {
                name:'九寨沟',
                type:'line',
                step:'end',
                data:[255,234,276,321,345,367,380]
            },
            {
                name:'东湖',
                type:'line',
                step:'start',
                data:[150,199,226,178,145,188,210]
            },
            {
                name:'黄鹤楼',
                type:'line',
                step:'start',
                data:[178,189,199,209,219,229,239]
            },
        ],
    };
    myChart.setOption(option);
   </script> 
</body>
</html>

三、插入照片

想要实现照片插入要先创建一个image文件夹，并把我们的照片放进去。 

再用icon方法 导入进去即可

示例：

可以看到我们的图例被替换成我们的照片了。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/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'));
    var option={
        title:{
            text:'景区门票价格',
            textStyle:{
                color:'red'
            },
            left:15,
            top:0
            //subtext:'2024年3月13日'
        },
        tooltip: {//提示框组建
                trigger: 'axis',
                backgroundColor:'#ffccff',//提示框背景颜色
                borderColor:'#cc33cc',//边框颜色
                borderWidth:'3'//边框宽度
            },
            toolbox: {//工具箱
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            
        legend:{
            type:"scroll",
            data:[{name:'黄鹤楼',
            icon:'image/1.jpg',
            }
            ,'张家界','九寨沟','东湖','故宫'],
            left:260,
            top:"bottom",
            
        },
        calculabe:true,
        xAxis:[
            {
                type:'category',
                data:['2013年','2014年','2015年','2016年','2017年','2018年','2019年']
            },
        ],
        yAxis:[
            {
                type:'value'
            },
        ],
        series:[
            {
                name:'故宫',
                type:'line',
                step:'start',
                data:[120,182,191,145,167,178,189]
            },
            {
                name:'张家界',
                type:'line',
                step:'middle',
                data:[245,247,267,278,289,310,320]
            },
            {
                name:'九寨沟',
                type:'line',
                step:'end',
                data:[255,234,276,321,345,367,380]
            },
            {
                name:'东湖',
                type:'line',
                step:'start',
                data:[150,199,226,178,145,188,210]
            },
            {
                name:'黄鹤楼',
                type:'line',
                step:'start',
                data:[178,189,199,209,219,229,239]
            },
        ],
    };
    myChart.setOption(option);
   </script> 
</body>
</html>

快去试试把。

拓展-工具箱操作

关键词类型用法描述
toolbox对象启用并配置工具箱。工具箱包含一组快捷操作工具。
toolbox.show布尔值是否显示工具箱组件。默认值为false。
toolbox.feature对象定义工具箱中的各项功能。
toolbox.feature.mark对象标记功能。允许用户在图表上进行标记。
toolbox.feature.mark.show布尔值是否显示标记功能。
toolbox.feature.dataView对象数据视图功能。允许用户以表格形式查看原始数据。
toolbox.feature.dataView.show布尔值是否显示数据视图功能。
toolbox.feature.dataView.readOnly布尔值数据视图是否只读。
toolbox.feature.magicType对象魔法类型切换功能。允许用户在折线图、柱状图等类型之间切换。
toolbox.feature.magicType.show布尔值是否显示魔法类型切换功能。
toolbox.feature.magicType.type数组支持的图表类型列表。例如：['line', 'bar', 'pie']。
toolbox.feature.restore对象还原功能。将图表重置为初始状态。
toolbox.feature.restore.show布尔值是否显示还原功能。
toolbox.feature.saveAsImage对象保存为图片功能。允许用户将当前图表保存为图片。
toolbox.feature.saveAsImage.show布尔值是否显示保存为图片功能。
toolbox.feature.saveAsImage.type字符串保存的图片格式，通常为'png'或'jpeg'。
toolbox.feature.saveAsImage.pixelRatio数字导出图片的分辨率比例。默认为2。
toolbox.feature.saveAsImage.backgroundColor字符串导出图片时的背景色。
toolbox.iconStyle对象工具箱图标的样式设置。
toolbox.iconStyle.image字符串工具箱图标的图片路径或URL。
toolbox.itemStyle对象工具箱项的样式设置。
toolbox.itemStyle.color字符串工具箱项的颜色。
toolbox.itemStyle.borderColor字符串工具箱项的边框颜色。
toolbox.itemStyle.borderWidth数字工具箱项的边框宽度。
toolbox.itemStyle.shadowColor字符串工具箱项的阴影颜色。
toolbox.itemStyle.shadowBlur数字工具箱项的阴影模糊大小。
toolbox.itemStyle.shadowOffsetX数字工具箱项的阴影水平偏移量。
toolbox.itemStyle.shadowOffsetY数字工具箱项的阴影垂直偏移量。
toolbox.itemStyle.textStyle对象工具箱项文本的样式设置。

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

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

相关文章

鸿蒙一次开发，多端部署（二）从一个例子开始

鸿蒙一次开发，多端部署（二）从一个例子开始

本章通过一个天气应用&#xff0c;介绍一多应用的整体开发过程&#xff0c;包括UX设计、工程管理及调试、页面开发等。 UX设计 本示例中的天气应用包含主页、管理城市和添加城市三个页面&#xff0c;其中主页中又包含菜单和更新间隔两个弹窗&#xff0c;基本业务逻辑如下所示…
阅读更多...
2024.3.21学习笔记

2024.3.21学习笔记

今日学习韩顺平java0200_韩顺平Java_对象机制练习_哔哩哔哩_bilibili 今日学习p246-p251 this关键词 java虚拟机会给每个对象分配this, 代表当前对象 this内存机制 this关键字可以用来访问类的属性、方法、构造器 this用以区分当前类的属性和局部变量 访问成员方法的语法…
阅读更多...
《云计算：数字时代的引擎》

《云计算：数字时代的引擎》

在数字化时代&#xff0c;云计算技术以其强大的计算能力和灵活的应用方式&#xff0c;成为推动各行各业发展的引擎。本文将围绕云计算的技术进展、技术原理、行业应用案例、面临的挑战与机遇以及未来趋势进行详细探讨。 云计算的技术进展 云计算的技术进展涵盖了多个方面&…
阅读更多...
Redis入门到入坑（二）

Redis入门到入坑（二）

Redis入门到入坑&#xff08;二&#xff09; Redis 数据持久化简介Rdb方式持久化Aof方式数据持久化 Redis事务处理Redis事务简介Redis事务控制实践 Redis架构设计Redis主从复制Redis哨兵模式Redis集群高可用 Redis在SpringBoot工程中的综合应用业务描述准备工作业务逻辑代码设计…
阅读更多...
[ C++ ] STL---list的模拟实现

[ C++ ] STL---list的模拟实现

目录 结点类的模拟实现 迭代器类的模拟实现 构造函数 前置与后置 前置- -与后置 - - 与 !运算符重载 * 运算符重载 -> 运算符重载 普通迭代器总体实现代码 list类的实现 list类的成员变量 构造函数 迭代器 insert(&#xff09; erase() push_front/push_back…
阅读更多...
C#探索之路基础篇(2)：接口Interface的概念、实现、应用范围

C#探索之路基础篇(2)：接口Interface的概念、实现、应用范围

文章目录 1 概念2 示例代码&#xff1a;2.1 简单接口的实现2.2 简单的使用接口2.3 使用接口呈现多态性2.4 通过接口实现一个数组迭代器2.5 通过接口来实现松耦合的关系2.6 使用接口实现可扩展、便利性 3 使用范围与时机4 注意事项 不知道大家在学习的过程中&#xff0c;有没有反…
阅读更多...
AI原生安全 亚信安全首个“人工智能安全实用手册”开放阅览

AI原生安全 亚信安全首个“人工智能安全实用手册”开放阅览

不断涌现的AI技术新应用和大模型技术革新&#xff0c;让我们感叹从没有像今天这样&#xff0c;离人工智能的未来如此之近。 追逐AI原生&#xff1f;企业组织基于并利用大模型技术探索和开发AI应用的无限可能&#xff0c;迎接生产与业务模式的全面的革新。 我们更应关心AI安全原…
阅读更多...
机器学习——决策树（四）后剪枝

机器学习——决策树（四）后剪枝

观前提示&#xff1a;这是本人决策树相关的第四篇博文&#xff0c;前3篇的内容如下&#xff1a; 1、建造训练集的决策树【完成结点类编写和建树过程】 2、用验证集评估模型、选出泛化较好的数据划分方式训练模型 3、预剪枝 读者可根据需要从上方《机器学习》专栏中查阅对应…
阅读更多...
【论文笔记】RobotGPT: Robot Manipulation Learning From ChatGPT

【论文笔记】RobotGPT: Robot Manipulation Learning From ChatGPT

【论文笔记】RobotGPT: Robot Manipulation Learning From ChatGPT 文章目录 【论文笔记】RobotGPT: Robot Manipulation Learning From ChatGPTAbstractI. INTRODUCTIONII. RELATED WORK1. LLMs for Robotics2. Robot Learning III. METHODOLOGY1. ChatGPT Prompts for Robot …
阅读更多...
基于Python3的数据结构与算法 - 16 链表

基于Python3的数据结构与算法 - 16 链表

目录 链表 1. 创建链表 2. 链表的插入和删除 3. 双链表 4. 链表总结 链表 链表是由一系列节点组成的元素集合。每个节点包含两部分&#xff0c;数据域item和指向下一个节点得指针next。通过节点之间的相互连接&#xff0c;最终串联成一个链表。 class Node:def __init…
阅读更多...
数据结构——循环队列的实现

数据结构——循环队列的实现

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…
阅读更多...
Python 小而精Web开发框架Flask精通指南

Python 小而精Web开发框架Flask精通指南

文章目录 Flask 简介说明Flask 核心依赖Flask 常用扩展Flask 快速启动工作流程代码示例Flask 快速启动控制台Flask 快速启动效果 Flask 启动参数Flask 路由定义Flask 支持的 HTTP 请求方式&#xff1a;路由装饰器中的参数 Flask 路由参数Flask 路由蓝图路由蓝图的优点路由蓝图的…
阅读更多...
痛失offer的八股

痛失offer的八股

java面试八股 mysql篇&#xff1a; 事物的性质&#xff1a; 事物的性质有acid四特性。 a&#xff1a;automic&#xff0c;原子性&#xff0c;要么全部成功&#xff0c;要么全部失败&#xff0c;mysql的undolog&#xff0c;事物在执行的时候&#xff0c;mysql会进行一个快照读…
阅读更多...
获取KEGG通路的基因列表 做单细胞GSEA、GSVA分析

获取KEGG通路的基因列表 做单细胞GSEA、GSVA分析

使用KEGG通路的基因列表进行单细胞GSEA GSVA分析的过程&#xff0c;我们需要遵循以下步骤&#xff1a; 获取KEGG通路的基因列表&#xff1a;这通常涉及使用专门的R包&#xff0c;如KEGGREST或biomaRt&#xff0c;来查询KEGG数据库并检索特定通路的基因列表。 准备单细胞表达数…
阅读更多...
详解JS原型与原型链的关系

详解JS原型与原型链的关系

1、构造函数原型prototype (1)、构造函数通过原型分配的函数是所有对象所共享的&#xff1b; (2)、JavaScript规定&#xff0c;每一个构造函数都有一个prototype属性&#xff0c;指向另一个对象&#xff1b; (3)、注意这个prototype就是一个对象&#xff0c;这个对象的所有属性…
阅读更多...
Scikit-Learn逻辑回归(二)

Scikit-Learn逻辑回归(二)

Scikit-Learn逻辑回归二&#xff1a;多项式与正则化 1、多项式回归回顾1.1、逻辑回归为什么要使用多项式1.2、多项式回归及原理 2、逻辑回归与多项式 1、多项式回归回顾 本文接上篇&#xff1a;Scikit-Learn逻辑回归(一) 上篇中&#xff0c;我们详细介绍了逻辑回归的概念、原理…
阅读更多...
使用 React antd 的ProFormSelect组件 搜索查询 多选的写法

使用 React antd 的ProFormSelect组件 搜索查询 多选的写法

使用 React antd 的ProFormSelect组件 搜索查询 多选的写法 需求&#xff1a;需要一个搜索框&#xff0c;可以选择员工&#xff0c;&#xff08;员工人数多无法一次性获取&#xff0c;全部放入options中&#xff09;&#xff0c;所以需要使用搜索功能&#xff0c;而且是可以多…
阅读更多...
XR“黑话”

XR“黑话”

MTP&#xff08;Motion-To-Photon Latency&#xff09;&#xff1a;实际人体发生运动到图像显示到屏幕上的时间延迟。早期一些vr产生晕动症的主要原因。 ATW&#xff08;Asynchronous Timewarp&#xff09;&#xff1a;主要解决两个问题&#xff0c;一是延迟&#xff0c;二是补…
阅读更多...
CSS弹性盒模型（学习笔记）

CSS弹性盒模型（学习笔记）

一、厂商前缀 1.1 作用 解决浏览器对C3新特性的兼容&#xff0c;不同的浏览器厂商&#xff0c;定义了自己的厂商前缀 1.2 语法 浏览器 厂商前缀内核(渲染引擎)&#xff1a;解析htmlcssjs谷歌 -webkit-blink苹果-webkit-webkit欧朋-o-blink火狐 -moz-geckoIE-ms- trid…
阅读更多...
OpenCV4.9.0开源计算机视觉库安装教程

OpenCV4.9.0开源计算机视觉库安装教程

返回&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 引言&#xff1a;OpenCV系列文章中的安装部分今天全部完成了&#xff0c;为了读者更方便阅读&#xff0c;大家可以按下列索引前往&#xff0c;成文较为仓促有错漏在所难免&#xff0c;欢迎大家指正…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站