Echarts学习笔记

标签: Echart 分类: Javascript 创建时间:2019-12-12 08:58:11 更新时间:2025-01-17 10:39:22

学习图表,最多的听到的可能事百度的echart吧,后来又出现了蚂蚁金服的G2和G7,对于选择困难症来说,就比较难以抉择了。蚂蚁金服除了G2还有G6和L7,我简单的查看了一下,G2主要事图表,G6主要是关系图等图,还有L7主要关注点事地理数据的可是话。

1.title标题居中

title标题,就是图表上面显示的文字,如果使用居中,大部分的文章可能会提到:textAlign:’center’,但是实际上

只有 left 是具体数值的时候 textAlign 才有效,但是默认 left 是 'left',所以忽略 textAlign 强制左对齐

所以居中,只需要使用 left: ‘center’ 属性就好了,如果你加入了textAlign,可能还会出现莫名奇妙的标题有一部分被遮挡的问题。

1
2
3
4
5
title: {
text: '热损率(%)',
y:'top',
left: 'center',
},
参考文章:
1.标题使用textAlign无法居中 (这篇issue很有用)
2.echarts之title-textAlign (居中) (没有用)
3.echarts横坐标自动判断文字遮挡问题-简单记录-仅供参考 (这篇其实和这里的主题没有关系,但是没地方放了,就放到这里好了)

2.display为none时无法正确的初始化

当图表的容器设置为none时,无法正常的初始化图表。

【解决方法】
就是在页面渲染完成之后,重新调用初始化resize方法

1
2
3
4
5
this.$nextTick(()=>{
if(this.chart){
this.chart.resize();
}
})
参考文章:
1.【Echarts】当容器div为display:none,图表初始化显示问题 这里有说明,就是为什么当容器的display为none时,无法获取宽高
2.echart设置display:none加载显示为空白 (实用,赞)

3.饼图中间文字

主要实现效果,就是在环形图中间添加提示文字,并且上下的字体样式不一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
label: {
normal: {
show: false,
position: 'center',
color:'#4c4a4a',
formatter: '{name|{b}}'+ '\n\r' + '{number| {c} %}',
rich: {
name:{
fontSize: 12,
fontFamily : "PingFangSC-Regular, sans-serif",
color:'#303133'
},
number: {
fontFamily : "Bebas Neue",
fontSize: 16,
color:'#000000',
},
}
},
emphasis: {//中间文字显示
show: true,
}
},

3.渐变色

【方式一】
使用LinearGradient函数,但是官方对这个没有解释,虽然可以使用

1
2
3
4
5
6
7
8
color: new echarts.graphic.LinearGradient(  // 渐变色
0, 0, 1, 0,
[
{offset: 0, color: '#3977E6'},
{offset: 1, color: '#37BBF8'}

]
),

【方式二】
直接使用对象指定

1
2
3
4
5
6
7
8
9
10
11
12
color:{
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#3977E6' // 0% 处的颜色
}, {
offset: 1, color: '#37BBF8' // 100% 处的颜色
}],
global: false // 缺省为 false
}

4.进度条

可以使用echart实现进度条的效果

5.x轴文字倾斜

有时候x轴的文字较长,比如日期类型的,可以尝试将x轴的文字进行倾斜。比如这样:

1
2
3
4
5
6
7
8
// 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
xAxis: {
type: 'category',
axisLabel: {
interval:'auto', // 间隔显示, auto 为自动显示,0 为强制显示
rotate:40
}
},

如果文字较多,还可以间隔显示

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import * as echarts from "echarts/core"
import {
BarChart,
// 系列类型的定义后缀都为 SeriesOption
BarSeriesOption,
LineChart,
LineSeriesOption
} from "echarts/charts"
import {
TitleComponent,
// 组件类型的定义后缀都为 ComponentOption
TitleComponentOption,
TooltipComponent,
TooltipComponentOption,
GridComponent,
GridComponentOption,
// 数据集组件
DatasetComponent,
DatasetComponentOption,
// 内置数据转换器组件 (filter, sort)
TransformComponent
} from "echarts/components"
import { LabelLayout, UniversalTransition } from "echarts/features"
import { CanvasRenderer } from "echarts/renderers"

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
| BarSeriesOption
| LineSeriesOption
| TitleComponentOption
| TooltipComponentOption
| GridComponentOption
| DatasetComponentOption
>;

// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LineChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
])
// 将配置好的 echarts 导出
export default echarts

(2) 使用
直接通过导入 echarts.ts 文件,就可以直接使用了,有人也用了 provide / inject,进行引入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script lang="ts" setup>
import { onMounted, ref } from "vue"
import echarts from "@/utils/echars.ts"

const chart = ref(null)

onMounted(() => {
// 基于准备好的dom,初始化echarts实例
const myChart = echarts.init(chart.value)
// 绘制图表
myChart.setOption({
title: {
text: "ECharts 入门示例"
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
})
})
</script>

(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 的方式进行引入的。
小额赞助
本人提供免费与付费咨询服务,感谢您的支持!赞助请发邮件通知,方便公布您的善意!
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别?

1.函数 isNaN 接收参数后,会尝试将这个参数转换为数值,任何不能被转换为数值的的值都会返回 true,因此非数字值传入也会返回 true ,会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字,如果是数字再继续判断是否为 NaN ,不会进行数据类型的转换,这种方法对于 NaN 的判断更为准确。

每日二省
为什么0.1+0.2 ! == 0.3,如何让其相等?

一个直接的解决方法就是设置一个误差范围,通常称为“机器精度”。对JavaScript来说,这个值通常为2-52,在ES6中,提供了Number.EPSILON属性,而它的值就是2-52,只要判断0.1+0.2-0.3是否小于Number.EPSILON,如果小于,就可以判断为0.1+0.2 ===0.3。

每日三省
== 操作符的强制类型转换规则?

1.首先会判断两者类型是否**相同,**相同的话就比较两者的大小。

2.类型不相同的话,就会进行类型转换。

3.会先判断是否在对比 null 和 undefined,是的话就会返回 true。

4.判断两者类型是否为 string 和 number,是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean,是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol,是的话就会把 object 转为原始类型再进行判断。

每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀,微笑是寂寞的悲伤。