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

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