Apache echarts基础

安装

当前echarts版本5.6.0
全局安装：npm install echarts
局部安装：定制图表
- 下载后把文件包放置在应用echart文件的根目录
- 如：应用echart的文件位于statistics文件夹下，那下载下来的echarts文件放置到该目录下

引用

定制的：import * as echarts from “./echarts/echarts.min.js”
全局安装：import * as echarts from “echarts”

初始化echart（react）

定义ref：const mychartRef = useRef(null)
获取元素的dom: <div ref={mychartRef}></div>

在useEffect钩子中去初始化获取echart的宽高大小：

chart = echarts.init(mychartRef.current as unknown as HTMLDivElement,undefined, {
  width: width,1
  height: 300
})

定义一个option对象，查看配置项手册
将option设置到echart中：chart.setOption(option)

调整图像的位置和大小

柱状图和折线图: 通过调整grid的值
饼状图: 直接在series里面，通过改变radius和center的值
雷达图: 在radar的radius的位置

如何给echarts添加动态背景图

不能直接给echarts添加，echart只能使用静态的
在应用echarts的容器的父容器上添加背景，背景为动态的即可

itemStyle的颜色

不配置

默认按照系统设置的颜色列表循环取颜色作为系列色

配置静态样式

如：”ccc”, rgba(128,128,128,0.5),rgb(128,128,128)

配置线性渐变

{
  type: 'linear',
  x:0,
  y:0,
  x2:0,
  y2:1, // 不改变x只改变y，表示y的径向渐变
  colorStops:[{
    offset:0,color:'red', // 0%处的颜色
  },{
    offset:1,color:'blue' // 100%处的颜色
  }],
  global: false // 缺省为 false
}

配置径向渐变

{
  type: 'radial',
  x: 0.5,
  y: 0.5,
  r: 0.5,
  colorStops: [{
      offset: 0, color: 'red' // 0% 处的颜色
  }, {
      offset: 1, color: 'blue' // 100% 处的颜色
  }],
  global: false // 缺省为 false
}

配置纹理填充

{
  image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
  repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

动态，根据数据的颜色展示(渐变也可以这样处理)

const data = [{value: 56, color: '#fffacc'}]
color: (params) => {
  return params.color
}

legend

什么时候展示

当data中的数据有name属性

控制legend的位置

top 和 left: 决定图例位于图标的那个位置
orient：’vertical’| ‘horizontal’: 决定图例是垂直或水平排列

修改item的间隔和样式

itemGap: 控制图例每项的间隔
itemWidth 和 itemHeight: 控制图例图形大小
itemStyle: 控制图形的样式

图例的关闭

selectedMode：控制是否可点击图例，也可以设置为’single’ 或 ‘multiple’的选择模式
inactiveColor：关闭图例的颜色
图例关闭动态影响其他的事件：chart.on(‘legendselectchanged’,()=>{})

graphic

场景

适用于自定义一个轮播条或其他自定义线段图形

类型

group
image
text
circle
rect
line （以这个为分界线上面的常用）
sector
ring
polygon
polyline
bezierCurve
arc
主要通过x，y来控制位置

柱状图

type: ‘bar’

option必须要有的属性

xAxis，yAxis，grid，series, 前面三个可以空着但一定要有

如何设置label的字体和背景与柱体颜色一致

首先在series.itemStyle中去控制颜色
字体：series.label.color: ‘inherit’
文本框：series.label.borderColor: ‘inherit’
文本的背景：series.label.backgroundColor: ‘inherit’

label格式和位置

distance + position: 控制标签的位置和距离柱体的距离
formatter: 设置label展示的文本格式，字符串模板或回调函数
- 字符串模板：formatter: ‘{b}: {c}’
  - {a}：系列名(seriesName)
  - {b}：数据名(name)
  - {c}：数据值(value)
- 回调函数：(params: Object|Array) => string

让柱体根据数值动态排序

开启该系列的动态排序效果: series.realtimeSort: true
实时改变标签: series.label.valueAnimation: true
在label中设置动画效果：animationFrom(进场) + animationTo（退场）

提示框tooltip

tirgger：触发类型，根据图形选择，坐标轴类的选择’axis’
axisPointer：指示器，可以用来做高亮时（选中时）的背景颜色
- 在axisPointer.type = ‘shadow’
- 设置背景颜色axisPointer.shadowStyle.color= “rgba(74, 211, 164, 0.15)”
- 如果不想有附带的虚线axisPointer.lineStyle.color=”transparent”
文本格式与label一样
动态时需要设置延迟为0：tooltip.showDelay:0

自定义完成后，想让tooltip定时移动展示，使用dispatchAction事件交互

const updateCurrentTip = () => {
  let len = option.series[0].data.length
  chart.dispatchAction({ // 取消之前的高亮
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: currentIndex.current
  })

  currentIndex.current = (currentIndex.current +1) % len

  chart.dispatchAction({ // 高亮当前
    type: 'hightlight',
    seriesIndex:0,
    dataIndex: currentIndex.current
  })

  // 高亮时展示提示框
  chart.dispatchAction({
    type: 'showTip',
    seriesIndex:0,
    dataIndex: currentIndex.current
  })
}

let timer = setInterval(function() {
  updateCurrentTip()
}, 3000);

return () => {
  clearInterval(timer)
}

堆叠series.stack

可以用于做正负双轴，
在想要堆叠的对象上添加stack: ‘名字任意’
在下一个要堆叠的对象上也添加stack:’名字要保持一致’
堆叠的对象可以用barGap来控制重叠的距离，完全重叠设置’-100%’

堆叠的柱体要隐藏，则把itemStyle的 color 设置成透明

series: [{
  type:'bar',
  stack: 'a'
},{
  type: 'bar',
  stack: 'a'
}]

柱状图->环形

如果配置angleAxis（角度轴）、radiusAxis（半径轴）和polar（极坐标）
但是data中的数据需要一个个遍历成一个对象存放在series中
注意，如果实现的圆环，要一半有背景色一半没有，可以使用渐变但效果不好，建议还是使用type：’pie’类型实现

折线图

type: ‘line’

一定要有的对象

xAxis
yAxis
grid
series

两种类型的折线

平滑折线：smooth: true
曲直折线：默认

关于xAxis刻度的间隔

通过interval的回调函数返回的true OR false，让刻度、标签每隔n个展示

axisLabel: {  // 刻度的间隔
  interval:(index:number,value: string) => {
    // 数组长度大于6移除一个，最终只展示6个标签，对于这种情况，标签和数据最好分开成两个数组
    if(monthList.length > 6) monthList.shift() 
    return true // 返回true表示展示
  },  
},

折线图上的点

data中的value在x轴和y轴相交的点
symbol：’none’
内置类型：circle, rect, roundRect, triangle, diamond, pin, arrow, none
自定义
- 图片形式：‘image:// 图片链接|dataURI’
- svg路径：‘path://….’
  - 如：’path://d=”M1022.165868 1.17248h2447.020998c65.425217 …”‘

环形（饼图）

type: ‘pie’

调整圆环的弧度和大小

radius：[‘53%’, ‘53%’]：控制圆的大小和是否变成圆环，参数：[圆环宽度, 圆大小]
center: [‘50%’,’50%’]：圆的位置
startAngle: 275：弧度的起始位置
endAngle: 30：弧度的结束位置

多个圆环

建立多个对象，并使用stack堆叠
多个堆叠，center要一样
每个data一定要用数组的形式

没有数据是否展示圆

showEmptyCircle: true
emptyCircleStyle对象：控制没有数据时圆的样式

饼图类型

当数据都在一个对象上，形成饼图，默认按照数据大小，平分饼图的扇形
roseType：南丁格尔玫瑰样式(按照数据，高低呈现)

关系图

type: ‘graph’

场景

展示节点与节点的关系

配置

布局: layout: ‘none’
data: 以Array<{name:’’, x,100,y:100，value}>形式存在，

links配置节点

每一个线段都能设定起始位置和结束位置并且设置线段的弧度

source: 7 // 源节点（data的索引）
target: 0 // 目标节点（data的索引）  7 -> 0
lineStyle:{
  curveness: 0.5 // 线段的曲度（正负控制方向）
}

设置线段两端的样式: edgeSymbol: [‘circle’, ‘arrow’]
线段两端的图形的大小: edgeSymbolSize：10
节点(数据)大小: symbolSize： data，文本溢出之后再去label设置宽高去限制

雷达图

type=’radar’

radar

标签数组：indicator中设置，以{name： ‘’,max:0,color: ‘’}格式
背景颜色：splitArea:{areaStyle.color: ‘transparent’}
也可以处理线段样式等

series

data：与indicator基本一致，数据多一个value，表示具体数值。如果需要对单个颜色不一致，通过areaStyle:{color: ‘’}
如果数据存在min，和max则alignTicks要为false

areaStyle的颜色也可以设置为渐变的

areaStyle: {
  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
    {
      color: 'rgba(255, 145, 124, 0.1)',
      offset: 0
    },
    {
      color: 'rgba(255, 145, 124, 0.9)',
      offset: 1
    }
  ])
}

联动图

一个echart中有多种类型的图
在series存放多个类型的图形，然后通过grid或者自身的位置来调整位置

事件

一般联动图会定时动态改变数据，在定时器中实时改变图的数据
一般联动图会有一个滚动条显示，可以使用dataZoom或者使用graphic自定义一个组件，然后动画和事件在图形上调用
chart.on(‘click’, function(params) {})