echart踩坑记录(二)

# api一览图

image.png

补充:

grid 网格,可以设置当前图的上下左右距离。

image.png

image.png

参考视频

10分钟掌握Echarts自定义样式诀窍搞定复杂酷炫图表_哔哩哔哩_bilibili (opens new window)

ECharts数据可视化项目-大屏数据可视化展示-echarts 图表制作-pink老师直播课更新完毕)_哔哩哔哩_bilibili (opens new window)

# pink-ECharts数据可视化项目-笔记

https://www.bilibili.com/video/BV1v7411R7mp/?p=53&spm_id_from=333.788.top_right_bar_window_history.content.click

image.png

# 使用技术

image.png

# flexable.js与rem

1920 分24等分,1rem = 80px

vscode可以安装cssrem插件,快速计算rem值.安装成功后,点击设置-扩展设置-root-font-size,设置为80.

image.png

# 大屏背景图样式

让图片不重复、靠顶部且居中。 image.png

# 头部背景图样式

image.png

# grid 网格表示范围

image.png grid. containLabel  =》grid 区域是否包含坐标轴的[刻度标签]。通常设置为true,否则左侧坐标可能会被挤出canvas盒子。 (https://echarts.apache.org/zh/option.html#yAxis.axisLabel)。

# x、y轴必定有一个轴是【数】值,而另一个轴是文字。

感性的认识,应该如此。因而便可理解,为啥xy轴type可以选择value、categories。

image.png

# 设置线与坐标轴是否有缝隙

image.png

# 堆叠数据

image.png

# color 设置线的颜色数组

image.png

# 修改x轴刻度相关样式

axisLabel image.png

# 修改x轴轴线样式

axisLine

image.png

# 修改x轴刻度线的文字的样式

axisTick 如下图横坐标每个圆柱下面有个短尾巴 image.png

# 分割线样式

1679930597005.jpg

# itemStyle 圆柱样式

image.png image.png

image.png

# tooltip.axisPointer 指示器

image.png

线-line

image.png

shadow

image.png

cross

image.png

# 修改圆柱宽度

image.png image.png

image.png image.png image.png

# echart 跟随窗口大小变换

image.png

003.gif

# 隐藏x轴线

image.png

# 隐藏y轴刻度

image.png

# 修改柱子之间的距离、宽度

image.png

# label设置柱子上的文字

image.png

# 柱状图,设置柱子不同的颜色

image.png

打印出params,发现是上面有dataIndex,利用这个index,实现不同样式

image.png

文档居然没说可以接受函数。这里params表示当前柱子对象。

image.png

# 只有边框的空心柱子

image.png

image.png

# 左边轴右侧数据是如何实现的

yAxis接受长度为2的数组,分别表示图的左右两边y轴 image.png

# series 的 柱子叠加

yAxisIndex 类似于 z-index image.png

# 网格边框样式【边框显示、隐藏,边框线颜色】

image.png

# 修改legend 文字样式

image.png

# xAxis. boundaryGap

刻度是否作为轴的分隔线 image.png

# 网格的横线 样式【y轴分割线】

image.png

image.png

image.png

# 折线图,把折线改成圆滑的线

image.png

image.png

image.png

# 折线图,给折线加不同的颜色

image.png

image.png

image.png

直接在series的item数据项里面改也行

image.png

# legend

如果series有值,则legend可以不需要写data属性

image.png

image.png

# 折线图,修改折线粗细

image.png

image.png

# 折线图,折线的样式修改

image.png

# 折线图,修改折线区域的样式

可以设置area填充区域的颜色 image.png

image.png

# 设置渐变色

image.png

# 设置鼠标移到gird时的拐点大小、鼠标经过时才显示

写在series的item的symbol中。【我的第一感觉以为是tooltip,因为tooltip.axisPointer 指示器 可以设置type,指定指示器类型,感觉应该也是指示器上设置拐点;仔细一想,series每个item都可以设置拐点,那当然是每个item单独设置了】

image.png

image.png

# 设置拐点样式

拐点边框宽度、拐点颜色、拐点边框颜色 image.png

可以实现类似于灯光的周围半透明效果

image.png

# tooltip触发方式

得看是什么图

image.png

image.png

# tooltip的formatter含义

image.png

# 环形饼状图,鼠标移上去,图形中间显示文字

image.png

# 饼状图的legend图标样式修改

按之前的其它知识类比,我以为应该是在labelStyle里面改,结果不是。

image.png

# 饼状图,文字是否居中显示

不居中 image.png 居中 image.png

# 饼状图,连接图形和文字的线是否显示

image.png

# 饼状图的这个参数是啥意思

饼状图中心的位置调整

image.png image.png

# 南丁格尔玫瑰图

有两种模式:面积、半径

image.png

image.png

# 饼状图、图形连接的文字的样式

image.png

# 2d 地图

修改地图大小比例: zoom:1.2

Examples - Apache ECharts (opens new window)

Buy me a cup of coffee ☕.