echarts （一）基础详解

官方文档
echarts接口文档
官方配置项文档

以上这些都已经说的很详细了

安装

从 npm 获取

npm install echarts --save

从 CDN 获取
版本对应得地址
从 GitHub 获取
dist目录下的echarts.js文件就是

加载顺序

例如：

    <div id="box1" class="main">
    </div>
    <style>
        .main{
            width: 600px;
            height: 600px;
        }
    </style>
    <script type="text/javascript">
     let myecharts1 = echarts.init(document.getElementById('box1'))
     // 指定图表的配置项和数据
     var option = {
     ...
      };

      // 使用刚指定的配置项和数据显示图表。
      myecharts1.setOption(option);
    </script>

注意：在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器，
注意样式加载顺序
调用 echarts.init 时需保证容器已经有宽度和高度

数据转换

给定一个已有的“数据集”（dataset）和一个“转换方法”（transform），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图

数据转换器 “filter”
在dataset.source中筛选符合条件的，形成新的数据集

dataset: [
    {
      source: [
        ['Product', 'Sales', 'Price', 'Year'],
        ['Cake', 123, 32, 2011],
        ['Latte', 231, 14, 2011],
        ['Tofu', 235, 5, 2011],
        ['Milk Tee', 341, 25, 2011],
        ['Porridge', 122, 29, 2011],
        ['Cake', 143, 30, 2012],
        ['Latte', 201, 19, 2012],
        ['Tofu', 255, 7, 2012],
        ['Milk Tee', 241, 27, 2012],
        ['Porridge', 102, 34, 2012],
        ['Cake', 153, 28, 2013],
        ['Latte', 181, 21, 2013],
        ['Tofu', 395, 4, 2013],
        ['Milk Tee', 281, 31, 2013],
        ['Porridge', 92, 39, 2013],
        ['Cake', 223, 29, 2014],
        ['Latte', 211, 17, 2014],
        ['Tofu', 345, 3, 2014],
        ['Milk Tee', 211, 35, 2014],
        ['Porridge', 72, 24, 2014]
      ]
    },
    {
      transform: {
        type: 'filter',
        config: { dimension: 'Year', '=': 2011 }
        // 这个筛选条件表示，遍历数据，筛选出维度（ dimension ）
        // 'Year' 上值为 2011 的所有数据项。
      }
    }
  ],

数据转换器sort
“sort” 是另一个内置的数据转换器，用于排序数据。目前主要能用于在类目轴（ axis.type: ‘category’ ）中显示排过序的数据。

dataset: [
    {
      dimensions: ['name', 'age', 'profession', 'score', 'date'],
      source: [
        [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
        ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
        [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
        ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
        [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
        [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
        ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
        [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
        ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']
      ]
    },
    {
      transform: {
        type: 'sort',
        // 按分数排序
        config: { dimension: 'score', order: 'asc' }
      }
    }
  ],

等比例缩放