org后缀做网站行,网站创建的一般步骤,国内公司网站需要备案吗,网络域名ip查询在之前的文章中#xff0c;我们学习了如何创建圆环图、嵌套圆环图、蓝丁格尔玫瑰图。想了解的朋友可以查看这篇文章。同时#xff0c;希望我的文章能帮助到你#xff0c;如果觉得我的文章写的不错#xff0c;请留下你宝贵的点赞#xff0c;谢谢。
数据可视化-ECharts Htm…在之前的文章中我们学习了如何创建圆环图、嵌套圆环图、蓝丁格尔玫瑰图。想了解的朋友可以查看这篇文章。同时希望我的文章能帮助到你如果觉得我的文章写的不错请留下你宝贵的点赞谢谢。
数据可视化-ECharts Html项目实战3-CSDN博客文章浏览阅读1.2k次点赞36次收藏23次。今天的文章我会从上一篇结尾的案例开始带着大家在VScode中绘制ECharts里的圆环图、嵌套圆环图、蓝丁格尔玫瑰图。并带着大家开始开始真正的任务实现。希望大家能在本篇文章有所收货并欢迎各位来这一起交流共同进步。https://blog.csdn.net/qq_49513817/article/details/136803159?spm1001.2014.3001.5501今天的文章会正式进入ECharts工具组建的学习带着大家在VS code中设置工具箱设置滚动标题和插入照片。
目录
一、滚动图例
二、工具箱
三、插入照片
拓展-工具箱操作 一、滚动图例 在我们的ECharts中要想实现滚动图例还是要在我们的legend中下功夫具体如何操作呢
首先我们需要把我们legend属性设置为scroll因为在ECharts不设置它它会默认为普通样式。 legend:{type:scroll,data:[黄鹤楼, 张家界,九寨沟,东湖,故宫],left:260,top:bottom,},
就像这样那我们来进行 对比看一下加与不加的区别 这是添加了的 这是没有添加的区别还是有的如果我的盒子设置的比较小那它显示的肯定就不怎么好看了。
!DOCTYPE html
headmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://cdn.jsdelivr.net/npm/echarts5.5.0/dist/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height: 400px;/divscript typetext/javascriptvar 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
headmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://cdn.jsdelivr.net/npm/echarts5.5.0/dist/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height: 400px;/divscript typetext/javascriptvar 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
headmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://cdn.jsdelivr.net/npm/echarts5.5.0/dist/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height: 400px;/divscript typetext/javascriptvar 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对象工具箱项文本的样式设置。
