echarts bar图那点事

charts 柱状图
在这里插入图片描述
上面的那个柱状图,它的数据结构如下:
在这里插入图片描述
解释一下:数据结构:data.chartData.data 中的数据:xAxis 是x轴,是个时间戳,绘图数据,是series中的数据,这个数组里面一共有4个对象,每个对象里面有两个属性,name 是级别,data 是对应的数据。从数据中,可以看出来,这是堆积图的数据结构。一个点上最多画一个柱子,一个柱子最多有4节。
柱子的颜色根据name 返回的值定。
基础知识:
在这里插入图片描述
1.chartOption里面,color的返回值是个数组,给上色值,线条就会按照上面的数组里面一次取值。没有给色值的话,就会按照echarts官网文档里面,渲染默认值。当然喽,series里面的itemstyle 的color属性也可以定义色值。
2.调整series里面的 barCategoryGap:属性,可以调整柱子之间的间距,
3.series里面的stack 属性,设置一个值,柱子会堆积,要是给他置空,就会变成一个平铺图。
4.chartoption里面,很多对象可以支持自定义,看官方文档吧,找到它的某个属性,文档上显示类型是“自适应”的,基本上就可以定义一个方法,去动态修改里面的值。
5.举个例子,下面的toolTip里面的formatter这个属性,它是一个function ,有两个参数,第一个常用。打印一下params,它其实是坐标轴上的某一个点,里面定义了很多相关的属性,需要的时候,可以进行修改。
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

还是这套数据,需求改为一个柱子上,只有一个色值,数量显示总数。色值根据最高级别来判断(series数组中4个对象,对应的数据一次是:紧急、重要、次要、一般),之前是可以画4个颜色的,现在合成一种了。那么,此时已经不是一个堆积图了,而是一个普通的柱状图,返回数据series只有1个。后台不改数据结构,那么前端就得重新组装理想的数据结构。
第一步:series里面的data的拼接,4合1,纵轴要显示总数,就得series当成一个二维数组,把data里面的数据按列求和。
第二步:显示最高级别,就得做一些判断,横轴上的每一个点,对应柱状图的每一个柱子,新建一个数组,数组的长度,为横轴坐标点的个数,把series里面name的值,进行比较,取出级别最高的那个,塞到那个数组里。
第三步:第一步和第二部改变了柱状图需要的数据结构,那么基于这些,可以进行样式的修改。

图一:数据封装
在这里插入图片描述
图二:样式修改
在这里插入图片描述
大功告成:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_36430673/article/details/106225108
今日推荐