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