使用Echarts快速绘图-根据数据实时渲染直方图与折线图

最新推荐文章于 2024-05-17 14:44:08 发布

Sojourn2017

最新推荐文章于 2024-05-17 14:44:08 发布

阅读量6.9k

点赞数

分类专栏： JavaScript 文章标签： echarts 直方图与线图绘制 JS javascript

本文链接：https://blog.csdn.net/weixin_40870788/article/details/81207261

版权

本文介绍了如何使用Echarts库在Web环境中快速创建直方图和折线图。Echarts是一个基于JavaScript的开源可视化库，支持多种浏览器和设备。文章通过简单的步骤展示了Echarts的基本用法，包括引入库、初始化DOM、设置配置和绘制图表。并给出了使用Webpack打包的项目目录结构和关键代码示例。

摘要由CSDN通过智能技术生成

Echarts

ECharts，一个使用 JavaScript实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

通过使用ECharts，可以快速实现数据可视化，下面简单演示一下直方图与折线图的简单使用
实现效果如下：
这里写图片描述

echarts的使用大致可以分为以下5个部分：

引入ECharts.js 库（可以通过官网地址下载）
为ECharts 实例准备具备大小的DOM
初始化实例
指定绘图的相关配置
使用实例

本例中使用webpack对文件进行打包，webpack的简单快速应用可以查看Webpack V4安装使用与常用配置总结

demo目录如下:

  webpack-demo
  |- index.html
  |- /src
    |- index.js
    |- /js
      |- dynamic-bar-graph.js
  |- /build

index.html 文件代码如下，#dynamic-bar-graph 为准备的用于绘制饼图的div, bundle.js 为打包好的js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>echarts-test</title>
    <!-- <script src="./lib/echarts.js"></script> -->
    <style>
        #dynamic-bar-graph {

最低0.47元/天解锁文章

Sojourn2017

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用Echarts快速绘图-根据数据实时渲染直方图与折线图

EchartsECharts，一个使用 JavaScript实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。通过使用ECharts，可以快速实现数据可视化，下面简单演示一下直方图与折线图的...
复制链接

扫一扫