一:echarts

1.简介

一个基于 JavaScript 的开源可视化图表库

2.echars的使用导入CDN
1.导入echars的CDN标签

# 标签

<script src="https://lib.baomitu.com/echarts/5.1.2/echarts.min.js"></script>
3.绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 之后，添加：

<body>

  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->

  <div id="main" style="width: 600px;height:400px;"></div>

</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://lib.baomitu.com/echarts/5.1.2/echarts.min.js"></script>

</head>

<body>

    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->

    <div id="main" style="width: 100%;height:800px;"></div>

</body>

<script>

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据

      option = {

      title: {

        text: 'Referer of a Website',

        subtext: 'Fake Data',

        left: 'center'

      },

      tooltip: {

        trigger: 'item'

      },

      legend: {

        orient: 'vertical',

        left: 'left'

      },

      series: [

        {

          name: 'Access From',

          type: 'pie',

          radius: '50%',

          data: [

            { value: 1048, name: 'Search Engine' },

            { value: 735, name: 'Direct' },

            { value: 580, name: 'Email' },

            { value: 484, name: 'Union Ads' },

            { value: 300, name: 'Video Ads' }

          ],

          emphasis: {

            itemStyle: {

              shadowBlur: 10,

              shadowOffsetX: 0,

              shadowColor: 'rgba(0, 0, 0, 0.5)'

            }

          }

        }

      ]

    };

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

</html>

使用echarts(可视化图表库)的更多相关文章

  1. ECharts JavaScript图表库 ECharts

    ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

  2. 可视化图表库--goJS

    GoJS是Northwoods Software的产品.Northwoods Software创立于1995年,专注于交互图控件和类库.旗下四款产品: GoJS:用于在HTML上创建交互图的纯java ...

  3. vue可视化图表 基于Echarts封装好的v-charts简介

    **vue可视化图表 基于Echarts封装好的v-charts** 近期公司又一个新的需求,要做一个订单和销售额统计的项目,需要用到可视化图表来更直观的展示数据.首先我想到的是Echarts,众所周 ...

  4. 最新开源JavaScript 图表库 ECharts推荐

    ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ECharts 提供大量常用的数据可视化图表,底层基于Z ...

  5. Echarts简单图表

    一.实现要点 常用可视化图表库 Echarts HighCharts D3.js neo4j (NOSQL) 1.导入js库 <script type="text/javascript ...

  6. 【可视化】DataV接入ECharts图表库 可视化利器强强联手

    DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...

  7. 开源的数据可视化JavaScript图表库：ECharts

    ECharts (Enterprise Charts 商业产品图表库)是基于HTML5 Canvas的一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽 ...

  8. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  9. ECharts（Enterprise Charts 商业产品图表库）初识

    一.简介 大数据时代,重新定义图表的时候到了,所以随之ECharts就随之出现了. ECharts(Enterprise Charts 商业产品图表库) 是基于Canvas的,纯Javascript ...

随机推荐

  1. Kubernetes(k8s)为容器设置启动时要执行的命令和参数

    创建 Pod 时设置命令及参数 创建 Pod 时,可以为其下的容器设置启动时要执行的命令及其参数.如果要设置命令,就填写在配置文件的 command 字段下,如果要设置命令的参数,就填写在配置文件的 ...

  2. Elasticsearch：Split index API - 把一个大的索引分拆成更多分片

    文章转载自:https://blog.csdn.net/UbuntuTouch/article/details/108960950

  3. MiniWord .NET Word模板引擎，藉由Word模板和数据简单、快速生成文件。

    Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 介绍 MiniWord .NET Word模板引擎,藉由Word模板和数据简单.快速生 ...

  4. 第一周python作业

    print("hello world") height=float(input("请输入你的身高:")) weight=float(input("请输 ...

  5. Python实现改进后的Bi-RRT算法实例

    Python实现改进后的Bi-RRT算法实例 1.背景说明 以下代码是参照上海交通大学海洋工程国家重点实验室<基于改进双向RRT的无人艇局部路径规划算法研究>的算法思想实现的. 2.算法流 ...

  6. 分布式存储系统之Ceph集群存储池、PG 与 CRUSH

    前文我们了解了ceph集群状态获取常用命令以及通过ceph daemon.ceph tell动态配置ceph组件.ceph.conf配置文件相关格式的说明等,回顾请参考https://www.cnbl ...

  7. python+request+pymysql+pytest数据驱动

    一.pymysql简单使用 1.安装mysql 下载地址:https://www.mysql.com/,安装教程这里不做介绍了,网上一大推. 2.安装pymysql库 在Terminal终端输入:pi ...

  8. Python函数-2V2

    一.导入 $$ f ( x , y ) = 2 x + 3 y $$ 上面括号里面的就是数学公式里的自变量,自变量就相当于函数里的参数. 二.为什么要有参数 如果一个大楼里有两种尺寸不一的窗户,显然在 ...

  9. 使用Java实现haskell-style的list

    作为一个haskell这门函数式编程语言的爱好者,我特别喜欢它的list操作和推导功能.与传统面向对象或者过程语言不同的是,函数式语言通常喜欢把它们分为head.tail或者init.last等两部分 ...

  10. JetBrains Fleet初体验，如何运行一个java项目

    序言 各位好啊,我是会编程的蜗牛,JetBrains 日前宣布其打造的下一代 IDE Fleet 正式推出公共预览版,现已开放下载.作为java开发者,对于JetBrains开发的全家桶可以说是印象深 ...