一: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. 通过使用nginx来实现logstash的负载均衡

    文章转载自:https://blog.csdn.net/UbuntuTouch/article/details/106813223 总结: nginx配置,192.168.0.5 user nginx ...

  2. centos下如何获取某个命令的源代码?

    以ls命令为例,其它命令类似: 1.利用which命令获取命令可执行文件的位置: [root@228 /]# which ls alias ls='ls --color=auto' /usr/bin/ ...

  3. NSIS 自定义安装界面准确获取安装进度完美解决方案

    友情提醒:随着7zip版本快速更新,nsis7z插件已经不能全面兼容新版,使用本例子请将7zip版本降至9.2x以下并下载最新版nsis7z.dll! ------------------------ ...

  4. 实验02_Proteus仿真数码管显示代码

    一.原理总结 利用两个寄存器R4和R5来存储两个数码管的显示效果,R4是前一个数码管显示所需,而R5是后一个数码管显示所需,利用左移操作RLC来使之每一位被依次输入到C中,然后将C输入到LED中(当L ...

  5. CentOS 7.9 安装 redis-6.2.0

    一.CentOS 7.9 安装 redis-6.2.0 1 下载地址:https://download.redis.io/releases/redis-6.2.0.tar.gz 2 安装gcc来进行编 ...

  6. 路径分析—PostgreSQL+GeoServer+Openlayers（二）

    路径分析-QGIS+PostgreSQL+PostGIS+pgRouting(一) 路径分析-PostgreSQL+GeoServer+Openlayers(二) 前言 上一篇文章中实现数据库层面的路 ...

  7. python学习笔记----必备知识

    一.必备知识 二.流程控制 https://blog.csdn.net/weixin_43304253/article/details/120778228 1.1语法特点: 1.1.1 代码注释 单行 ...

  8. 知识图谱-生物信息学-医学顶刊论文(Bioinformatics-2021)-MUFFIN:用于DDI预测的多尺度特征融合

    2.(2021.3.15)Bioinformatics-MUFFIN:用于DDI预测的多尺度特征融合 论文标题: MUFFIN: multi-scale feature fusion for drug ...

  9. Redis数据结构(一)-Redis的数据存储及String类型的实现

    1 引言 Redis作为基于内存的非关系型的K-V数据库.因读写响应快速.原子操作.提供了多种数据类型String.List.Hash.Set.Sorted Set.在项目中有着广泛的使用,今天我们来 ...

  10. Trino Worker 规避 OOM 思路

    背景 Trino 集群如果不做任何配置优化,按照默认配置上线,Master 和 Worker 节点都很容易发生 OOM.本文从 Trino 内存设计出发, 分析 Trino 内存管理机制,到限制与优化 ...