Echarts学习笔记
学习图表,最多的听到的可能事百度的echart吧,后来又出现了蚂蚁金服的G2和G7,对于选择困难症来说,就比较难以抉择了。蚂蚁金服除了G2还有G6和L7,我简单的查看了一下,G2主要事图表,G6主要是关系图等图,还有L7主要关注点事地理数据的可是话。
1.title标题居中
title标题,就是图表上面显示的文字,如果使用居中,大部分的文章可能会提到:textAlign:’center’,但是实际上
只有 left 是具体数值的时候 textAlign 才有效,但是默认 left 是 'left',所以忽略 textAlign 强制左对齐
所以居中,只需要使用 left: ‘center’ 属性就好了,如果你加入了textAlign,可能还会出现莫名奇妙的标题有一部分被遮挡的问题。
1 | title: { |
1.标题使用textAlign无法居中 (这篇issue很有用)
2.echarts之title-textAlign (居中) (没有用)
3.echarts横坐标自动判断文字遮挡问题-简单记录-仅供参考 (这篇其实和这里的主题没有关系,但是没地方放了,就放到这里好了)
2.display为none时无法正确的初始化
当图表的容器设置为none时,无法正常的初始化图表。
【解决方法】
就是在页面渲染完成之后,重新调用初始化resize方法
1 | this.$nextTick(()=>{ |
1.【Echarts】当容器div为display:none,图表初始化显示问题 这里有说明,就是为什么当容器的display为none时,无法获取宽高
2.echart设置display:none加载显示为空白 (实用,赞)
3.饼图中间文字
主要实现效果,就是在环形图中间添加提示文字,并且上下的字体样式不一样。
1 | label: { |
1.vue echarts 给饼图中间添加文字 ,并且添加多个样式 这个不错,还有另外一种实现方式
2.echarts-环形图中心显示文字(二)
3.echarts环形图自动轮播选中,中间显示数据,移入停止轮播
3.渐变色
【方式一】
使用LinearGradient函数,但是官方对这个没有解释,虽然可以使用
1 | color: new echarts.graphic.LinearGradient( // 渐变色 |
【方式二】
直接使用对象指定
1 | color:{ |
4.进度条
可以使用echart实现进度条的效果
1.vue 用echarts写的进度条组件
5.x轴文字倾斜
有时候x轴的文字较长,比如日期类型的,可以尝试将x轴的文字进行倾斜。比如这样:
1 | // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。 |
如果文字较多,还可以间隔显示
1.echarts里面X轴文字斜着放
2.ECharts 坐标轴标签、tooltip文本格式化
3.echarts X轴值的设置 formatter
4.echarts X轴数据密集,强制设置坐标轴分割间隔。
6.数据更新
这里目前查到的数据更新方法,就是重新设置option参数:mychart.setOption(option,true),有些地方说这个方法不生效,我觉得可以生效的啊。
1.echarts更新数据的方法,更新配置 这的data 需要根据实际情况改变,这只是改了series里第一项的数据,如果有多项,你的data 应该 传个数组,循环给 option.series[i].data 赋值,执行myChart.setOption(option)更新数据。
2.数据的动态更新 所有数据的更新都通过 setOption实现,你只需要定时获取数据,setOption 填入数据,而不用考虑数据到底产生了哪些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
3.echarts3 清空上一次加载的数据 正确的操作模式,手动在新的渲染的时候清空xData和yData
7.调整柱状图单个柱子的颜色
1.echarts改变柱状图每个柱子的颜色
2.echarts 用数据集创建的柱状图如何给每个bar设定颜色? 一个比较简单的方法是给series.bar.itemStyle.color设置一个callback,它的参数是数据点s,其中s.dataIndex是数据点的序号,你可以根据这个值返回特定颜色,就可以改变每个柱子颜色了。
3.dataset 可以为每个数据指定样式
8.四色圆环
这个我倒是实现了,主要就是用了一个遮罩层实现的。
9.按需引入
(1) 编写引入文件
我这里使用了官方的代码,另存为了echarts.ts文件,多加了一个导出的操作。
1 | import * as echarts from "echarts/core" |
(2) 使用
直接通过导入 echarts.ts 文件,就可以直接使用了,有人也用了 provide / inject,进行引入。
1 | <script lang="ts" setup> |
(3) echart.d.ts 声明文件
这个部分就是对于 TypeScript 来说的,要是使用 option:any 这样的类型,似乎不太好。
1.vue3+ts+echarts,实现按需引入和类型界定 这篇文章给出了一个例子,在App.vue的界面进行引入,然后利用provide函数,将形成的echarts变量传递给其他的子页面,这样就能实现全局使用的问题.全部的类型都摘了出来,然后单独写到一个echart.d.ts的申明文件中去。
2.在项目中引入 Apache ECharts 对于使用了 TypeScript 来开发 ECharts 的开发者,我们提供了类型接口来组合出最小的 EChartsOption 类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。
3.Vue3 + Echarts + TypeScript按需导入组建封装—— 鱼(编码体验)和熊掌(构建优化)俺都要 这里将Echarts进行了封装,还写了封装和优化的过程。总的来说,这次Chart组件改造的效果还是不错的,在确保组件使用的便利的基础上,减少了 44% 的 echart打包大小,Gzip 后我们的首页大小降低到了 500KB 还可以接受。不过通过对上面的构建报告图的观察,其实还是能够发现更多优化点的,比如抽离公共组件包 ElementPlus,甚至 echarts 本身也可以抽出来,过分点的话甚至可以把 类型 和 我们设置的基础 渲染工具去掉,使得Chart组件本身更精简。
4.vue3+ts+echarts实现按需引入和类型界定方式 这里也是用的 provide/ inject 的方式进行引入的。