数据可视化-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 对象 工具箱项文本的样式设置。
相关推荐
软件小伟6 分钟前
Vue3+element-plus 实现中英文切换（Vue-i18n组件的使用）
前端·javascript·vue.js
醉の虾27 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧36 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解？应该在哪些方面可以更好的使用！
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具（DevTools）更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿