1.了解ECharts
ECharts簡單說就是互聯網開發程序過程中，后台數據庫用以實現數據到圖形的映射的一個插件。
具體來說一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在PC和移動端設備上，兼容當前絕大部分瀏覽器，底層以來輕量級的矢量圖庫Zrender，提供直觀，交互豐富，可以高度個性化定制的數據可視化圖標。
第一步：下載echarts.js
https://echarts.baidu.com/
現在在官網下載的文件可能不能使用，有需要echarts.js的可以聯系本人為大家提供免費的 echarts.js 文件。聯系方式在下方
第二步：
第三步：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--第一步下載echarts.js引進來-->
<script src="echarts.js"></script>
</head>
<body>
<!---第二步 引進echarts之后，要給它一個容器展示圖標的一個空間div。什么名字，寬高等--->
<div id="main" style="width: 400px; height: 400px; border: 1px solid red;"></div>
</body>
</html>
<script>
// --第三步 通過echarts.init進行初始化eharts對象
var myChart = echarts.init(document.getElementById("main"))
//得到是一個對象有很多屬性方法
console.log(echarts)
</script>
配置項：配置項中有很多屬性和方法
API：
引入echarts.js文件后 console.log（echarts）得到是一個echarts對象
echarts對象上有一個init() ，通過echarts的init() 得到一個實例叫echartsInstance() 它身上也有很多方法，echartssInstance() 上有一個setOption() 方法 因為我們要做圖表，setOption身上有我們需要的屬性和方法
init() 初始echarts實例
我們要做的做一個圖表里面要有什么，比如：銷量、x軸，y軸、人數、這些統一都稱為 Option，這些屬性方法都在setOption身上
setOption() 配置圖表的選項
通過echarts對象第一次引進來時，就得到這個對象，這個對象通過init() 得到一個實例對象，實例對象再通過setOption() 配置選項
需要了解 setOption() 里面的屬性和方法
十大圖表：
1. 柱狀圖 bar
2. 折線圖 line
3. 餅圖 pic
4. 散點圖 scatter
5. 氣泡圖 bubble
6. 雷達圖 radar
7. 地圖 map
8. 漏斗圖 funnel
9. 詞雲 word Cloud
10.儀表圖 gauge
以下是個小案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--第一步下載echarts.js引進來-->
<script src="echarts.js"></script>
</head>
<body>
<!---第二步 引進echarts之后，要給它一個容器展示圖標的一個空間div。什么名字，寬高等--->
<div id="main" style="width: 400px; height: 400px; border: 1px solid red;"></div>
</body>
</html>
<script>
// 第三步 通過echarts.init進行初始化eharts對象
// myChart是echarts的一個實例 有很多方法
var myChart = echarts.init(document.getElementById("main"))
//得到是一個對象有很多屬性方法
console.log(echarts)
//配置項
option = {
title:{
text:"2019IT技術比",
left:"center",
top:10,
textStyle:{
color:"blue"
}
},
tooltip:{
formatter:"{b0} {d0}"
},
series:{
type:"pie",
data:[
{name:"web",value:120},
{name:"andriod",value:30},
{name:"ios",value:30},
{name:"java",value:50},
{name:"python",value:70},
{name:"php",value:60},
]
},
}
//把配置項放到echarts對象中來
myChart.setOption(option)
</script>
作者：晉飛翔
手機(微信同步)：17812718961