在之前的文章中，我们学习了如何创建圆环图、嵌套圆环图、蓝丁格尔玫瑰图。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢。
数据可视化-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 | 对象 | 工具箱项文本的样式设置。 |
![[ C++ ] STL---list的模拟实现](https://img-blog.csdnimg.cn/direct/2c6462117984493ea55518ce69eb1662.gif)
