爲什麼選擇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