其他分享
首页 > 其他分享> > 前端笔记(Echarts月度总结)

前端笔记(Echarts月度总结)

作者:互联网

第一次接触Echarts,以前只了解到Echarts可以用来制作数据可视化,但没有具体学习过。

而工作项目中需要使用到,所以特点也进行了学习,并使用到工作当中。

工作时,项目down下来,了解了项目基本架构之后,开始了解了一些Echarts知识。

 

目前开发中主要使用了饼图和折线图,比如:住建局驾驶舱的项目库管理模块,使用了饼图。

饼图有两种,一种全圆式饼图,另一种是南丁格尔图。这次使用普通饼图。图的类型通过series中的type进行配置pie表示。。。

 

说一下进段时间我对Echarts的学习总结吧:

首先Echarts的安装可以通过npm进行安装到本地,大多数练习还是可以通过script引入的。

 

Echarts初始化:

一般方式:Echarts.init(dom节点)

声明主题方式:Echarts.init(dom节点,主题风格名)

 

Echarts配置项设置:

这步是最难的,需要查阅很多的API进行配置才行,生成该图标的所以配置。

提供了2个默认主题:light、dark

 

Echarts渲染:

chart.setOption(配置项)

即可渲染出来,一般渲染方式是生成一个canvas,还有就是生成svg。

 

主要在于配置项,所以来说说。下列是了解到或使用过的一些配置组件。更多的待后续更新。

 

标题

title:标题,用于设置整个图表标题
    text:标题文本。\n可换行
    link:链接地址
    textStyle:标题样式
    subtext:副标题文本
    sublink:副标题
    subtextStyle:副标题样式

系列

series:系列,可以有多个系列 数组
    type:用于设置图表类型 可以是柱状图、饼图、折线图、曲线图、南丁格尔图
    name:图表对应的图例名称
    data:图表数据 数组

提示框

tooltip:提示框,
    trigger:提升框类型。axis:柱状图、折线图中 鼠标放在柱子上会触发 item:散点图、饼图上用。none:默认无

图例

legend:图例
    type:plain 缺省。scroll:图例可以滚动翻页(图例较多时)
    textStyle:图例样式
        font-size:文字大小
        formatter:一个函数 可返回图例字体
    data:一个数组 返回图例信息
        name:图例名
        icon:图例图标 image://一个url 相对|绝对
        textStyle:内部单独图例样式

x轴

xAxis:x轴数据
    data:一个数组
  type:如下y轴一样

y轴

yAxis:y轴数据
    data:可以调整y轴数据
    type:坐标轴类型 value-数值(y轴用的多) category-类目(x轴用的多) time-时间轴 log-对数轴

网格

grid:网格 如直角坐标系 有x轴y轴
    show:是否显示
    top、left、right、bottom:距离容器的位置

工具栏

toolbox:工具栏组件 比如导出图片 数据图切换样式等等
    itemSize:工具栏大小

调色板

color:调色盘颜色 数组
依次按照数组顺序使用颜色

背景色-全局

backgroundColor:全局背景色

字体样式-全局

textStyle:全局字体样式

动画

animation:是否开动画

连续视觉映射

visualMap:连续视觉映射 滑动此区块时 映射到对应区块

 

后续更新。。。。

 

 

 

 



标签:textStyle,样式,前端,笔记,图例,数组,type,Echarts
来源: https://www.cnblogs.com/wuhairui/p/13172308.html