首页 前端知识 ECharts的基本使用

ECharts的基本使用

2024-04-01 10:04:58 前端知识 前端哥 923 849 我要收藏

一.引入 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常用基本属性总结

 

  1. legend: 小标签,图例
  2. grid: 图表的位置
  3. tooltip: 鼠标移入显示文本
  4. color: 图例,内容的颜色

三 柱状图

设置柱状图的方式,是将配置项中series的type设为'bar'

并设置X(xAxis)轴与Y(yAxis)轴的相关参数

    参数:

  1. type:
    1). 类目轴: 坐标轴的展示信息为 “春” “夏”“秋”“冬”等等类似的字符串 ,坐标刻度值不是属于数据连贯
                      类目轴就是横坐标标签类型为类目(type: ‘category’)的坐标轴
    2). 非类目轴: 坐标轴展示信息为数据连贯 time(时间戳连贯)value(数值类型连贯)log(对数数值连贯)
    非类目轴就是除了标签类型为类目的其他坐标轴,有 时间(time),数值(value),对数(log)3种
     
  2. name: 用于设置XY轴分别代表名称(下图设置了X轴name为"类型",Y轴name为"数量")
     
  3. nameLocation: 名称的摆放位置('start'、'middle'、'end')
            eg: nameLocation:'end'  // 轴名称会展示在轴的尾部
     
  4. nameTextStyle: 名称文本样式
     
  5. data: 数据

 

四. 多列柱状图

series一般用于存储ECharts 中的数据

当有多列数据需要展示时我们需要使用多列柱状图,只需要在series多添加一项就可以了

 通常有多列数据的时候,我们需要对每列使用不同颜色展示并在柱状图进行说明,echarts 默认会使用不同颜色进行区分,当然我们也可以对柱状图的样式进行设置,如 背景色 等;

但若需要标明某一列代表什么数据,需要使用到图例 legend ,对应在 series 数组对象中添加 name 属性,来对应 legend 中的 data ,其中通过位置元素来设置图例的位置,如下:

其中 series 中的 label 属性为柱状图文本标签,可显示数据、文本等信息,默认不展示,需要将其 show 设置为 true 时才会在图中展示出来。

五.柱状图样式

柱条的样式可以通过series.itemStyle设置,包括:

 

可以对同一个系列柱条设置同一样式,也可以对单一柱条设置特定的样式,如下:

柱条间距分为两种:

  1. 不同系列在同一类目下的距离barWidth
  2. 另一种是类目与类目的距离barCategoryGap

barGap 被设为 '0%' ,意味着每个类目(比如下图红线)下的两个柱子之间的距离,相对于柱条宽度的百分比,设置成 0% 说明两个柱跳之间 没有间隙 。

而 barCategoryGap 是 '40%' ,意味着柱条每侧空余的距离,相对于柱条宽度的百分比。

通常而言,设置 barGap 及 barCategoryGap 后,就不需要设置 barWidth 了,这时候的宽度会自动调整。

如果有需要的话,可以设置 barMaxWidth 作为柱条宽度的上限,当图表宽度很大的时候,柱条宽度也不会太宽

六,折线图

其他配置类似柱状图

设置柱状图的方式,是将配置项中series的type设为'line'

下图为修改后样式

 

可以设置tooltip,鼠标放到折线图上展示的数据展示样式,分三种

  1. 'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
  2. 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
  3. 'none' 什么都不触发

 

七.饼状图

饼状图是没有XY轴的

只需要在series中设置 type: 'pie' // 意思是饼图,然后添加data数据然后就可以显示了

  

 

label: 提示文本显示

    1.show : 显示文字
    2.formatter : 格式化文字

 

设置环形,添加属性 radius  用于设置不同的内外半径

参考文档:

  • ECharts饼图
  • ECharts柱状图
  • ECharts折线图

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4386.html
标签
评论
发布的文章

前端vue实现甘特图

2024-04-19 21:04:35

HTML入门(详细)

2024-04-19 21:04:24

HTML 入门手册(一)

2024-04-19 21:04:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!