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

Peng0426.2024-03-22 9:22

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

数据可视化-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",
            
        },

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

这是添加了的

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

html 复制代码 
<!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就是我们的一个工具箱，它的作用我用注释注解了，大家可以看着理解一下。

html 复制代码 
// 定义一个名为 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 },  
    },  
},

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

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

html 复制代码 
<!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方法 导入进去即可

示例：

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

html 复制代码 
<!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 对象 工具箱项文本的样式设置。
相关推荐
Манго нектар25 分钟前
JavaScript for循环语句
开发语言·前端·javascript
蒲公英100132 分钟前
vue3学习:axios输入城市名称查询该城市天气
前端·vue.js·学习
天涯学馆1 小时前
Deno与Secure TypeScript：安全的后端开发
前端·typescript·deno
以对_1 小时前
uview表单校验不生效问题
前端·uni-app
Zheng1132 小时前
【可视化大屏】将柱状图引入到html页面中
javascript·ajax·html
程序猿小D2 小时前
第二百六十七节 JPA教程 - JPA查询AND条件示例
java·开发语言·前端·数据库·windows·python·jpa
奔跑吧邓邓子2 小时前
npm包管理深度探索：从基础到进阶全面教程！
前端·npm·node.js
前端李易安3 小时前
ajax的原理，使用场景以及如何实现
前端·ajax·okhttp
汪子熙3 小时前
Angular 服务器端应用 ng-state tag 的作用介绍
前端·javascript·angular.js
Envyᥫᩣ3 小时前
《ASP.NET Web Forms 实现视频点赞功能的完整示例》
前端·asp.net·音视频·视频点赞
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04分享几个惊艳的 Three.js 个人站点05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache