ECharts的基本使用

一.引入 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折线图