前言

一篇强实战的文章，需要在页面中使用图表的小伙伴强烈推荐看上这么一看~

1.主要图表

ECharts

https://echarts.baidu.com/index.html

high-charts

https://www.highcharts.com.cn/demo/highcharts

vcharts

https://v-charts.js.org/#/

g2

https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

bizcharts

https://bizcharts.net/products/bizCharts/docs/start

D3.js

https://d3js.org/
https://github.com/d3/d3/wiki/Gallery

2.图表组成

• Axis 坐标轴，包含 xAxis 和 yAxis
• 比如EChart 单独配置x轴，y轴
• BizChart 基于整个图表组件封装
• Geam 用于图表上的标记，通常可配置 点，线，面
• tooltip 悬浮提示框组件
• legend 图例组件
• title 图表标注

3.图表数据来源和处理

1.通常legend图例代表图表上某一类数据，所以每次渲染的 K：V 对象中都需要与legend 相对应的id 。

 
参看
Echarts
 
基础折线图
 https://www.echartsjs.com/examples/editor.html?c=area-stack

2.通过dataset管理数据

G2的dataset

https://bizcharts.net/products/bizCharts/api/dataset

Echart dataset

https://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE

4.图表渲染过程

通常需要一个特定节点作图表渲染挂载

 
<div id="main" style="width: 600px;height:400px;"></div>

在React中

// 渲染图表
// 渲染图表
ReactDOM.render((
 <Chart width={600} height={400} data={data} scale={cols}>
 <Axis name="genre" />
 <Axis name="sold" />
 <Legend position="top" dy={-20} />
 <Tooltip />
 <Geom type="interval" position="genre*sold" color="genre" />
 </Chart>
), document.getElementById('mountNode'));

5.图表操作

Bizchart

参看
 https://bizcharts.net/products/bizCharts/api/chart#event
其中包含各种类型事件回调

Echart

参考
https://echarts.baidu.com/api.html#events

6.项目中使用图表和移动端使用图表

项目中使用图表引入

6.1.服务端渲染

服务端渲染可以使用流行的 headless 环境

参看
https://github.com/hellosean1025/node-echarts
https://github.com/chfw/echarts-scrappeteer
https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js

6.2.客户端渲染

需要判断下在浏览器渲染得时候在引入，而且浏览器环境才有canvas 渲染

配置项单独分离，方便日后维护

6.3.H5中渲染

bizcharts 渲染中使用 forceFit 进行宽度自适应，但是对于 hight 需要指定

<Chart
 height={window.innerHeight}
 data={dv}
 scale={cols}
 padding={[80, 100, 80, 80]}
 forceFit
 >

ECharts

https://echarts.baidu.com/tutorial.html#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94

https://www.echartsjs.com/gallery/editor.html?c=doc-example/pie-media

hightChart 宽度如不指定默认自适应，可通过max-width，min-width 设置区间

在线体验
https://jshare.com.cn/demos/hhhhxL

6.4.小程序中使用

官方文档
https://echarts.baidu.com/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

尾声

今天的文章就是这样，希望能给各位小伙伴们在写业务的时候带来帮助~