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

已于 2022-01-25 15:57:18 修改
阅读量1.7w 收藏 30
点赞数 6
分类专栏： 没事瞎研究 文章标签： javascript
于 2020-01-06 11:42:29 首次发布
Jeremy Liu
本文链接：https://blog.csdn.net/qq_36235241/article/details/103851693
版权

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

常用的 图表组件 Chart.js与ECharts.js的简要介绍与使用。

Chart.js

Chart.js官方网址。里面包括文档、例子和GitHub代码。界面小清新很漂亮。
Chart.js官网漂亮的界面
例子很全。各种图表都有。点进去还可以修改数据条数、数据长度等等。
Chart.js官方例子

ECharts.js

ECharts.js官方网址。EChart.js是Apache出的图标组件库。与Chart.js相比，Echarts.js动态效果更优秀一些。界面看起来就更“上档次”。支持中英文切换，亲民。
ECharts.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>

Chart.js线形图

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>

ECharts.js线形图
对比可以发现Chart.js是将dataset和option分开配置的，Echarts.js是将所有的配置、数据都写在option里面。

Chart.js雷达图
 <script type="text/javascript">
            var ctx2 = document.getElementById('myChart1').getContext('2d');
            var chart2 = new Chart(ctx2, {
                // The type of chart we want to create
                type: 'radar',
                // The data for our dataset
                data: {
                    labels: ["物理", "魔法", "魔抗", "护甲", "速度", "操作难度"],
                    datasets: [{
                        label: false,
                        fill: false,
                        backgroundColor: "rgba(174,29,0,1)",
                        borderColor: "rgba(174,29,0,1)",
                        borderWidth: 1,
                        pointBackgroundColor: "rgba(255,255,255,1)",
                        pointBorderColor: "rgba(174,29,0,1)",
                        pointDotStrokeWidth: 0.5,
                        pointRadius: 1.5,
                        backgroundColor: [
                            'rgba(255, 255, 255, 1)',
                            'rgba(238, 238, 238, 1)',
                            'rgba(255, 255, 255, 1)',
                            'rgba(238, 238, 238, 1)',

                        ],
                        data: [2.9, 4.8, 4.8, 4.8, 4.8, 4.5],

                    }]
                },

                // Configuration options go here
                options: {
                    legend: { //图例
                        display: false
                    },
                    scale: {
                        gridLines: { //网格
                            color: "#bbb",
                        },
                        ticks: { //刻度
                            display: false, //不展示轴尺度标记
                            beginAtZero: true,
                            suggestedMin: 0,
                            suggestedMax: 5,
                            stepSize: 1, //网格线间距步长
                        },
                    }
                }
            });
        </script>

Chart.js雷达图

ECharts.js雷达图
<script type="text/javascript">
            var myChart1 = echarts.init(document.getElementById('myChart1'));
            option = {
                title: {},
                tooltip: {},
                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator: [{
                            name: '物理',
                            max: 5
                        },
                        {
                            name: '魔法',
                            max: 5
                        },
                        {
                            name: '魔抗',
                            max: 5
                        },
                        {
                            name: '护甲',
                            max: 5
                        },
                        {
                            name: '速度',
                            max: 5
                        },
                        {
                            name: '操作难度',
                            max: 5
                        }
                    ]
                },
                series: [{
                    type: 'radar',
                    // areaStyle: {normal: {}},
                    data: [{
                        value: [2.9, 4.8, 4.8, 4.8, 4.8, 4.5],
                        name: '大怪兽'//选择点的时候展示所有数据值和标题
                    }]
                }],

            };
            myChart1.setOption(option);
        </script>

ECharts.js雷达图
两种组件库的雷达图样式不大一样，可以根据需求做出选择。

另外ECharts.js还支持3d效果的图表，相当炫酷。值得研究。
ECharts.js3d效果

girljeremy
关注
  • 6
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
简单折线图 echarts 和 chartjs的 比较
阿豪
02-27 375
原文链接: 简单折线图 echarts 和 chartjs的 比较 ...
echarts.js 动态生成多个图表 使用vue封装组件操作
10-15
ECharts.js是一款由百度开发的开源JavaScript图表库，提供了丰富的可视化图表类型，如柱状图、折线图、饼图等。Vue.js则是一个轻量级的前端框架，用于构建用户界面。将两者结合，我们可以轻松地在Vue应用中实现数据...
Chart.js 和echarts.js 对比
克里斯蒂亚诺更新的博客
03-14 1357
如果你需要快速创建简单的图表，并且对性能要求不是很高，那么 Chart.js 是一个很好的选择。而如果你需要创建更复杂、交互性更强的图表，并且愿意花费更多时间学习和掌握更复杂的 API，那么 ECharts.js 可能更适合你的需求。你可以看到，Chart.js 示例中创建了一个 canvas 元素，而 ECharts.js 示例中创建了一个 div 元素作为容器。Chart.js 和 ECharts.js 都是流行的用于创建交互式图表的 JavaScript 库，但它们在一些方面有所不同。
【Echarts】使用及应用案例
最新发布
每天進步一點點
06-26 1238
第一种引入方式：把下载好的echarts.js 文件存放到js文件下，通过script标签的src属性引入。min:压缩 ，省去空格、换行，所有的代码在一行中书写。// 基于准备好的dom，初始化echarts实例。// 基于准备好的dom，初始化echarts实例。未压缩：保留的空格、换行。// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。// 指定图表的配置项和数据。// 指定图表的配置项和数据。//鼠标指向柱状图浮出详情。//鼠标指向柱状图浮出详情。
使用Chartjs
weixin_30372371的博客
06-26 276
1、这是个人的mark档，逼迫自己以后写这样的博客，所以不是分享 2、chartjs是一个图表控件集合，使用html5的canvas进行绘制。 注意：新手请先直接进入官网：http://www.chartjs.org/（一定是要这个，如果是其他的可能会入坑，因为版本问题） 然后进入Documentation 或者，运行以下代码，调用的是cdn js. <!DOCTYPE htm...
chartjs和echartsjs库简介
专研前端，探索后端
05-07 1145
chart.js和echarts.js: 尽管我们已经掌握了canvas绘图和SVG矢量图，在实际开发中我们依旧不会使用canvas和SVG，因为考虑到开发成本，一般会采用相关的图表库进行辅助开发，市面上常用的图表库有chart.js和echarts.js；如果想要了解更多，建议访问以下相关文档： chart.js : 是国外工程师开发的，一般的图表都可以使用它能够做出来；但是它在国外服务器上面，国内访问官方网站：https://www.chartjs.org/有时候上不去；这里推荐相关国内中文文档：htt
初识js-charts和E-charts
u011927449的博客
07-26 536
在前端开发的过程中，经常会使用到图表相关的东西，很多时候，图表在展示数据方面有着无与伦比的优势。下面我们就来看看两个常用的图表相关的插件jscharts和ECharts。前者，功能相对单一，但是不依赖任何其他插件；后者功能丰富，有时候需要依赖部分插件，我们可根据需要选择合适的插件来使用。 jscharts 什么是JS Charts? JS Charts是一款基于JavaScript的几乎不需要再重新编码的图表编译器。通过它，使用JavaScript来绘制图表将会是一件很轻松的事情，因为你只需要使用客户端编码
详解vue文件中使用echarts.js的两种方式
10-17
在Vue项目中集成ECharts.js，通常有两种常见的方式：一种是通过组件的形式，另一种是直接在Vue文件中引入。这两种方法都有其优缺点，适用于不同的项目需求。 首先，我们来看第一种方式，即以组件的形式使用ECharts...
vue.js如何将echarts封装为组件一键使用详解
01-19
本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 说明 做项目的时候为了让数据展示的更加直观，总会用到图表相关的控件...
index.js_echarts中几个典型的图表的js文件_
10-02
学习这个文件，你可以深入理解ECharts的用法，例如事件监听、动态数据加载、自定义图表组件等高级功能。 为了更好地理解和使用这些图表，你需要掌握ECharts的基本配置语法，理解每个属性的作用，以及如何通过API...
echarts.js
05-02
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
echarts.js完整版文件
03-04
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
使用chart和echarts制作图表
weixin_34204722的博客
11-05 271
前 言 chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。它可以帮你用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。Chart.js基于HTML5 canvas技术，支持所有现代浏览器，并且针对IE7/8提供了降级替代方案。并且它不依赖任何外部工具库，轻量级（压缩之后仅有4.5k）...
echart,highcharts,chart.js等chart属性记录
xy_ggsddu的博客
11-11 5162
之前有个项目需要使用图表，于是乎讯找了几个比较流行的chart框架，挑选出来几个比较不错的框架进行记录方便以后使用。 首先介绍一下百度的框架echarts，毕竟我还是很爱国的。 echarts为百度编写的一款开源框架，在移动端也兼容，mui框架就使用的这款chart。 echarts的优点是： 1.国人开发，文档全，便于开发和阅读文档。 2.图表丰富，可以适用各种各样的功能。 echa
使用 charts.js、flot-charts、Echarts图表插件。
qq_44158529的博客
09-03 1011
charts.js 基于 HTML5 的 JavaScript 图表库。 该组件特点就是简单，轻巧。 缺点：想要在图表上实现标识线比较麻烦。 目前支持 ，Line，Bar，Radar，Polar Area，Pie&Doughnut。 初始化： <canvas id="barChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas> //定义数据
vue.js中使用echarts实现数据动态刷新功能
07-16
### 回答1： 在Vue.js中使用Echarts实现数据动态刷新功能，需要先安装Echarts和Vue.js的相关依赖。 1. 首先，在Vue项目中安装Echarts和Vue-Echarts依赖。可以使用npm或yarn安装。 ```bash npm install echarts vue-echarts ``` 2. 在Vue的组件中引入Echarts和Vue-Echarts。 ```javascript import echarts from 'echarts' import VueECharts from 'vue-echarts' // 引入需要的Echarts主题 import 'echarts/theme/macarons' export default { components: { VueECharts }, data() { return { chartOptions: {}, data: [] } }, mounted() { this.initChart() // 调用数据刷新方法 this.refreshData() }, methods: { initChart() { // 初始化图表配置 this.chartOptions = { // 设置Echarts主题 theme: 'macarons', // 设置图表类型和数据 series: [{ type: 'bar', data: this.data }] } }, refreshData() { // 模拟异步获取数据 setTimeout(() => { // 更新数据 this.data = [100, 200, 300, 400, 500] // 在数据更新后重新渲染图表 this.$refs.chart.refresh() // 定时调用数据刷新方法 this.refreshData() }, 2000) } } } ``` 3. 在Vue模板中使用Vue-Echarts组件显示图表。 ```html <template> <div> <vue-echarts ref="chart" :options="chartOptions"></vue-echarts> </div> </template> ``` 以上是一个简单的示例，通过不断更新数据并定时刷新图表实现了数据动态刷新功能。在实际开发中，可以根据需求对图表样式、数据等进行自定义配置。 ### 回答2： Vue.js是一种基于JavaScript的前端框架，而Echarts是一种数据可视化工具。在Vue.js中使用Echarts实现数据动态刷新功能，主要分为以下几个步骤。 首先，我们需要安装Echarts。可以通过npm或者yarn来安装Echarts，命令如下： ``` npm install echarts --save ``` 然后，在Vue组件中引入Echarts的库文件，可以在main.js中全局引入，或者在需要使用Echarts的组件中局部引入，命令如下： ``` import echarts from 'echarts' ``` 接下来，创建一个div作为Echarts图表的容器，并设置其样式和大小，例如： ``` <div id="chart" style="width: 600px; height: 400px;"></div> ``` 然后，在Vue组件的生命周期钩子函数中，使用Echarts创建图表，并将数据传入图表。例如，在created钩子函数中： ``` created() { this.initChart() }, methods: { initChart() { // 根据容器的id获取图表的dom对象 const chartDom = document.getElementById('chart') // 创建echarts实例对象 const myChart = echarts.init(chartDom) // 根据实际需求设置图表的配置项和数据 const option = { //... series: [ { //... data: this.data // 设置数据 } ] } // 使用配置项配置图表 myChart.setOption(option) } } ``` 最后，当需要刷新数据时，可以通过更新this.data来动态刷新图表数据，并重新渲染图表。例如，在一个按钮的点击事件中： ``` methods: { refreshData() { // 在此处根据实际需求更新this.data的值 //... // 重新渲染图表 this.initChart() } } ``` 通过以上步骤，就可以在Vue.js中使用Echarts实现数据动态刷新功能了。当数据变化时，只需要更新数据并重新渲染图表即可。 ### 回答3： 在Vue.js中使用ECharts实现数据动态刷新功能的具体步骤如下： 1. 首先，安装ECharts库。可以通过npm安装ECharts，运行命令：npm install echarts --save 2. 引入ECharts库。在Vue组件中，通过import语句引入ECharts库，如：import echarts from 'echarts' 3. 在Vue组件的data选项中定义一个变量，用于存储ECharts实例。例如：chart: null 4. 在Vue组件的mounted钩子函数中，初始化ECharts实例，并将其挂载到页面上的DOM节点上。例如： ``` mounted() { this.chart = echarts.init(this.$refs.chartContainer) } ``` 5. 在Vue组件的methods选项中，编写一个方法用于更新图表数据。例如： ``` updateChart() { // 获取新的数据 const newData = fetchData() // 更新图表数据 this.chart.setOption({ series: [ { data: newData } ] }) } ``` 在这个方法中，首先通过适当的方式获取新的数据，然后通过setOption方法更新图表的数据。 6. 在需要的时机，调用updateChart方法来更新图表数据。 以上就是在Vue.js中使用ECharts实现数据动态刷新功能的基本步骤。在实际应用中，可能还需要根据具体需求对图表进行配置和样式的调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值