Chart.js与ECharts.js图表使用过程组件对比

在前端开发的过程中，经常会使用到图表相关的东西，很多时候，图表在展示数据方面有着无与伦比的优势。下面我们就来看看两个常用的图表相关的插件jscharts和ECharts。chartjs 和echarts是D3之外的比较容易使用的数据可视化JS库，两者的配置基本类似。前者，功能相对单一，但是不依赖任何其他插件；后者功能丰富，有时候需要依赖部分插件，我们可根据需要选择合适的插件来使用。

jscharts

什么是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>

　这个容器的内容将会被jschart渲染出来的图表代替。

（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>

总结

chartjs只能基于canvas，虽然只有英文文档，但定制化程度更高，社区成熟，功能就更加稳定，

ECharts.js可以基于svg或者canvas去渲染，有融合主流前端框架的社区库，另外ECharts.js还支持3d效果的图表，相当炫酷。国内开发者大多数使用这个，有中文文档。

到此这篇关于Chart.js与ECharts.js图表使用过程组件对比的文章就介绍到这了,更多相关Chart.js与ECharts.js图表对比内容请搜索本网站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本网站！

您可能感兴趣的文章:

利用Echarts实现图例显示百分比效果
ECharts饼图颜色设置的4种方式总结
使用echarts饼状图label既在内部显示数值(百分比),又显示外部指示线

Chart.js与ECharts.js图表使用过程组件对比

目录

jscharts

什么是JS Charts?

简单使用：

使用json数据绘制：

ECharts

Chart.js与ECharts.js的区别

Chart.js与ECharts.js的区别之“画布”

Chart.js与ECharts.js的区别之“语法”

总结

2023年最新react面试题总结大全(附详细答案)

python实现自动更换ip的方法

Python中的for循环示例详解

可爱松鼠微信头像图片

Ghost安装器怎么安装Win10-Ghost安装器下安装Win10专业版系统详细图文教程

VUE3使用JSON编辑器的详细图文教程

iphone X如何关闭后台？苹果iphone X关闭软件后台方法介绍

Uint 和 int 的区别解析

Headshot插件如何使用-Headshot插件使用教程

Filecoin(FIL)是什么币？如何挖掘Filecoin

五个摄影技巧教你如何拍出完美错觉的相片

只需一招利用Hosts文件屏蔽流氓网站

网页加密完全攻略

微信小程序上线发布流程图文详解

魔兽世界怀旧服60级锻造技能攻略 1-300锻造技能提升技巧

premiere导出视频出现一个mp4和xmp文件的解决办法

120个极品网站(转自网络)

AU怎么消齿音- audition音频设置对数消除齿音效果的技巧

js实现每日签到功能

键盘中省略号该怎么打- 电脑输入省略号的多种方法

Chart.js与ECharts.js图表使用过程组件对比

目录

jscharts

什么是JS Charts?

简单使用：

使用json数据绘制：

ECharts

Chart.js与ECharts.js的区别

Chart.js与ECharts.js的区别之“画布”

Chart.js与ECharts.js的区别之“语法”

总结

2023年最新react面试题总结大全(附详细答案)

python实现自动更换ip的方法

Python中的for循环示例详解

可爱松鼠微信头像图片

Ghost安装器怎么安装Win10-Ghost安装器下安装Win10专业版系统详细图文教程

VUE3使用JSON编辑器的详细图文教程

iphone X如何关闭后台？苹果iphone X关闭软件后台方法介绍

Uint 和 int 的区别解析

Headshot插件如何使用-Headshot插件使用教程

Filecoin(FIL)是什么币？如何挖掘Filecoin

五个摄影技巧教你如何拍出完美错觉的相片

只需一招 利用Hosts文件屏蔽流氓网站

网页加密完全攻略

微信小程序上线发布流程图文详解

魔兽世界怀旧服60级锻造技能攻略 1-300锻造技能提升技巧

premiere导出视频出现一个mp4和xmp文件的解决办法

120个极品网站(转自网络)

AU怎么消齿音- audition音频设置对数消除齿音效果的技巧

js实现每日签到功能

键盘中省略号该怎么打- 电脑输入省略号的多种方法

只需一招利用Hosts文件屏蔽流氓网站