可视化数据图表的选择（Web实战-数据可视化中的图表）
可视化数据图表的选择（Web实战-数据可视化中的图表）参看 Echarts 基础折线图 https://www.echartsjs.com/examples/editor.html?c=area-stack 2.通过dataset管理数据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 。https://v-charts.js.org/#/ g2https://antv.alipay.com
一篇强实战的文章，需要在页面中使用图表的小伙伴强烈推荐看上这么一看~
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 图表标注
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#使用 dataset 管理数据 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#移动端自适应
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#在微信小程序中使用 ECharts 尾声
今天的文章就是这样，希望能给各位小伙伴们在写业务的时候带来帮助~
