Chart.js與ECharts.js圖表使用過程組件對比

更新時間：2023年10月21日 14:53:10 投稿：yin

chartjs只能基于canvas,雖然只有英文文檔,但定制化程度更高,社區(qū)成熟,功能就更加穩(wěn)定,ECharts.js可以基于svg或者canvas去渲染,有融合主流前端框架的社區(qū)庫,另外ECharts.js還支持3d效果的圖表,相當炫酷,國內(nèi)開發(fā)者大多數(shù)使用這個,有中文文檔

在前端開發(fā)的過程中，經(jīng)常會使用到圖表相關(guān)的東西，很多時候，圖表在展示數(shù)據(jù)方面有著無與倫比的優(yōu)勢。下面我們就來看看兩個常用的圖表相關(guān)的插件jscharts和ECharts。chartjs 和echarts是D3之外的比較容易使用的數(shù)據(jù)可視化JS庫，兩者的配置基本類似。前者，功能相對單一，但是不依賴任何其他插件；后者功能豐富，有時候需要依賴部分插件，我們可根據(jù)需要選擇合適的插件來使用。

jscharts

什么是JS Charts?

JS Charts是一款基于JavaScript的幾乎不需要再重新編碼的圖表編譯器。通過它，使用JavaScript來繪制圖表將會是一件很輕松的事情，因為你只需要使用客戶端編碼就可以實現(xiàn)，不需要額外添加其他插件或者服務(wù)端模塊，只需要引入文件，準備好數(shù)據(jù)（xml，json或者數(shù)組），就可以生成圖表！

JS Charts可以用來繪制不同類型的圖表，例如餅狀圖，柱狀圖以及簡單的折線圖等等。

簡單使用：

（1）首先，我們引入文件，我們只需要引入一個js文件jscharts.js，它包含了主要的代碼和用來適配ie瀏覽器的canvas函數(shù)。

<script type="text/javascript" src="jscharts.js"></script>

（2）容器，第二步是準備一個將來用來容納圖表的容器，它可以是一個簡單的div標簽，這個標簽必須要有一個獨一無二的id

<div id="chartcontainer">This is just a replacement in case Javascript is not available or used for SEO purposes</div>

　這個容器的內(nèi)容將會被jschart渲染出來的圖表代替。

（3）繪制第一個圖表，第三步，我們需要幾行JavaScript代碼。包括：用于繪制圖表的數(shù)據(jù)，簡單的二維數(shù)組。每一個子元素數(shù)組包含兩個元素，這兩個元素將是一個折線圖的兩個頂點，或者其他圖表中的某個元素。

<script type="text/javascript">
    var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
    var myChart = new JSChart('chartcontainer', 'line');
    myChart.setDataArray(myData);
    myChart.draw();
</script>

簡單的說明一下，首先定義數(shù)據(jù)，然后選擇我們寫好的容器，加上類型參數(shù)，創(chuàng)建新的圖表對象。第三步，設(shè)置圖表對象用來渲染的數(shù)據(jù)，最后，繪制。（使用免費版的時，會自動添加他們產(chǎn)品的logo）

使用json數(shù)據(jù)繪制：

{
    "JSChart": {
        "datasets": [
            {
                "type": "pie",
                "data": [
                    {
                        "unit": "Unit_1",
                        "value": "20"
                    }, {
                        "unit": "Unit_2",
                        "value": "10"
                    }, {
                        "unit": "Unit_3",
                        "value": "30"
                    }, {
                        "unit": "Unit_4",
                        "value": "10"
                    }, {
                        "unit": "Unit_5",
                        "value": "5"
                    }
                ]
            }
        ]
    }
}

var myChart = new JSChart('chartcontainer', 'pie');
myChart.setDataJSON('data.json');
myChart.draw();

ECharts

ECharts是一個使用 JavaScript 實現(xiàn)的開源可視化庫，可以流暢的運行在 PC 和移動設(shè)備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表。

下載的時候我們有很多選擇，根據(jù)自己需求下載合適版本即可。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/echarts.min.js" ></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大?。▽捀撸┑腄om -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定圖表的配置項和數(shù)據(jù)
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

Chart.js與ECharts.js的區(qū)別

Chart.js與ECharts.js的區(qū)別之“畫布”

Chart.js

Chart.js的展示部分需要使用canvas標簽，再通過id來綁定script代碼部分。

<div style=" width: 100%;display: flex;align-items: center;justify-content: center;">
	<div style="width: 70%;">
		<canvas id="myChart1"></canvas> 
	</div>
</div>

ECharts.js

ECharts.js的展示部分直接使用div標簽即可，注意必須規(guī)定畫布的大小，再通過id來綁定script代碼部分。

<div style=" width: 100%;display: flex;align-items: center;justify-content: center;">
	<div style="width: 70%;height: 500px;" id="myChart1"></div>
</div>

Chart.js與ECharts.js的區(qū)別之“語法”

具體語法代碼寫在script標簽里面。畫布中的id對應(yīng)document.getElementById('myChart1');里的id。

Chart.js線形圖

Chart.js聲明方式為：var chart = new Chart(ctx, option)

<script type="text/javascript">
            var ctx = document.getElementById('myChart1').getContext('2d');
            var chart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'line',
                // The data for our dataset
                data: {
                    labels: ["201712", "201801", "201802", "201803", "201804", "201805", "201806",
                        "201807", "201808", "201809", "201810", "201811", "201812", "201901", "201902",
                        "201903", "201904", "201905", "201906", "201907", "201908", "201909", "201910",
                        "201911"
                    ],
                    datasets: [{
                            label: "綜合評級",
                            fill: false, //是否填充，不填充就顯示線。
                            backgroundColor: "rgba(242,190,64,1)", //線的顏色
                            borderColor: "rgba(242,190,64,1)",
                            pointBackgroundColor: "rgba(255,255,255,1)", //數(shù)據(jù)點的顏色
                            pointStrokeColor: "rgba(242,190,64,1)",
                            data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],

                        },
                        {
                            label: "食品安全評級",
                            fill: false,
                            backgroundColor: "rgba(159,190,223,1)",
                            borderColor: "rgba(159,190,223,1)",
                            pointBackgroundColor: "rgba(255,255,255,1)",
                            pointStrokeColor: "rgba(159,190,223,1)",

                            data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                        }
                    ]
                },

                // Configuration options go here
                options: {
                    customXLabelRota: 90,//x軸的標注傾斜展示
                    customXLabelRotaMinNumber: 90,//x軸的標注傾斜展示
                    scaleShowGridLines: false,
                    pointDot: true,
                    legend: {
                        labels: {
                            usePointStyle: true,//圖例的樣式使用點的樣式
                        }
                    },
                    scales: {
                        yAxes: [{ //y軸
                            ticks: {
                                beginAtZero: true, //y軸從0開始
                                min: 0, //y軸最小值
                                max: 15, //y軸最大值
                                stepSize: 3 //y軸尺度跨度
                            }
                        }],
                        xAxes: [{
                            ticks: {}
                        }]
                    },

                }
            });
        </script>

ECharts.js線形圖

ECharts.js聲明方式為：var myChart = echarts.init(document.getElementById('myChart1'));

<script type="text/javascript">
            var myChart = echarts.init(document.getElementById('myChart1'));
            option = {
                legend: {
                    data: ['綜合評級', '食品安全評級']
                },
                tooltip: {
                    trigger: 'axis', //鼠標覆蓋出現(xiàn)輔助標線
                },
                grid: { //防止標簽溢出
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ["201712", "201801", "201802", "201803", "201804", "201805", "201806",
                        "201807", "201808", "201809", "201810", "201811", "201812", "201901", "201902",
                        "201903", "201904", "201905", "201906", "201907", "201908", "201909", "201910",
                        "201911"
                    ],
                    axisLabel: { //軸值傾斜展示
                        interval: 0,
                        rotate: 40
                    },
                },
                yAxis: {
                    type: 'value',
                    max: 15,
                },
                series: [{
                        name: '綜合評級',
                        type: 'line',
                        // stack: '總量',

                        data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
                        // 顯示數(shù)值
                        itemStyle: {
                            normal: {
                                color: "rgba(242,190,64,1)", //設(shè)置線條顏色
                                label: {
                                    show: true
                                }
                            }
                        },
                    },
                    {
                        name: '食品安全評級',
                        type: 'line',
                        // stack: '總量',
                        data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                        // 顯示數(shù)值
                        itemStyle: {
                            normal: {
                                color: "rgba(159,190,223,1)", //設(shè)置線條顏色
                                label: {
                                    show: true
                                }
                            }
                        },
                    }
                ]
            };
            myChart.setOption(option);//不寫就畫不出來哦
        </script>