echarts是什麼？如何使用？ echarts的介紹-js教程-PHP中文網

echarts是什麼？如何使用？ echarts的介紹

不言

發布： 2018-09-11 13:43:51

原創

16424 人瀏覽過

圖表可以很直觀的把龐大的數據以一種合適的方式展現給我們，我們也能透過進行圖表分析得出有價值的信息，前端人員就是為了把數據以一種很舒服、很直觀的方式給別人展現出來，這其實就少不了ECharts，所以說，echarts到底是什麼呢？如何使用？ 本篇文章就來跟大家介紹一下echarts的內容。

首先我們來看看echarts是什麼？

從官網的解釋我們可以知道echarts是商業級資料圖表，是一個純JavaScript的圖示庫，相容絕大部分的瀏覽器，底層依賴輕量級的canvas類庫ZRender，提供直觀，生動，可交互，可高度個人化自訂的資料視覺化圖表。創新的拖曳重運算、資料視圖、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。

簡而言之，echarts就是一個幫助資料視覺化的函式庫。

看完了echarts是什麼的解釋後，我們再來看看echarts如何使用？

上面我們說到echarts是商業級資料圖表。那麼這些圖表都有哪些我們來看一下

折線圖（區域圖）、長條圖（長條圖）、散點圖（氣泡圖）、K線圖、圓餅圖（環狀圖）

雷達圖（填滿雷達圖）、和弦圖、力導向佈局圖、地圖、儀表板、漏斗圖、事件河川圖等12類圖表。

在我們知道圖表有哪些之後，我們就需要知道如何使用了。

首先我們需要下載外掛：https://github.com/ecomfe/echarts/archive/1.4.1.zip

然後我們來用一個例子來說明echarts所使用的基本流程。

echarts使用第一步：首先需要在檔案中引入JS函式庫，可以使用百度的CDN

<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>

登入後複製

echarts使用第二步：之後建立一個用於顯示圖表的DIV

<div id="pie" style="height:400px"></div>
<div id="bar" style="height:400px"></div>

登入後複製

echarts使用第三步：配置載入的圖表類型及路徑

<script type="text/javascript">
        // 路径配置
        require.config({
            paths:{ 
                &#39;echarts&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,
                &#39;echarts/chart/bar&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,
        &#39;echarts/chart/pie&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;
            }
        });
</script>

登入後複製

echarts使用第四步：配置圖表資料

optionpie = {
　　title: {
　　　　text: &#39;2018年08月客户总满意度比例图&#39;,subtext: &#39;测试人员&#39;,x: &#39;center&#39;
　　},
　　tooltip: {
　　　　trigger: &#39;item&#39;,
　　　　formatter: "{a}<br/>{b} : {c} ({d}%)"
　　},
　　legend: {
　　　　orient: &#39;vertical&#39;,
　　　　x: &#39;left&#39;,
　　　　data: [&#39;满意&#39;, &#39;不满意&#39;]
　　},
　　toolbox: {
　　　　show: true,
　　　　feature: {
　　　　　　restore: true,
　　　　　　saveAsImage: true
　　　　}
　　},
　　calculable: true,
　　series: [
　　{
　　　　name: &#39;总满意度百分比&#39;,
　　　　type: &#39;pie&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [
　　　　{ value: 100, name: &#39;满意&#39; },
　　　　{ value: 16, name: &#39;不满意&#39;}
　　]
　　}
　　]
};

option = {
　　title: {
　　　　text: &#39;2018年08月客户满意度分布图&#39;,subtext: &#39;测试人员&#39;,x: &#39;left&#39;
　　},
　　tooltip: {
　　　　trigger: &#39;axis&#39;,
　　　　formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}"
　　},
　　legend: {
　　　　x: &#39;right&#39;,
　　　　padding: [5,70,5,5],
　　　　data: [&#39;满意&#39;, &#39;不满意&#39;]
　　},
　　toolbox: {
　　　　show: true,
　　　　feature: {
　　　　　　restore: true,
　　　　　　saveAsImage: true
　　　　}
　　},
　　calculable: true,
　　xAxis: [
　　{
　　　　type: &#39;category&#39;,
　　　　data: [&#39;客服人员满意度&#39;, &#39;维修人员满意度&#39;, &#39;售后人员满意度&#39;]
　　}
　　],
　　yAxis: [
　　{
　　　　type: &#39;value&#39;,
　　　　splitArea: { show: true }
　　}
　　],
　　series: [
　　{
　　　　name: &#39;满意&#39;,
　　　　type: &#39;bar&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [10, 5, 8]},
　　{
　　　　name: &#39;不满意&#39;,
　　　　type: &#39;bar&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [2, 4, 6]}
　　]
};

登入後複製

echarts使用第五步：將資料顯示在圖表中

require(
[
　　&#39;echarts&#39;,
　　&#39;echarts/chart/pie&#39;,
　　&#39;echarts/chart/bar&#39;
],
function (ec) {
　　//饼状图
　　var pieChart = ec.init(document.getElementById(&#39;pie&#39;));
　　pieChart.setOption(optionpie);
　　
　　//柱状图
　　var myChart = ec.init(document.getElementById(&#39;bar&#39;));
　　myChart.setOption(option);
}
)

登入後複製