zoukankan      html  css  js  c++  java
  • 【ECharts】1.学习ECharts从现在开始:第一个Echart图形

    首先,你需要下载ECharts所需的文件,我使用的是echarts-2.0.2版本,点击这里下载:echarts-2.0.2

    下载解压后,下面有一系列文件夹,其中build中有我们需要引入的JS文件,doc里面是ECharts的API文档以及实例。

    使用ECharts有两种方式,一种是通过模块化单文件引入的方式,另一种是通过标签式单文件引入。我们这里使用标签式单文件引入。

    一、第一个ECharts报表

    首先新建一个echarts.html文件。为ECharts准备一个具备大小(宽高)的Dom。

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="height:400px"></div>
    </body>

    接着新建<script>标签引入echarts-plain.js

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="height:400px"></div>
        <!-- ECharts单文件引入 -->
        <script src="http://echarts.baidu.com/build/echarts-plain.js"></script>
    </body>

    注:这里引入的是百度官网的文件,你可以将其替换成你自己下载的ECharts build文件夹下的JS文件

    接着新建<script>标签,使用全局变量echarts初始化图表并驱动图表的生成

     1 <!DOCTYPE html>
     2 <head>
     3     <meta charset="utf-8">
     4     <title>ECharts</title>
     5 </head>
     6 <body>
     7     <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
     8     <div id="main" style="height:400px"></div>
     9     <!-- ECharts单文件引入 -->
    10     <script src="http://echarts.baidu.com/build/echarts-plain.js"></script>
    11     <script type="text/javascript">
    12         // 基于准备好的dom,初始化echarts图表
    13         var myChart = echarts.init(document.getElementById('main')); 
    14         
    15         var option = {
    16             tooltip: {
    17                 show: true
    18             },
    19             legend: {
    20                 data:['销量']
    21             },
    22             xAxis : [
    23                 {
    24                     type : 'category',
    25                     data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    26                 }
    27             ],
    28             yAxis : [
    29                 {
    30                     type : 'value'
    31                 }
    32             ],
    33             series : [
    34                 {
    35                     "name":"销量",
    36                     "type":"bar",
    37                     "data":[5, 20, 40, 10, 10, 20]
    38                 }
    39             ]
    40         };
    41 
    42         // 为echarts对象加载数据 
    43         myChart.setOption(option); 
    44     </script>
    45 </body>
    View Code

    浏览器中打开echarts.html,就可看到以下效果:

    二、ECharts代码的结构

     1 <!DOCTYPE html>
     2 <head>
     3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     4     <title>ECharts</title>
     5 </head>
     6 <body>
     7     <!-- 1.为ECharts准备一个具备大小(宽高)的Dom -->
     8     <div id="main" style="800px;height:400px;margin: 0 auto;" ></div>
     9     <!-- 2.ECharts单文件引入 -->
    10     <script src="js/echarts-plain.js"></script> 
    11     
    12     <script type="text/javascript">
    13         <!-- 3.基于准备好的dom,初始化echarts图表 -->
    14         var myChart = echarts.init(document.getElementById('main')); 
    15         
    16         <!-- 4.Option参数 -->
    17         <!-- 省略Option代码 -->
    18 <!-- 5.加载数据 --> 19 myChart.setOption(option); 20 </script> 21 </body>

     可以看到,使用ECharts最简单的只有5个步骤。使用不同的报表,那么只需要改变第4步(16行)中Option的参数即可。

    而如果你想引用一些更加高级的功能图形,比如说地图,那么你可能还需要引入另外一个拥有更加丰富资源的JS文件(改变第2步引入的JS文件)。至于引入哪个JS文件,你可以参考下面对各个JS的说明:

    echarts-plain.js : 经过压缩,包含除地图外的全部图表
    echarts-plain-original.js : 未压缩,可用于调试,包含除地图外的全部图表
    echarts-plain-map.js : 经过压缩,全图表,包含world,china以及34个省市级地图数据
    echarts-plain-original-map.js : 未压缩,可用于调试,全图表,包含world,china以及34个省市级地图数据

    上面的JS都可以在echart下载目录的build目录下找到。

    三、Option参数

    在ECharts里,所有的参数都是通过Option进行设置的。一般来说,Option里最常用的参数有下面几个:

    title :图形的标题

    tooltip :鼠标移上去的提示

    legend :图例

    toolbox :工具箱

    calculable:是否可拖动计算(true 或者 false)

    xAxis:X轴

    yAyis:Y轴

    Series:数据集(系列)

    他们在图形中的位置如图所示:

    在EChats中最重要的就是Option中的参数,各种图形的变化以及数据都是在Option进行设置的。

    你可以点击这里查看ECharts的API文档

  • 相关阅读:
    LeetCode Path Sum II
    LeetCode Longest Palindromic Substring
    LeetCode Populating Next Right Pointers in Each Node II
    LeetCode Best Time to Buy and Sell Stock III
    LeetCode Binary Tree Maximum Path Sum
    LeetCode Find Peak Element
    LeetCode Maximum Product Subarray
    LeetCode Intersection of Two Linked Lists
    一天一个设计模式(1)——工厂模式
    PHP迭代器 Iterator
  • 原文地址:https://www.cnblogs.com/chanshuyi/p/3919900.html
Copyright © 2011-2022 走看看