一:echarts

1.简介

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

2.echars的使用导入CDN
  1. 1.导入echars的CDN标签
  2. # 标签
  3. <script src="https://lib.baomitu.com/echarts/5.1.2/echarts.min.js"></script>
3.绘制一个简单的图表

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

  1. <body>
  2.   <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  3.   <div id="main" style="width: 600px;height:400px;"></div>
  4. </body>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://lib.baomitu.com/echarts/5.1.2/echarts.min.js"></script>
  7. </head>
  8. <body>
  9.     <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  10.     <div id="main" style="width: 100%;height:800px;"></div>
  11. </body>
  13. <script>
  14. // 基于准备好的dom，初始化echarts实例
  15. var myChart = echarts.init(document.getElementById('main'));
  17.       // 指定图表的配置项和数据
  18.       option = {
  19.       title: {
  20.         text: 'Referer of a Website',
  21.         subtext: 'Fake Data',
  22.         left: 'center'
  23.       },
  24.       tooltip: {
  25.         trigger: 'item'
  26.       },
  27.       legend: {
  28.         orient: 'vertical',
  29.         left: 'left'
  30.       },
  31.       series: [
  32.         {
  33.           name: 'Access From',
  34.           type: 'pie',
  35.           radius: '50%',
  36.           data: [
  37.             { value: 1048, name: 'Search Engine' },
  38.             { value: 735, name: 'Direct' },
  39.             { value: 580, name: 'Email' },
  40.             { value: 484, name: 'Union Ads' },
  41.             { value: 300, name: 'Video Ads' }
  42.           ],
  43.           emphasis: {
  44.             itemStyle: {
  45.               shadowBlur: 10,
  46.               shadowOffsetX: 0,
  47.               shadowColor: 'rgba(0, 0, 0, 0.5)'
  48.             }
  49.           }
  50.         }
  51.       ]
  52.     };
  54. // 使用刚指定的配置项和数据显示图表。
  55. myChart.setOption(option);
  56. </script>
  58. </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. ETL工具Datax、sqoop、kettle 的区别

    一.Sqoop主要特点: 1.可以将关系型数据库中的数据导入到hdfs,hive,hbase等hadoop组件中,也可以将hadoop组件中的数据导入到关系型数据库中: 2.sqoop在导入导出数据时 ...

  2. 洛谷P2863 [USACO06JAN]The Cow Prom S （tarjan）

    题目简述:一个有向图,求出这个图点数>1的强连通分量的个数. 那么就是tarjan求强联通分量的模板了. 记得要用一个数组标记节点是否在栈中. 1 #include<bits/stdc++ ...

  3. C# 传不定参数

    1 public class MyClass 2 { 3 public static void UseParams(params int[] list) 4 { 5 for (int i = 0; i ...

  4. esp32把玩记-④ 星星点灯 (点亮led)

    注意 全程使用Micropython,不会安装看我第一篇文章感谢 正式开始 用Thonny烧录(运行)以下代码 import time from machine import Pin led=Pin( ...

  5. ULID规范解读与实现原理

    前提 最近发现各个频道推荐了很多ULID相关文章,这里对ULID的规范文件进行解读,并且基于Java语言自行实现ULID,通过此实现过程展示ULID的底层原理. ULID出现的背景 ULID全称是Un ...

  6. 现有一个接口DataOperation定义了排序方法sort(int[])和查找方法search(int[],int)，已知类QuickSort的quickSort(int[])方法实现了快速排序算法

    欢迎大家加入我的社区:http://t.csdn.cn/Q52km 社区中不定时发红包 文章目录 1.UML类图 2.源码: 3.优缺点分析 1.UML类图 2.源码: package com.bac ...

  7. java 新特性之 Stream API

    强大的 Stream API 一.Stream API 的概述 Stream到底是什么呢? 是数据渠道,用于操作数据源(集合.数组等)所生成的元素序列. "集合讲的是数据,Stream讲的是 ...

  8. 『现学现忘』Git分支 — 39、Git中分支与对象的关系

    目录 1.Git对象之间的关系 2.提交对象与分支的关系 (1)提交对象与分支的关系 (2)分支说明 (3)HEAD与分支的关系 1.Git对象之间的关系 我们之前学了Git的三个对象:提交对象.树对 ...

  9. vue Excel导入，下载Excel模板，导出Excel

    vue  Excel导入,下载Excel模板,导出Excel vue  Excel导入,下载Excel模板 <template> <div style="display: ...

  10. 两个行内元素在一起，会出现一定的间距，即使将border、padding、margin都设置为零也无济于事，那么怎么才能去除这些间距呢？

    首先这里的div设置为了行内块元素,span本身为行内元素,并且设置了* {padding: 0; margin: 0;},那怎么清除元素之间的空白缝隙呢?? (1)给元素加浮动 <!DOCTY ...