Echarts基本用法

发布时间：2020-12-14 22:54:24 所属栏目：资源来源：网络整理

导读：echarts太完美了： 1，开源软件，无私的为我们提供漂亮的图形界面； 2，使用简单，默默的为我们封装了重要的js，只要会引用就会使用echarts； 3，种类多，echarts为我们提供了各种图标，其中最具象征的就是地图了； 4，兼容性好，基于html5动画渲染超棒。 ec

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里面的数据不同，程序的架子是一样的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!