# api一览图
补充:
grid 网格,可以设置当前图的上下左右距离。
参考视频
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
# 使用技术
# flexable.js与rem
1920 分24等分,1rem = 80px
vscode可以安装cssrem插件,快速计算rem值.安装成功后,点击设置-扩展设置-root-font-size
,设置为80.
# 大屏背景图样式
让图片不重复、靠顶部且居中。
# 头部背景图样式
# grid 网格表示范围
grid. containLabel =》grid 区域是否包含坐标轴的[刻度标签]。通常设置为true,否则左侧坐标可能会被挤出canvas盒子。 (https://echarts.apache.org/zh/option.html#yAxis.axisLabel)。
# x、y轴必定有一个轴是【数】值,而另一个轴是文字。
感性的认识,应该如此。因而便可理解,为啥xy轴type可以选择value、categories。
# 设置线与坐标轴是否有缝隙
# 堆叠数据
# color 设置线的颜色数组
# 修改x轴刻度相关样式
axisLabel
# 修改x轴轴线样式
axisLine
# 修改x轴刻度线的文字的样式
axisTick 如下图横坐标每个圆柱下面有个短尾巴
# 分割线样式
# itemStyle 圆柱样式
# tooltip.axisPointer 指示器
线-line
shadow
cross
# 修改圆柱宽度
# echart 跟随窗口大小变换
# 隐藏x轴线
# 隐藏y轴刻度
# 修改柱子之间的距离、宽度
# label设置柱子上的文字
# 柱状图,设置柱子不同的颜色
打印出params,发现是上面有dataIndex,利用这个index,实现不同样式
文档居然没说可以接受函数。这里params表示当前柱子对象。
# 只有边框的空心柱子
# 左边轴右侧数据是如何实现的
yAxis接受长度为2的数组,分别表示图的左右两边y轴
# series 的 柱子叠加
yAxisIndex 类似于 z-index
# 网格边框样式【边框显示、隐藏,边框线颜色】
# 修改legend 文字样式
# xAxis. boundaryGap
刻度是否作为轴的分隔线
# 网格的横线 样式【y轴分割线】
# 折线图,把折线改成圆滑的线
# 折线图,给折线加不同的颜色
直接在series的item数据项里面改也行
# legend
如果series有值,则legend可以不需要写data属性
# 折线图,修改折线粗细
# 折线图,折线的样式修改
# 折线图,修改折线区域的样式
可以设置area填充区域的颜色
# 设置渐变色
# 设置鼠标移到gird时的拐点大小、鼠标经过时才显示
写在series的item的symbol中。【我的第一感觉以为是tooltip,因为tooltip.axisPointer 指示器 可以设置type,指定指示器类型,感觉应该也是指示器上设置拐点;仔细一想,series每个item都可以设置拐点,那当然是每个item单独设置了】
# 设置拐点样式
拐点边框宽度、拐点颜色、拐点边框颜色
可以实现类似于灯光的周围半透明效果
# tooltip触发方式
得看是什么图
# tooltip的formatter含义
# 环形饼状图,鼠标移上去,图形中间显示文字
# 饼状图的legend图标样式修改
按之前的其它知识类比,我以为应该是在labelStyle里面改,结果不是。
# 饼状图,文字是否居中显示
不居中 居中
# 饼状图,连接图形和文字的线是否显示
# 饼状图的这个参数是啥意思
饼状图中心的位置调整
# 南丁格尔玫瑰图
有两种模式:面积、半径
# 饼状图、图形连接的文字的样式
# 2d 地图
修改地图大小比例: zoom:1.2