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

Echarts

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

通过使用ECharts,可以快速实现数据可视化,下面简单演示一下直方图与折线图的简单使用
实现效果如下:
使用Echarts快速绘图-根据数据实时渲染直方图与折线图_第1张图片

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文件。


<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-testtitle>
    
    <style>
        #dynamic-bar-graph {
            

你可能感兴趣的:(JavaScript,echarts,直方图与线图绘制,JS,javascript)