Echarts---介绍/柱形图和扇形图
什么是Echarts?
Echarts,它是一個JavaScript圖表庫，底層是依賴Canvas類庫ZRender實現的，可以流暢的在移動端和PC端使用，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。說白了就是一個可以簡便的畫出你想要的任何圖表。它擁有豐富圖表類型：比如 折線圖、柱狀圖、地圖、餅圖、熱力圖、日歷圖等等
echarts官網
獲取ECharts
你可以通過以下幾種方式獲取 ECharts。
①從官網下載界面選擇你需要的版本下載，根據開發者功能和體積上的需求，我們提供了不同打包的下載，如果你在體積上沒有要求，可以直接下載完整版本。開發環境建議下載源代碼版本，包含了常見的錯誤提示和警告。
②在 ECharts 的 GitHub 上下載最新的 release 版本，解壓出來的文件夾里的 dist 目錄里可以找到最新版本的 echarts 庫。
③cdn 引入，你可以在 cdnjs，npmcdn 或者國內的 bootcdn 上找到 ECharts 的最新版本。
我們去這個地址獲取：地址
引入就和js的外部引入一樣
<script src="js/echarts.js"></script>繪制圖表
在繪圖前我們需要為 ECharts 準備一個具備高寬的 DOM 容器。
<body><!-- 為 ECharts 準備一個具備大小（寬高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div> </body>然后就可以通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。
// 基于準備好的dom，初始化echarts實例var mychart = echarts.init($('.box').get(0));// 指定圖表的配置項和數據mychart.setOption({//標題組件title:{text:'柱狀圖'},//圖例組件legend:{data: ['姓名']},//柱狀圖的x軸，data是x軸上的數據是個數組xAxis:{data:['李易峰','胡歌','彭于晏','郭富城','楊洋','范丞丞','陳赫']},//柱狀圖的y軸，因為會按照數據自動生成所以y軸上面什么也不寫但是不能不寫這行代碼yAxis:{},//系列列表。每個系列通過 type 決定自己的圖表類型series:{//這個的名字要和圖例的名字一樣name : '姓名',//柱狀圖（或稱條形圖）是一種通過柱形的高度（橫向的情況下則是寬度）來表現數據大小的一種常用圖表類型。//這個type是你想要什么圖就寫什么圖的值type : 'bar',data : [100000,20000,30000,40000,50000,12000,34000],//y軸上的數據}});這個案例是打開頁面在50條數據中隨機生成20條數據并且不能重復的柱狀圖
var arr = ['王祖賢','李若彤','朱茵','溫碧霞','邱淑貞','周慧敏','趙雅芝','梅艷芳','劉亦菲','舒暢','佟麗婭','毛曉彤','唐藝昕','萬茜','韓雪','李沁','金晨','陳瑤','劉詩詩','景甜','張鈞甯','李彩樺','林允兒','張萌','張嘉倪','白冰','胡冰卿','楊冪','唐嫣','郭碧婷','陳楚生', '付辛博', '井柏然','喬任梁','俞灝明','王櫟鑫','陳柏霖','陳冠希','陳浩民','陳小春','周傳雄','周華健','周杰倫','周啟生','周潤發','周星馳','周渝民','朱孝天','甄子丹','鄭少秋'];var arr2 = [100,20,30,40,120,120,130,150,160,170,100,200,300,400,500,600,100,200,300,400,101,102,103,104,150,190,140,150,300,200,400,500,600,200,100,45,67,78,89,99,100,300,400,550,880,400,200,700,100,1000];function ArrayToHeavy(arr){//新建一個空數組var newArr = [];for(var i = 0; i < arr.length; i++ ){//遍歷傳入的數組，查找傳入數組的值是否存在新數組中if(newArr.indexOf(arr[i]) === -1){//不存在就把值push到新數組newArr.push(arr[i]);}}//返回新的數組return newArr;}var index = [];while (true) {var r = Math.floor(Math.random()*50);index.push(r);var c = ArrayToHeavy(index);if(c.length == 20){index = c;break;}}var xarr = [],sarr = [];for(var i = 0; i < index.length; i++){xarr.push(arr[index[i]]);sarr.push(arr2[index[i]]);}// 基于準備好的dom，初始化echarts實例var mychart = echarts.init($('.box').get(0));// 指定圖表的配置項和數據mychart.setOption({//標題組件title:{text:'柱狀圖'},//圖例組件legend:{data: ['姓名']},//柱狀圖的x軸，data是x軸上的數據是個數組xAxis:{// data:['李易峰','胡歌','彭于晏','郭富城','楊洋','范丞丞','陳赫']data : xarr,},//柱狀圖的y軸，因為會按照數據自動生成所以y軸上面什么也不寫但是不能不寫這行代碼yAxis:{},//系列列表。每個系列通過 type 決定自己的圖表類型series:{//這個的名字要和圖例的名字一樣name : '姓名',//柱狀圖（或稱條形圖）是一種通過柱形的高度（橫向的情況下則是寬度）來表現數據大小的一種常用圖表類型。//這個type是你想要什么圖就寫什么圖的值type : 'bar',// data : [100000,20000,30000,40000,50000,12000,34000],//y軸上的數據data : sarr}});通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的扇形圖，下面是完整代碼。
總結
以上是生活随笔為你收集整理的Echarts---介绍/柱形图和扇形图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么是二级域名，什么是二级目录？
- 下一篇： 《开源安全运维平台-OSSIM最佳实践》