在之前的文章中，我们学习了如何创建圆环图、嵌套圆环图、蓝丁格尔玫瑰图。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢。
数据可视化-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 | 对象 | 工具箱项文本的样式设置。 |
)
