数据可视化-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 对象 工具箱项文本的样式设置。
相关推荐
轻口味13 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami15 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs：GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235951 小时前
web复习（三）
前端
机器视觉李小白1 小时前
使用 HTML 和 CSS 实现绚丽的节日烟花效果
css·html·烟花·节日·节日祝福
AiFlutter1 小时前
Flutter-底部分享弹窗（showModalBottomSheet）
java·前端·flutter
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库