Echarts用法详细介绍-js教程-PHP中文网

首页

web前端

js教程

Echarts用法详细介绍

巴扎黑

Aug 12, 2017 pm 04:12 PM

echarts 介绍用法

这篇文章主要介绍了Echarts基本用法，详解的介绍了Echarts的基本用法和实例，有兴趣的可以了解一下

echarts太完美了：

1，开源软件，无私的为我们提供漂亮的图形界面；

2，使用简单，默默的为我们封装了重要的js，只要会引用就会使用echarts；

3，种类多，echarts为我们提供了各种图标，其中最具象征的就是地图了；

4，兼容性好，基于html5动画渲染超棒。

echarts官网提供了源码和说明文档，使用echarts需要先到官网下载需要的js源文件。

官网上的demo中夹杂着很多我们用不到的东西，想使用饼状图就得从demo中把不用的去掉，劈植斩叶留下最原始的功能实现。这样毕竟比较费时，我就在裁剪后的代码中加以总结于是乎新的使用教程如下所示：

echarts饼状图实现步骤：

1，在简单的html中引入js文件

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
</body>

登录后复制

2，为图形准备容器

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
   
  <p id="picturePlace"></p> 
  
</body>

登录后复制

就是在html中添加一个p给定id，图表就会显示在p中。

3，模块导入js

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
  <p id="picturePlace"></p> 
   <script type="text/javascript"> 
    // 路径配置 
    require.config({ 
      paths:{  
        &#39;echarts&#39; : &#39;js/echarts&#39;, 
        &#39;echarts/chart/pie&#39; : &#39;js/echarts&#39; 
      } 
    }); 
  </script> 
</body>

登录后复制

4，添加显示数据

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
  <p id="picturePlace"></p> 
   <script type="text/javascript"> 
    // 路径配置 
    requireconfig({ 
      paths:{  
        &#39;echarts&#39; : &#39;js/echarts&#39;, 
        &#39;echarts/chart/pie&#39; : &#39;js/echarts&#39; 
      } 
    }); 
     
     // 使用 
    require( 
      [ 
        &#39;echarts&#39;, 
        &#39;echarts/chart/pie&#39; // 使用柱状图就加载bar模块，按需加载 
      ], 
      function (ec) { 
        // 基于准备好的dom，初始化echarts图表 
        var myChart = ec.init(document.getElementById(&#39;picturePlace&#39;));  
         
        option = { 
            title : { 
              text: &#39;某站点用户访问来源&#39;, 
              subtext: &#39;纯属虚构&#39;, 
              x:&#39;center&#39; 
            }, 
            tooltip : { 
              trigger: &#39;item&#39;, 
              formatter: "{a} {b} : {c} ({d}%)" 
            }, 
            legend: { 
              orient : &#39;vertical&#39;, 
              x : &#39;left&#39;, 
              data:[&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;] 
            }, 
            toolbox: { 
              show : true, 
              feature : { 
                mark : {show: true}, 
                dataView : {show: true, readOnly: false}, 
                restore : {show: true}, 
                saveAsImage : {show: true} 
              } 
            }, 
            calculable : true, 
            series : [ 
              { 
                name:&#39;访问来源&#39;, 
                type:&#39;pie&#39;, 
                radius : &#39;55%&#39;, 
                center: [&#39;50%&#39;, &#39;60%&#39;], 
                data:[ 
                  {value:335, name:&#39;直接访问&#39;}, 
                  {value:310, name:&#39;邮件营销&#39;}, 
                  {value:234, name:&#39;联盟广告&#39;}, 
                  {value:135, name:&#39;视频广告&#39;}, 
                  {value:1548, name:&#39;搜索引擎&#39;} 
                ] 
              } 
            ] 
          }; 
     
        // 为echarts对象加载数据  
        myChart.setOption(option);  
      } 
    ); 
  </script> 
</body>

登录后复制

5，运行程序显示结果

以上是饼状图的实现步骤，柱状图散点图跟这个类似就是引用js时饼状图是pie，柱状图是bar，对应的option里面的数据不同，程序的架子是一样的。

以上是Echarts用法详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7510

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

wapi是什么东西详细介绍 Jan 07, 2024 pm 09:14 PM

wapi这个名词用户们可能在使用网络得时候见到过，但是对于一部分人来说肯定都不知道wapi是什么，下面就带来了详细介绍，帮助不知道小伙伴去了解。wapi是什么东西：答：wapi是无线局域网鉴别和保密的基础结构。这就像红外线和蓝牙等功能一样，一般都覆盖在办公楼等地方的附近。基本都是为一个小部门所有的，所以这个功能涉及的范围只有几公里。wapi相关介绍：1、wapi是无线局域网里面的一种传输协议。2、这款技术是可以去避免窄频带通信的问题，可以更好的去进行传播。3、仅仅只需要一个代码就可以去传送信号了

详解win11能否运行PUBG游戏 Jan 06, 2024 pm 07:17 PM

pubg又称绝地求生，是一款非常经典的射击大逃杀类型游戏，从2016年火爆以来一直拥有非常多的玩家。在最近的win11系统推出后，就有不少玩家想要在win11上游玩它，下面就跟着小编来看看win11是否可以玩pubg吧。win11能玩pubg吗：答：win11可以玩pubg。1、在win11推出之初，因为win11需要开启tpm的缘故，所以导致很多玩家被pubg封号处理了。2、不过后来根据玩家的反馈，蓝洞方面已经解决了这个问题，目前已经可以在win11中正常玩pubg了。3、如果大家遇到了pub

解析JSP注释的使用方法和分类 Feb 01, 2024 am 08:01 AM

JSP注释的分类及用法解析JSP注释分为两种：单行注释：以结尾，只能注释单行代码。多行注释：以/*开头，以*/结尾，可以注释多行代码。单行注释示例多行注释示例/**这是一段多行注释*可以注释多行代码*/JSP注释的用法JSP注释可以用来注释JSP代码，使其更易于阅

WPSdatedif函数的用法 Feb 20, 2024 pm 10:27 PM

WPS是一款常用的办公软件套件，其中的WPS表格功能被广泛使用于数据处理和计算。在WPS表格中，有一个非常有用的函数，即DATEDIF函数，它用于计算两个日期之间的时间差。DATEDIF函数是英文单词DateDifference的缩写，它的语法如下：DATEDIF(start_date,end_date,unit)其中，start_date表示起始日期

如何正确使用C语言的exit函数 Feb 18, 2024 pm 03:40 PM

c语言exit函数怎么用，需要具体代码示例在C语言中，我们常常需要在程序中提前终止程序的执行，或者在某个特定的条件下退出程序。C语言提供了exit()函数来实现这个功能。本文将介绍exit()函数的用法，并提供相应的代码示例。exit()函数是C语言中的标准库函数，它包含在头文件中。它的作用是终止程序的执行，并且可以带一个整型

介绍最新的Win 11声音调法方法 Jan 08, 2024 pm 06:41 PM

很多用户更新了最新的win11之后发现自己系统的声音有了些许的变化，但是又不知道该怎么去进行调整，所以今天本站就给你们带来了电脑最新win11声音调法介绍，操作不难而且选择多样，快来一起下载试试吧。电脑最新系统windows11声音如何调1、首先右击桌面右下角的声音图标，并选择“播放设置”。2、然后进入设置中点击播放栏中的“扬声器”。3、随后点击右下方的“属性”。4、点击属性中的“增强”选项栏。5、此时如果“禁用所有声音效果”前的√勾上了就把他取消。6、之后就可以选择下面的声音效果来进行设置并点

PyCharm新手指南：替换功能全面解析 Feb 25, 2024 am 11:15 AM

PyCharm是一款功能强大的Python集成开发环境，具有丰富的功能和工具，能够极大地提高开发效率。其中，替换功能是开发过程中经常用到的功能之一，能够帮助开发者快速修改代码并提高代码质量。本文将详细介绍PyCharm的替换功能，并结合具体的代码示例，帮助新手更好地掌握和使用该功能。替换功能简介PyCharm的替换功能可以帮助开发者在代码中快速替换指定的文本

详细介绍电脑中的打印机驱动程序位置 Jan 08, 2024 pm 03:29 PM

很多用户在电脑上安装了打印机驱动程序，但却不知道如何找到它们。因此，今天我为大家带来了详细介绍打印机驱动程序在电脑中的位置，对于还不了解的用户，快来看看吧打印机驱动在电脑哪里找重新撰写内容而不改变原义时，需要将语言改写为中文，不需要出现原句首先，建议使用第三方软件进行搜索2、在右上角找到"工具箱"3、在下方找到并点击“设备管理器”。改写后的句子：3、在底部找到并点击“设备管理器”4、然后打开“打印队列”，然后找到你的打印机设备。此次是你的打印机名称型号。5、右键打印机设备，就能够去更新或者卸载我

See all articles

Echarts用法详细介绍

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题