zoukankan      html  css  js  c++  java
  • 【ECharts,入门】

    一、从官网下载界面选择自己需要的版本下载

    二、引入ECharts

    只需要像普通的 JavaScript 库一样用 script 标签引入。

    1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4     <meta charset="utf-8">
    5     <!-- 引入 ECharts 文件 -->
    6     <script src="echarts.min.js"></script>
    7 </head>
    8 </html>

    三、绘制一个简单的图表

    我们要在HTML的BODY里为它准备一个具备宽高的DOM容器,也就是DIV。

    1 <body>
    2     <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    3     <div id="main" style=" 600px;height:400px;"></div>
    4 </body>

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

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3         <head>
     4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5         <title>无标题文档</title>
     6         <script  src="js/echarts.js"></script>
     7     </head>
     8     
     9     <body>
    10         <div id="main" style="600px;height:400px;"></div>
    11     </body>
    12     <script type="text/javascript">
    13         // 基于准备好的dom,初始化echarts实例
    14         var myChart = echarts.init(document.getElementById('main'));
    15         var arr = 105;
    16         // 指定图表的配置项和数据
    17         var option ={
    18                 title:{
    19                         text:'ECharts 入门示例'
    20                       },
    21                 tooltip:{},
    22                 legend:{
    23                         data:['销量']
    24                         },
    25                 xAxis:{
    26                         data:["衬衫","羊毛衫","裤子","袜子","高跟鞋","篮球"]
    27                         },
    28                 yAxis:{},
    29                 series:[{
    30                         name:'销量',
    31                         type:'bar',
    32                         data:[arr,20,36,10,10,20]
    33                     }]        
    34             };
    35              // 使用刚指定的配置项和数据显示图表。
    36             myChart.setOption(option);
    37     </script>
    38 </html>

    当当当当,完成啦。

  • 相关阅读:
    默比乌斯函数
    勒让德符号相关
    微积分入门("SX"T版)
    分治法求2n个数的中位数
    SSM框架学习之高并发秒杀业务--笔记1-- 项目的创建和依赖
    10月9日Android学习笔记:活动与服务之间的通信
    高精度加法
    Windows环境下多线程编程原理与应用读书笔记(4)————线程间通信概述
    郁闷
    素数链
  • 原文地址:https://www.cnblogs.com/iitxt/p/9009107.html
Copyright © 2011-2022 走看看