为什么选择Echarts
1、上手快，只需要简单的配置即可生成各种图形
2、百度开源项目，文档全，社区活跃（之前人保项目使用过的chart.js国外开源框架，中文文档较少）
3、实例丰富，可以适用各种各样的功能
4、跨平台使用，支持PC端及移动端，从 4.0 开始提供了对微信小程序的适配，支持node上的服务端渲染
Echarts简介
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echarts简单使用</title>
<script type="text/javascript" src='https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.js'></script>
</head>
<body>
<div id="chart" style="width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
// 初始化图表标签
var myChart = echarts.init(document.getElementById('chart'));
var options={
//定义一个标题
title:{
text:'Echarts标题'
},
legend:{
data:['数据']
},
//X轴设置
xAxis:{
data:['60','70','80','90','100']
},
yAxis:{
},
//name=legend.data的时候才能显示图例
series:[{
name:'数据',
type:'bar',
data:['12','32','45','21','1']
}]
};
myChart.setOption(options);
</script>
</html>
1、引入Echarts的cdn
https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.js
2、为Echarts创建一个底层容器div，并设置div的宽高
<div id="chart" style="width:400px;height:400px;"></div>
3、初始化图表
var myChart = echarts.init(document.getElementById('chart'));
4、设置参数
myChart.setOption(options);
具体的option参数参照官网https://www.echartsjs.com/option.html，Echarts会根据不同的配置项渲染生成不同的图表，Echarts的配置项有很多，全记住的话不太现实，建议根据具体使用场景再查阅官网文档
相关连接
1、Echarts配置项 https://www.echartsjs.com/option.html
2、官方实例https://www.echartsjs.com/examples/
3、官方教程https://www.echartsjs.com/tutorial.html