关于ECharts(初步
让图表跟随屏幕自适应
// 当我们浏览器缩放的时候,图表也等比例缩放
window.addEventListener("resize", function() {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
axios:数据交互
websocket:前后端数据推送
多种数据支持:key-value,二维表,TypedArray格式
流数据的支持:流数据的动态渲染,增量渲染技术。
-
引入
-
基于准备好的dom,初始化echarts实例,初始化图表
var myChart = echarts.init(document.getElementById('main'));
-
设置配置项,绘制图表和数据option
-
myChart.setOption(option);
将配置项以及数据,万能接口,所有参数和数据的修改 通过通过
setOption
配置给 图表实例 echarts
一些配置:
xAxis/yAxis :x/y轴
series:系列列表,每个系列通过type决定自己的图表类型。数组,里面存放对象。
option-xAxis-type. value/category/time/log
-
value:适用于连续数据
-
category:类目轴,适用于离散的类目数据,
- 可通过 xAxis.data 设置类目数据,类目数据只在类目轴有效。
- 如果没有设置 type,但是设置了 axis.data,则认为 type 是 'category'。
- 如果type是category,而xAxis.data里没有设置数据,则用series.data里的。
-
time:时间轴:
适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
-
log 对数轴。适用于对数数据。
series.type
line/bar/pie/scatter(散点)/effectScatter(涟漪散点)/radar/tree/。。。
[series的type] https://echarts.apache.org/zh/option.html#series-line
title
[series的title] https://echarts.apache.org/zh/option.html#title.textStyle
bar常见效果
bar 描述的是分类数据,
barWidth:柱子宽度;
markPoint/markLine
const option = {
series:[
{
name:'',
type:'',
markPoint:{
data:[
{ type:'max', name:'最大值'},
{ type:'min', name:'最小值'}
]
},
markLine:{
data:[
{type:'average', name:'平均值'}
],
}
data:###,
},
]
}
label显示数值
图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
[label] https://echarts.apache.org/zh/option.html#series-bar.label
const option = {
series:[
{
name:'',
type:'',
label:{
show: true,
rotate:60,
position:'inside'
},
data:###,
},
]
}
通用配置
任何图表都能使用
-
title
- 文字样式 textStyle
- 标题边框 borderWidth, borderColor, borderRadius
- 标题位置 left, top, right, bottom
-
tooltip:提示,提示框组件,用于配制鼠标滑过或点击图表时的显示框。
-
触发类型 trigger: 'item'/'axis'/'none'
-
触发时机(条件) triggerOn: 'mousemove'/'click'/'mousemove|click'/'none'
-
格式化(提示框的内容变成我们设置的) formatter:'字符串模版'/'回调函数'
- 字符串模版:模版变量
{a},{b},{c},{d},{e}
,不同图表含义不同:{b0}是{c0}<br />{b1}:{c1}
- 回调函数
formatter:function(arg){ return arg.xxx }
???console.log(arg)
- 字符串模版:模版变量
-
-
toolbox:工具按钮/ECharts 提供的工具栏
-
内置有五个工具
toolbox:{feature:{}}
:导出图片,数据视图,动态类型切换,数据区域缩放,重置 -
导出图片
feature:{saveAsImage:{}}
-
数据视图
feature:{dataView:{}}
-
数据区域缩放
feature:{dataZoom:{}}
-
重置
feature:{restore:{}}
-
动态类型切换:在不同图表类型间动态切换
magicType:{type:['bar','line']}
const option = { toolbox:{ feature:{ magicType:{ type:['bar','line'] }}}}
-
-
legend:图例,用于筛选系列,与series配合使用
容器节点被销毁以及被重建时
假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。
本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。
正确的做法是,在图表容器被销毁之后,调用 echartsInstance.dispose
销毁实例,在图表容器重新被添加后再次调用 echarts.init 初始化。
在容器节点被销毁时,总是应调用 echartsInstance.dispose
以销毁实例释放资源,避免内存泄漏。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战