數據圖表插件Echarts（一）

時間 2019-11-10

標籤數據圖表插件 echarts 简体版

原文原文鏈接

一.引言 javascript

最近作一個智慧城市項目，項目中須要圖表和報表進行數據分析，從網上找了不少，最後找到了百度開放的echarts，一個很強大的插件。html

二.介紹 java

ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，能夠流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大加強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。chrome

支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展示。api

三.使用方式瀏覽器

一、從百度官網下載最新的版本echarts3，這個版本是一個集成版本，也能夠自定義一個版本：http://echarts.baidu.com/download.htmlecharts

最新版本和以前的2.0版本使用不同了，引用方式和裏面一些插件的參數等存在必定的區別，具體看官網上的文檔介紹http://echarts.baidu.com/api.html#echarts。工具

echarts3把全部的插件集成在一塊兒，只須要在項目中引用一個echarts.js文件就能夠，很是簡單。佈局

二、官網上有不少模板，這些版本的樣式和主題都是能夠修改的，根據本身的須要能夠定製。主題的下載地址：http://echarts.baidu.com/download-theme.htmlspa

最後生成的也是一個js文件，直接引用在項目中就能夠了，能夠下載多套模板，這樣就能夠實現換皮膚的效果了，在代碼中只須要修改一下模板的名字。

三、如今來寫一個小的demo

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); //初始化（使用默認的主題）
 //var myChart=echarts.inti(document.getElementById('main'),'infographic');這個就是使用自定義的主題 infographic爲主題名字 // 指定圖表的配置項和數據 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </html>

運行結果：