一.引入 ECharts
1. 通过 npm 安装 ECharts:
npm install echarts --save
2. 安装完成以后,可以将 echarts
引入页面,这样我们就可以在该页面使用 echarts
所有组件
import * as echarts from "echarts"
3. 绘制图表
在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。
注意: 在调用echarts.init时需要保证容器已经设置了宽高
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的echarts图表
二.Echarts常用基本属性总结
- legend: 小标签,图例
- grid: 图表的位置
- tooltip: 鼠标移入显示文本
- color: 图例,内容的颜色
三 柱状图
设置柱状图的方式,是将配置项中series的type设为'bar'
并设置X(xAxis)轴与Y(yAxis)轴的相关参数
参数:
- type:
1). 类目轴: 坐标轴的展示信息为 “春” “夏”“秋”“冬”等等类似的字符串 ,坐标刻度值不是属于数据连贯
类目轴就是横坐标标签类型为类目(type: ‘category’)的坐标轴
2). 非类目轴: 坐标轴展示信息为数据连贯 time(时间戳连贯)value(数值类型连贯)log(对数数值连贯)
非类目轴就是除了标签类型为类目的其他坐标轴,有 时间(time),数值(value),对数(log)3种
- name: 用于设置XY轴分别代表名称(下图设置了X轴name为"类型",Y轴name为"数量")
- nameLocation: 名称的摆放位置('start'、'middle'、'end')
eg: nameLocation:'end' // 轴名称会展示在轴的尾部
- nameTextStyle: 名称文本样式
- data: 数据
四. 多列柱状图
series一般用于存储ECharts 中的数据
当有多列数据需要展示时我们需要使用多列柱状图,只需要在series多添加一项就可以了
通常有多列数据的时候,我们需要对每列使用不同颜色展示并在柱状图进行说明,echarts 默认会使用不同颜色进行区分,当然我们也可以对柱状图的样式进行设置,如 背景色 等;
但若需要标明某一列代表什么数据,需要使用到图例 legend ,对应在 series 数组对象中添加 name 属性,来对应 legend 中的 data ,其中通过位置元素来设置图例的位置,如下:
其中 series
中的 label
属性为柱状图文本标签,可显示数据、文本等信息,默认不展示,需要将其 show
设置为 true
时才会在图中展示出来。
五.柱状图样式
柱条的样式可以通过series.itemStyle设置,包括:
可以对同一个系列柱条设置同一样式,也可以对单一柱条设置特定的样式,如下:
柱条间距分为两种:
- 不同系列在同一类目下的距离barWidth,
- 另一种是类目与类目的距离barCategoryGap
barGap 被设为 '0%' ,意味着每个类目(比如下图红线)下的两个柱子之间的距离,相对于柱条宽度的百分比,设置成 0% 说明两个柱跳之间 没有间隙 。
而 barCategoryGap 是 '40%' ,意味着柱条每侧空余的距离,相对于柱条宽度的百分比。
通常而言,设置 barGap 及 barCategoryGap 后,就不需要设置 barWidth 了,这时候的宽度会自动调整。
如果有需要的话,可以设置 barMaxWidth 作为柱条宽度的上限,当图表宽度很大的时候,柱条宽度也不会太宽
六,折线图
其他配置类似柱状图
设置柱状图的方式,是将配置项中series的type设为'line'
下图为修改后样式
可以设置tooltip,鼠标放到折线图上展示的数据展示样式,分三种
- 'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
- 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
- 'none' 什么都不触发
七.饼状图
饼状图是没有XY轴的
只需要在series中设置 type: 'pie' // 意思是饼图,然后添加data数据然后就可以显示了
label: 提示文本显示
1.show : 显示文字
2.formatter : 格式化文字
设置环形,添加属性 radius 用于设置不同的内外半径
参考文档:
- ECharts饼图
- ECharts柱状图
- ECharts折线图