大连网站建设找简维科技,wordpress 工作室,开网店哪个平台最好,威海做网站公司哪家好欢迎来到《小5讲堂》 大家好#xff0c;我是全栈小5。 这是《前端》系列文章#xff0c;每篇文章将以博主理解的角度展开讲解#xff0c; 特别是针对知识点的概念进行叙说#xff0c;大部分文章将会对这些概念进行实际例子验证#xff0c;以此达到加深对知识点的理解和掌握… 欢迎来到《小5讲堂》 大家好我是全栈小5。 这是《前端》系列文章每篇文章将以博主理解的角度展开讲解 特别是针对知识点的概念进行叙说大部分文章将会对这些概念进行实际例子验证以此达到加深对知识点的理解和掌握。 温馨提示博主能力有限理解水平有限若有不对之处望指正 目录 背景标题主标题副标题 柱子信息鼠标信息可视化库Vue影响文章推荐 背景
前面几篇文章在做一个数据统计图表的功能对于图表第三方插件接触比较多的是echarts 由于隔了好长时间没怎么用这个插件很多具体细节使用基本都忘了因此本篇文章将回顾柱状图常见功能
标题
主标题
设置主标题以及主标题的样式居中显示并设置字体为橙色、加粗、18px像素大小 要设置标题的样式可以在 title 属性中使用 textStyle 属性。
option {title:{text:一周产品销量,left:center,textStyle:{color:#f60,fontSize:18,fontWeight:bold}},xAxis: {type: category,data: [星期一, 星期二, 星期三, 星期四, 星期五, 星期六, 星期天]},yAxis: {type: value},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: bar}]
};1left:‘center’表示标题居中显示 2textStyle属性下就是设置主标题的样式
副标题
设置 副标题以及 副题的样式居中显示并设置字体加粗 使用的属性是subtext和subtextStyle
option {title:{text:一周产品销量,left:center,textStyle:{color:#f60,fontSize:18,fontWeight:bold},subtext:单位件,subtextStyle:{fontWeight:bold}},xAxis: {type: category,data: [星期一, 星期二, 星期三, 星期四, 星期五, 星期六, 星期天]},yAxis: {type: value},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: bar}]
};柱子信息
直接在取消柱子上方显示具体数据信息以及自定义信息比如100%数字后面加一个百分号 1show显示节点上的文本信息 2position文本位置可以根据需要调整为 ‘top’, ‘bottom’, ‘inside’, ‘insideTop’, 等 top表示在节点上方 inside表示在节点里 3formatter显示的文本内容这里使用节点的值可以自定义显示值 4textStyle文本颜色
option {title:{text:一周产品销量,left:center,textStyle:{color:#f60,fontSize:18,fontWeight:bold},subtext:单位件,subtextStyle:{fontWeight:bold}},xAxis: {type: category,data: [星期一, 星期二, 星期三, 星期四, 星期五, 星期六, 星期天]},yAxis: {type: value},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: bar,label:{show:true,position:top,formatter:function(data){return data.value件}}}]
};鼠标信息
鼠标移动到柱子上时能够自动弹出数据进行显示使用的属性是tooltip
option {title:{text:一周产品销量,left:center,textStyle:{color:#f60,fontSize:18,fontWeight:bold},subtext:单位件,subtextStyle:{fontWeight:bold}},tooltip:{trigger: axis,formatter:function(datas){return datas[0].namedatas[0].value件}},xAxis: {type: category,data: [星期一, 星期二, 星期三, 星期四, 星期五, 星期六, 星期天]},yAxis: {type: value},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: bar,label:{show:true,position:top,formatter:function(data){return data.value件}}}]
};可视化库
常见前端数据可视化库 1.D3.js
D3.jsData-Driven Documents是一个强大的JavaScript库用于创建基于数据的交互式可视化图表。提供了强大的数据绑定和DOM操作功能支持各种图表类型的定制和创建。Mike Bostock及社区贡献者
2.Chart.js
Chart.js 是一个简单而灵活的图表库支持各种基本图表类型包括线图、柱状图、饼图等。具有轻量级的特性易于上手和集成。Chart.js 团队团队开发和维护
3.Highcharts
Highcharts 是一个功能丰富的图表库提供了多种图表类型包括线图、区域图、散点图等。具有良好的文档和社区支持支持响应式设计。Highsoft AS团队开发和维护
4.Plotly
Plotly 是一个开源的JavaScript图表库支持创建交互式的绘图和可视化。提供了丰富的图表类型包括散点图、线图、3D图等。Plotly Technologies Inc.团队开发和维护
5.Google Charts
Google Charts 是由Google开发的图表库支持各种常见的图表类型如柱状图、饼图、地图等。可以通过简单的API集成到Web应用中。Google团队开发和维护
6.AntV G2Plot
AntV G2Plot 是蚂蚁金服开发的一个基于G2引擎的图表库提供了一系列现代化、精美的图表。具有良好的设计和交互性能支持多种图表类型。蚂蚁金服团队开发和维护
7.Three.js
Three.js 是一个用于创建3D图形的JavaScript库可以用于创建复杂的三维可视化场景。适用于需要展示复杂三维数据的场景如科学可视化、虚拟现实等。Three.js 团队开发和维护
8.ECharts
ECharts 是一个由百度开发和维护的基于 JavaScript 的数据可视化库用于构建交互式和可定制的图表。提供了丰富的图表类型和灵活的配置选项满足各种数据可视化需求。ECharts 由百度开发和维护
这些库在不同场景和需求下都有其优势选择合适的库取决于项目的具体要求、开发团队的经验和个人偏好。
Vue影响
Vue 的崛起可能会影响之前基于纯 JavaScriptJS开发的前端数据可视化库但并不一定会导致它们被完全替换。以下是一些可能发生的情况 适配和整合许多现有的数据可视化库已经意识到 Vue 的流行并提供了与 Vue 框架更好的集成。这意味着开发者可以使用这些库的 Vue 版本从而更轻松地在 Vue 项目中使用它们。 新的Vue专用库随着 Vue 的持续发展可能会出现一些专门针对 Vue 框架开发的数据可视化库。这些库可能会利用 Vue 的特性和生态系统提供更加优化和灵活的解决方案。 项目迁移对于已经使用旧的数据可视化库的项目开发者可能会考虑将其迁移到与 Vue 更好集成的解决方案上以便更好地利用 Vue 的优势和特性。 竞争与演进尽管 Vue 的崛起可能会影响传统的数据可视化库但这并不意味着它们会被完全取代。一些库可能会继续存在并适应变化通过提供更好的功能、更好的性能或更好的用户体验来与 Vue 相竞争。 总的来说Vue 的崛起可能会对前端数据可视化库产生影响但是否会导致其被完全替换取决于多个因素包括开发者的偏好、现有库的适应能力以及新的技术趋势。 文章推荐
【Echarts】曲线图上方显示数字以及自定义值标题和副标题居中鼠标上显示信息以及自定义信息 【Echarts】柱状图上方显示数字以及自定义值标题和副标题居中鼠标上显示信息以及自定义信息 【随笔】程序员如何选择职业赛道目前各个赛道的现状如何那个赛道前景巨大 【随笔】程序员的金三银四求职宝典每个人都有最合适自己的求职宝典 总结温故而知新不同阶段重温知识点会有不一样的认识和理解博主将巩固一遍知识点并以实践方式和大家分享若能有所帮助和收获这将是博主最大的创作动力和荣幸。也期待认识更多优秀新老博主。
