一: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. Qemu/Limbo/KVM镜像：Ubuntu Mate 22.04+Wine 7.8

    链接: https://pan.baidu.com/s/1cf2c_ylu7-SUaYl8ddztog 提取码: b9mi 密码 空格 手机推荐使用termux里面的Qemu运行,速度最快. 镜像特征 ...

  2. 洛谷P6060 [加油武汉]传染病研究

    一道不错的数学题 Solution 看到约数个数就想到枚举约数,但对于每个询问都枚举显然不现实,但是我们可以将大致的方向锁定在这方面,是否可以预处理出一定的东西,然后低复杂度询问呢? 我们想到预处理出 ...

  3. 什么是齐博/齐博CMS之X1？

    齐博x1:核心+模块+插件+钩子的理念把系统的灵活性及拓展性做到了极致!!!齐博X1是齐博软件基于thinkphp5开发的内容管理系统,拓展性非常强,后台一键升级,后台提供丰富的频道模块云市插件市场. ...

  4. jenkins集成基于maven的javaweb项目，部署到docker容器中

    使用开源工具:Jenkins,码云gitee,docker,docker页面管理工具PortainerUI,github 各种工具的安装就不必介绍了,首先打开Jenkins,刚安装完Jenkins,可 ...

  5. 2021-2022 ICPC, NERC, Northern Eurasia Onsite (Unrated, Online Mirror, ICPC Rules, Teams Preferred) J. Job Lookup

    题意 n个节点,n<=200,你需要构造这n个几点成为一棵树,并且这棵树的中序遍历为1-n; 你构造树的节点之间的最短路构成一个n×n的最短距离矩阵d: 同时给你n×n的权重矩阵c:最最小的Σd ...

  6. 【项目】AtCoder for Chinese

    前排提示:Github 内容搭配梯子食用效果更佳( 项目地址 网页 插件安装 Join us or Give us a star ! 注:因内容迁移,下列链接暂时失效(用空再搬一遍)qwq Trans ...

  7. Ajax基础(中)

    这节主要在上节的基础上学会如何使用Ajax 源码下载: 链接:https://pan.baidu.com/s/1kG-vACFxneAZqONdo97XrQ 提取码:k21y 在WebStorm中打开 ...

  8. vue3 结合 element-plus 框架实现增删改查功能（不连接数据库）

    一.效果图 二.代码 2.1.导入依赖(已经安装过node.js) npm install element-plus --save 注意:要是安装失败,可以使用淘宝镜像进行下载,如下: 2.2.设置淘 ...

  9. 2022春每日一题：Day 35

    题目:[NOI Online #1 提高组] 冒泡排序 看到范围这么大,求逆序对,有修改,估计也只能树状数组了,考查冒泡排序性质,排第i次冒泡排序,总逆序对个数会减少i的逆序对个数,然后交换两个数,他 ...

  10. 基于python的数学建模---机场航线设计

    数据集 拿走: 链接:https://pan.baidu.com/s/1zH5xhpEmx2_u5qO9W4gCkw 提取码:2wl5 数据集来自航空业,有一些关于航线的基本信息.有某段旅程的起始点和 ...