本文对比Chart.js与ECharts两款主流前端图表库。Chart.js基于Canvas，配置轻量且无需额外依赖；ECharts支持SVG与Canvas，功能丰富且内置3D效果。文章详细解析了两者在容器绑定、语法声明及数据渲染上的差异，帮助开发者根据项目需求选择合适的可视化工具。
在前端开发中，数据可视化图表是展示信息的强力工具。目前，Chart.js和ECharts是除D3之外较为易用的数据可视化JavaScript库，两者的配置逻辑基本相似。Chart.js功能相对单一，但优势在于不依赖任何其他插件；而ECharts功能更为丰富，部分场景下可能需要依赖特定插件。开发者可根据具体项目需求选择合适的库进行开发。
JS Charts
什么是JS Charts?
JS Charts是一款基于JavaScript的图表生成工具，几乎无需重新编码。通过它，使用JavaScript绘制图表变得十分轻松，因为只需进行客户端编码即可实现，无需额外添加其他插件或服务端模块。只需引入相关文件并准备好数据（如XML、JSON或数组），即可生成图表。
JS Charts支持绘制多种类型的图表，例如饼状图、柱状图以及简单的折线图等。
简单使用：
（1）首先，我们需要引入文件。只需引入一个js文件jscharts.js，它包含了主要的代码以及用于适配IE浏览器的canvas函数。
<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>该容器的内容将被JS Charts渲染出的图表所替换。
（3）绘制第一个图表。第三步需要编写几行JavaScript代码，包括用于绘制图表的数据，通常是一个简单的二维数组。每个子元素数组包含两个元素，这两个元素将构成折线图的两个顶点，或其他图表中的某个数据点。
<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>简要说明：首先定义数据，然后选择预先写好的容器，添加类型参数以创建新的图表对象。第三步，设置图表对象用于渲染的数据，最后执行绘制操作。（注意：使用免费版时，会自动添加该产品的Logo）。
使用json数据绘制：
{
"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实现的开源可视化库，可流畅运行在PC和移动设备上，兼容当前绝大部分浏览器（包括IE8/9/10/11、Chrome、Firefox、Safari等）。其底层依赖轻量级的矢量图形库ZRender，提供直观、交互丰富且可高度个性化定制的数据可视化图表。
下载时提供了多种选择，用户可根据自身需求下载合适的版本。
<!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准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
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>Chart.js与ECharts.js的区别
Chart.js与ECharts.js的区别之“画布”
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标签即可，但必须规定画布的大小，再通过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的区别之“语法”
具体语法代码写在script标签里面。画布中的id对应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)", //数据点的颜色
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', //鼠标覆盖出现辅助标线
},
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],
// 显示数值
itemStyle: {
normal: {
color: "rgba(242,190,64,1)", //设置线条颜色
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],
// 显示数值
itemStyle: {
normal: {
color: "rgba(159,190,223,1)", //设置线条颜色
label: {
show: true
}
}
},
}
]
};
myChart.setOption(option);//不写就画不出来哦
</script>
总结
Chart.js只能基于canvas，虽然仅有英文文档，但其定制化程度更高，社区成熟，功能更加稳定。
ECharts.js可以基于svg或者canvas去渲染，有融合主流前端框架的社区库，另外ECharts.js还支持3d效果的图表，相当炫酷。国内开发者大多数使用这个，有中文文档。
到此这篇关于Chart.js与ECharts.js图表使用过程组件对比的文章就介绍到这了,更多相关Chart.js与ECharts.js图表对比内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！