从零开始的JavaScript入门-使用JS绘制柱状图与折线图

Leaf_舟

于 2019-12-19 18:42:49 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：从零开始JavaScript入门系列文章标签：柱状图折线图 JavaScript html

本文链接：https://blog.youkuaiyun.com/weixin_38698317/article/details/103619540

这篇博客介绍了如何使用JavaScript从零开始绘制柱状图和折线图，这两种图表在数据可视化中非常常见。文章展示了示例代码，并指出只需简单修改即可将折线图转换为柱状图。数据定义为一维数组，颜色等参数可根据需求调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇博客讲解了如何使用JS绘制美观的热图，本篇准备讲解一下最基本的统计图：柱状图与折线图。

这两个图其实本质上是一样的。老样子，先上效果：

再上代码：

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <style>
   </style>
   <body style="height: 100%; margin: 0;background-color:#000">
       <div id="container" style="width: 30%;height: 30%"></div>
       </div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script