【echart】二、使用手册、配置项阅读笔记

入门篇

第一个echart

• 引入echart

npm install echarts --save

• vue

<template>
  <div class="about">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  components: {
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  },
  data () {
    return {
    }
  },
}
</script>

echart5的新特性

1.动态叙事
在数据的切换中增加了平滑过渡的动画效果

2.视觉设计

• 优化颜色的搭配：同一类型的数据的颜色饱和度等一致，使得表达出来的重要性是一致的
• 报表中的标签：不在挤成一团，可以通过布局策略等来使标签在局促的空间优雅得显示
• 时间轴
• focus提示框：美化界面、并且增加了按类目或数值排序的功能
• 仪表盘
• 扇形圆角：在饼图、旭日图、矩形树图中，可以调整border-radius
• 贴花图案

3.交互能力

• 状态管理
  当鼠标focus到某一个元素上，echart4会通过高亮的状态来突出目标，但hover元素后，echart4则会取消高亮，使目标从高亮状态变回普通状态。在echart4的基础上，echart5新增了淡出的特性，在focus到目标后，目标会高亮，而其他元素会淡出。

4.性能提升

5.开发体验

• 数据集：ECharts 5 加强了数据集的数据转换能力
• 国际化

进阶篇

echart的样式

echart的样式，大致可以通过以下的手段来进行调整：
颜色主题（Theme）
调色盘
直接样式设置（itemStyle、lineStyle、areaStyle、label、…）
视觉映射（visualMap）

数据集

 数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持 数据集 开始，更推荐使用 数据集 来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。

 传统的series常需要用户先处理数据，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。

 使用数据集的好处如下所示：

• 能够贴近数据可视化常见思维方式：（I）提供数据，（II）指定数据到视觉的映射，从而形成图表。
• 数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。
• 数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。
• 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。

要注意的是，dataset也有两种格式：二维数组 和 对象数组

seriesLayoutBy可以理解成以什么为x轴
如果以第一行为x轴，那么第一列就为维度；如果以第一列为x轴，那么就以第一行为维度
至于数据，永远都是y轴

将dataset数据映射成系列图表series，是用series.encode来配置的。

目前并非所有图表都支持 dataset。支持 dataset 的图表有： line、bar、pie、scatter、effectScatter、parallel、candlestick、map、funnel、custom。 后续会有更多的图表进行支持

坐标轴

直角坐标系（grid/cartesian）：就是x轴、y轴
单轴（singleAxis）：
极坐标系（polar）：就是圆形类的报表
地理坐标系（geo）：就是地图
对于一些没有坐标系的图表，例如饼图、漏斗图等

配置篇

echart5支持的图形

echart5目前支持的图形可以自行到配置项手册看看，如下图所示