eCharts 学习笔记

1、简介

eCharts 是百度出品的一款基于 JavaScript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。最开始是由百度团队开源的，后面于2018年交由Apache基金会，称为ASF孵化项目。并于2021年1月26日正式毕业。

2、在 Vue 中使用

首先下载 eCharts：
1
npm install echarts --save
全局引入 eCharts:
1
import * as echarts from 'echarts';

或者可以按需引入

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  DatasetComponentOption,
  TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

3、基本语法结构

在使用 eCharts 之前，我们需要给它一个 DOM 容器，官方是推荐我们使用具有定义好的长和宽的一个父容器（可以是 div ）。
所以我们首先构建一个父容器 div 来存放 eCharts 图表

1 2	<div id="billreport" :style="{ width: '95%', height: '500px' }"></div>

由于 eCharts 基于js构建的，所以只要会js的语法，eCharts的语法自然也不在话下。
而 eCharts 的基本语法结构为：

setup(){
const data=reactive({
    option:{
    	//图表信息
    }
})

const ech = () => {
	//绘制图表的方法
	}
}

onBeforeMount(()=>{
	//在页面渲染之前加载图表的信息
})

4、图表配置信息

图表配置信息，即 option 中的内容，在这一部分，我们将配置一系列的信息，正是这些信息生成了对应的图表。

option:{
	title:{
		text: "收入与支出趋势图"//图表的标题
	},
	tooltip:{//提示的信息
		trigger:'axis'//触发方式
	},
    legend: {//图例
        data: [{
        	name: '收入',
        	// 强制设置图形为圆。
        	icon: 'circle',
        	// 设置文本为红色
        	textStyle: {
            	color: 'red'
        	}
    	},
              {
        	name: '支出',
        	// 强制设置图形为圆。
        	icon: 'circle',
        	// 设置文本为红色
        	textStyle: {
            	color: 'red'
        	}
    	}]//图例的标题，分别对应 series 中的数据
    }，
    xAxis: {//配置要在x轴显示的项
        type: 'category',//'value' 数值轴，适用于连续数据。 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 'log' 对数轴。适用于对数数据。
        boundaryGap: false,// 刻度离纵轴有无间隙，默认true有间距
        data: []//横轴坐标的值
    },
    yAxis: {//配置y轴的项，配置与x轴类似
        type: 'value'
    },
    series: [//系列列表,显示在图表中的内容
      {
        name: '收入',//系列名称
        type: 'line',//图表类型
        stack: '收入',//堆叠，如果有相同名称的会堆叠
        data: []
      },
      {
        name: '支出',
        type: 'line',
        stack: '支出',
        data: []
      }
   ]
}

图表类型表：

配置	图表类型
type: ‘bar’	柱状/条形图
type: ‘line’	折线/面积图
type: ‘pie’	饼图
type: ‘scatter’	散点（气泡）图
type: ‘effectScatter’	带有涟漪特效动画的散点（气泡）
type: ‘radar’	雷达图
type: ‘tree’	树型图
type: ‘treemap’	树型图
type: ‘sunburst’	旭日图
type: ‘boxplot’	箱形图
type: ‘candlestick’	K线图
type: ‘heatmap’	热力图
type: ‘map’	地图
type: ‘parallel’	平行坐标系的系列
type: ‘lines’	线图
type: ‘graph’	关系图
type: ‘sankey’	桑基图
type: ‘funnel’	漏斗图
type: ‘gauge’	仪表盘
type: ‘pictorialBar’	象形柱图
type: ‘themeRiver’	主题河流
type: ‘custom’	自定义系列

5、x 轴、y 轴

x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。
一般情况下，二维的图标结构都会有 x 轴和 y 轴，通常情况下，x 轴会在图表的下方，而 y 轴在图表的左边。
而 eCharts 也提供了一些特定的坐标轴的设置选项，如：
轴线：
我们可以通过 axisLine 来对轴线进行设置，比如轴线两头的箭头，轴线的样式等等，比如：

option = {
  xAxis: {
    axisLine: {
      show:'true' //显示轴线
      symbol: 'arrow', //轴线两边的箭头
      lineStyle: { //轴线的样式，有颜色、宽度、类型等等
        type: 'dashed'
        // ...
      }
    }
    // ...
  },
  yAxis: {
    axisLine: {
      symbol: 'arrow',
      lineStyle: {
        type: 'dashed'
        // ...
      }
    }
  }
  // ...
};

轴线两边的箭头选项：

坐标轴刻度：
ECharts 提供了轴线 axisTick 相关的配置，我们可以根据实际情况调整，例如刻度线的长度，样式等。以下是一个坐标轴刻度的例子：

option = {
  xAxis: {
    axisTick: {
      show:true //开启坐标轴刻度
      alignWithLabel:true //使刻度与标签对其（类目轴中在 boundaryGap 为 true 的时候有效）
      inside:true //刻度线是否朝里（true为朝里）
      interval：0 //坐标轴刻度的显示间隔,如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
      length: 6,//刻度线的长度
      lineStyle: { //样式设置
        type: 'dashed'
        // ...
      }
    }
    // ...
  },
  yAxis: {
    axisTick: {
      length: 6,
      lineStyle: {
        type: 'dashed'
        // ...
      }
    }
  }
  // ...
};

刻度标签：
ECharts 提供了轴线 axisLabel 相关的配置，我们可以根据实际情况调整。以下是一个例子：

如上图所示，下面的星期就是刻度标签

option = {
  xAxis: {
    axisLabel: {
      show:true //显示刻度标签
      interval:0 //显示刻度，同上
      inside:true //标签是否朝里（true朝里）
      rotate：45 // 标签偏移的角度
      margin:5 //标签与轴线的距离
      formatter: '{value} kg', //刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
      align: 'center' //文字水平对齐方式，默认自动。可选为：'left','center','right'
      // ...
    }
    // ...
  },
  yAxis: {
    axisLabel: {
      formatter: '{value} 元',
      align: 'center'
      // ...
    }
  }
  // ...
};

标签中的formatter：

// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
    return value + 'kg';
}

更多关于 formatter 的内容可以参考官方的 API

6、主题配置

在eCharts的内部，内置了两套主题，分别是亮色主题以及暗色主题
通过以下的方式，我们可以修改主题

1 2	var chart = echarts.init(dom, 'light'); var chart = echarts.init(dom, 'dark');

或者我们可以通过eCharts的主题编辑器来创建自己的主题

7、数据集（dataset）

dataset 组件可以用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。

写法一：

dataset: {
    // 提供一份数据。
    //第一行对应的是 x 轴
    source: [
        ['product', '2015', '2016', '2017'],
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
},

在 dataset 中管理数据之后，就可以不用在 series 单独进行数据的声明，而是直接在 data 除进行调用

// 声明多个柱状图系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [
    {type: 'bar'},
    {type: 'bar'},
    {type: 'bar'}
]

写法二：

dataset: {
    // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
    // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
    dimensions: ['product', '2015', '2016', '2017'],
        source: [
            {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
            {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
            {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
            {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
        ]
},

8、图例

图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。
以下是一个例子：

option = {
  legend: {
    type:'plain' //图例的类型可选值：'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
    // Try 'horizontal'
    orient: 'vertical', //图例列表的布局朝向。可选：'horizontal'水平，'vertical'垂直
    right: 10, //图例组件离容器右侧的距离。
    top: 'center' //图例组件离容器上侧的距离。
  },
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};