脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Echarts基本用法

Echarts基本用法_动力节点Java学院整理

 更新时间：2017年08月11日 10:35:02   作者：lishuangzhe  
这篇文章主要介绍了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> 
   
  <div id="picturePlace"></div> 
  
</body>

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

3，模块导入js

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

4，添加显示数据

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

5，运行程序显示结果

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

您可能感兴趣的文章:

相关文章

  • js 文本滚动效果的实例代码

    js 文本滚动效果的实例代码

    一个简单的滚动效果，我只测试了文本，对于图片有需要的朋友可以测试一下哦
    2013-08-08
  • 前端如何利用CryptoJS实现数据信息的加密详解

    前端如何利用CryptoJS实现数据信息的加密详解

    这篇文章主要给大家介绍了关于前端如何利用CryptoJS实现数据信息加密的相关资料,前端解密解密工具Cryptojs提供了前端加密解密的工作,包括常用的MD5、BASE64、SHA1、AES等加密解密方法,需要的朋友可以参考下
    2023-11-11
  • fmt:formatDate的输出格式详解

    fmt:formatDate的输出格式详解

    本篇文章主要是对fmt:formatDate的输出格式进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • 使用JS判断移动端手机横竖屏状态

    使用JS判断移动端手机横竖屏状态

    本文通过js和cas代码分别给大家介绍了移动端判断手机横竖屏状态的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-07-07
  • JavaScript利用虚拟列表实现高性能渲染数据详解

    JavaScript利用虚拟列表实现高性能渲染数据详解

    在前文中我们提到可以使用时间分片的方式来对长列表进行渲染，但这种方式更适用于列表项的DOM结构十分简单的情况，所以本文来讲讲如何使用虚拟列表的方式，来同时加载大量数据吧
    2023-05-05
  • Bootstrap布局组件教程之Bootstrap下拉菜单

    Bootstrap布局组件教程之Bootstrap下拉菜单

    这篇文章主要介绍了Bootstrap布局组件教程之Bootstrap下拉菜单的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • js replace替换所有匹配的字符串

    js replace替换所有匹配的字符串

    这篇文章主要介绍了js replace替换所有匹配的字符串,需要的朋友可以参考下
    2014-02-02
  • Java 正则表达式学习总结和一些小例子

    Java 正则表达式学习总结和一些小例子

    字符串处理是许多程序中非常重要的一部分,它们可以用于文本显示,数据表示,查找键和很多目的.在Unix下,用户可以使用正则表达式的强健功能实现这些 目的
    2012-09-09
  • ie下js不执行的几种可能

    ie下js不执行的几种可能

    本文主要介绍了ie下js不执行的几种可能，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript中函数声明与函数表达式的区别详解

    JavaScript中函数声明与函数表达式的区别详解

    可能很多朋友只知道两种声明方式一个是函数声明一个是函数表达式，具体有什么不同没能说得很好。事实上，JavaScript的解析器对函数声明与函数表达式并不是一视同仁地对待的。下面看看这两者到底有什么不同。
    2016-08-08

最新评论