Echarts总结
简介：js图标库，可以兼容在pc和移动端。Echarts底层使用canvas实现，支持多图表、组件的联动和混搭展现。
常用图表类型：折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、雷达图（填充雷达图）等图表。
常用配置子组件：标题，详情气泡、图例、值域、数据区域、轴、工具箱等。
注： 本篇总结仅针对项目中使用的功能点整理总结，并不能涵盖Echart全部内容，更多需求请参考Echarts官方文档。
1.tooltip（详情气泡）
配置实例：
tooltip: {
trigger: 'axis',
confine: true,
backgroundColor: pointColor,
textStyle: {
color: '#fff',
},
formatter: function(params) {
// 区别定制每个tooltip浮动层中的文案
return params[0].data.hasVal ? `${params[0].value} ${params[0].data.tipText}` : `${params[0].data.noValueText}`
},
axisPointer: {
lineStyle: {
color: 'rgba(139,185,255, 0.2)',
},
},
// pos 鼠标当前位置， dom tooltip的dom对象， Echart容器当前尺寸
position: function (pos, params, dom, rect, size) {
let yPos = '0%' // 垂直方向固定在画布顶部
let xPos = 0
// 左侧的一部分数据
if (pos[0] < size.viewSize[0] / 2) {
xPos = pos[0] + 0 // 鼠标点位置，tootip在右
} else { // 右侧的一部分数据
xPos = pos[0] - dom.offsetWidth - 0 // 鼠标点位置减去tooltip的宽度，tooltip在左
}
return [xPos, yPos]
},
}
各项说明如下：
-trigger： tooltip浮动层的触发方式, 'axis': 鼠标在整个画布上任意位置（整个坐标轴范围）均能触发，触发时会在鼠标最近图形上叠加显示轴线,主要在柱状图，折线图使用；'item'：鼠标只能在数据项图形上面触发，例如折现图时，点击折点才能触发。注意: trigger的配置方式会影响其他tooltip配置项的配置。
-confine: 是否将 tooltip 框限制在图表的区域内。当图表外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
-backgroundColor/borderColor: tooltip浮层的背景颜色及边框颜色。注意: 此两种样式所有的tooltip均保持统一，不能根据数据进行对于某一个数据的tooltip特殊设置。
-textStyle： tooltip符层中字体的统一样式设置。
-axisPointer： 仅当tooltip的trigger配置为'axis'时有效
，设置叠加轴线的样式。
-formatter： formatter是tooltip中非常有用的一项配置。此项配置可以根据数据定制生成tooltip中的文本内容。如果没有改项配置，默认文本内容是横轴和纵轴的值。
// formatter的配置
// 1.字符串模版
// 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 详细内容请查询官网
formatter: '{b0}: {c0}
{b1}: {c1}'
// 2.回调函数
// 回调函数参数
// (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
// 在 trigger 为 'axis' 的时候，params 是多个系列的数据数组。每一项的格式如下
{
componentType: 'series', // 系列类型
seriesType: string, // 系列在传入的 option.series 中的 index
seriesIndex: number, // 系列名称
seriesName: string, // 数据名，类目名
name: string, // 数据在传入的 data 数组中的 index
dataIndex: number, // 传入的原始数据项
data: Object, // 传入的数据值
value: number|Array, // 数据图形的颜色
color: string,
}
其中的data项可以用来区别每一项数据的文案，data的格式与series中的data项配置相关联，详细可见上例代码。
-position： tooltip的显示位置。指可以是数组，也可以是回调函数。
// 回调函数参数 (point, params, dom, rect, size)，需要return出一个数组表示tooltip的位置。
point: 鼠标位置，如 [20, 40]。
params: 同 formatter 的参数相同。
dom: tooltip 的 dom 对象。
rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
size: 包括 dom 的尺寸和 echarts 容器的当前尺寸
<font size=3 color=#D2691E>其中仅有point参数是与用户操作相关的位置变量，代表了用户触摸鼠标在画布上的位置。因此我们仅能跟据此项计算tooltip的位置，暂无方法知道距离鼠标点最近的数据点的位置，并让tooltip根据折点定位。</font>
tooltip未能实现的功能点：
tooltip根据距离鼠标点最近的数据点进行定位；轴线的高度与数据的高度一致，而不是纵向贯穿画布；折点覆盖轴线，层级在上
2. xAxis 及yAxis (横纵坐标轴)
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxisData,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
color: '#666',
},
formatter: function(params) {
return `${params}\\nn2017` // \\nn 换行符
},
},
yAxis: {show: false},
-type: 'value',连续数据；'category',离散数据，最常用，必须通过data项来设置数据；'time'，时间轴；'log': 对数轴
-boundaryGap： 坐标轴两边是否留白。
-data： 轴刻度点的数据。如果需要定制轴标签文字内容，需搭配使用formatter配置。
-axisLine：坐标轴线相关样式
-axisTick： 轴线上的刻度的相关样式。其中interval项控制刻度显示，有的时候需要间隔几个刻度显示一个，可以用此项来控制。或者手动将data中不显示的刻度值设置为空字符串。
-axisLabel： 轴标签的相关样式。
-formatter： 此项配置在官网xAxis配置文档中并不能查询到，但是可以使用。可以用来定制轴标签的显示内容，接收的params参数即为刻度点的data值。
<font size=3 color=#D2691E>注： 轴的formatter配置的换行效果与tooltip的formatter配置冲突，暂不明原因。</font>
3.grid（网格）
grid主要用来配置网格组件的显示及样式等
最常用的四个配置是<font size=3 color=#D2691E>left,top,right, bottom。这四项用来控制图形区域到画布边缘的留白。</font>取值可以是数字也可以是百分比。
4.series（图表类型及配置）
series是Echarts最必要也是最重要的配置。series是有单个图表配置对象组成的数组，当其length > 1时，表示了有多个分别设置的图表在画布上进行了叠加。由于图表类型过多，本篇仅选择折线图举例说明。
series: [{
data: seriesData,
// data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {color: areacolor},
symbol: 'circle',
symbolSize: 6,
itemStyle: {
normal: {
color: pointColor,
lineStyle: {
color: lineColor
}
}
},
}],
-data: 图表的数据。举例如下：
const datalist = [
{y: '1', color: 'red', tipText: '重度污染',hasVal: true},
{y: '1', color: 'blue', tipText: '空气良好',hasVal: true},
{y: '1', color: 'yellow', tipText: '中度污染',hasVal: true},
{y: '0', color: '', tipText: '',hasVal:false},
]
const seriesData = datalist.map((item,index) => {
return {
value: item.y, // Echart自带配置
tipText: `${item.y} ${item.tipText}`,
hasVal: item.hasVal,
noValueText: '空数据',
emphasis: {
itemStyle: {
color:item. color
}
},
themeColor,
symbolSize: item.hasVal ? 8 : 0, // 有值的点展示，没有值的点不展示
}
})
其中，value， emphasis， symbolSize 是Echarts自带的配置，除此之外可任意添加配置项，注意不要与自带配置的key重读。
<font size=3 color=#D2691E>data中配置的每个字段都可以在tooltip中的formatter的通过其参数params[0].data来获取，可以用来帮助我们实现tooltip文案自定义。</font>具体请参阅上文tooltip中代码。
emphasis用来设置当某个折点被高亮时候的样式；symbolSize用来设置折点被高亮时候的大小。此两项是可以针对单个数据点进行设置的。
-type: 图表的类型。
-areaStyle: 图表的区域颜色，可以设置为渐变色。
-symbol： 折点的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
-symbolSize： 折点没有高亮时大小，统一设置。
-itemStyle： 折线拐点的样式。
5.在React Native 项目中的使用
简单的图表，当要给Echart组件设置一个固定的宽高，组件会自动计算每个刻度的值，并在画布上画出。
而在RN项目中，当data的数据长度并不固定时，我们需要每个刻度的长度固定，则需要根据data的长度来计算Echart的长度值，对width属性进行设置。这样图表会更加美观，不会因为data数据变化时，刻度的长短变化出现跳动感。
也可以在Echart组件外面使用scrollView组件，以实现Echart的滚动。如下代码所示：
const {
width: windowWidth,
height: windowHeight,
} = Dimensions.get('window');
// data是图表数据
getChartWidth() {
const {data} = this.props;
return (windowWidth / 6) * data.length;
}
<ScrollView
ref={(r) => { this.chartScroll = r; }}
horizontal
showsHorizontalScrollIndicator={false}
onContentSizeChange={this.onContentSizeChange}
>
{
seriesData.length > 0 ?
: null
}
