Echarts可视化图表库（概念与配置项）

最新推荐文章于 2024-05-28 11:11:34 发布

Hansel.Wn

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量1.1k

点赞数 1

分类专栏： ECharts 文章标签： echarts

本文链接：https://blog.csdn.net/Dominic_W/article/details/122376865

版权

ECharts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Echarts，基于JavaScript的数据可视化图表库

建立chart容器，并初始化

//需要在HTML中提前建立一个div节点
//并且需要为div声明width和height属性(通过CSS声明)
<div id="chart" style="width:200px; height:200px;"></div>

// 通过节点id获取到容器元素，并通过init方法初始化图表
// 使用init初始化时，要保证容器已经设置了width和height属性
var el= document.getElementById("chart");
var myChart = echarts.init(el);

// 如果初始化时没有设置width和height，可以在init中制定容器大小
 var myChart = echarts.init(el, null, {
    width: 600,
    height: 400
  });

图表相应容器大小变化

// // 监听页面的 window.onresize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize 改变图表的大小
window.onresize = function() {
    myChart.resize();
  };
  
//指定宽度和高度，实现图表大小不等于容器大小的效果
myChart.resize({
  width: 800,
  height: 400
});

容器节点的销毁以及重建

– 待添加

配置项

title参数

标题组件，包含主标题和副标题

option = {
	title: {
		id: 1，// 组件id，默认不指定，制定后可用与在option或者API中引用组件
		show：true，//　是否显示标题组件
		text：''，//　主标题文本，可以使用＼ｎ换行
		link：''，//　主标题超链接
		target：'blank'，//　指定窗口打开主标题超链接，self当前窗口打开，blank新窗口打开
		textStyle: {
			color: '#333', // 主题文字的颜色
			fontStyle: 'normal', // 主标题文字字体风格（normal,italic,oblique）
			fontWeight: 'bolder', // 主标题文字粗细 （normal,bold,bolder,lighter）
			fontFamily: 'sans-serif', // 主标题字体，可更换
			fontSize: 18,
			lineHeight: 56, // 行高
			rich: {
				a: {//可以自定义富文本样式
					// rich中如果没有设置lineHeight,则取父层级的lineHeight
				}
			},
			width: 100, // 文本显示宽度
			height: 100, // 本文显示高度
			textBorderColor: '#ddd', // 文字本身的描边颜色
			textBorderWidth: 100, // 文字本身的描边宽度
			textBorderType: 'solid', // 文字本身的描边类型（solid,dashed,dotted）
			// 自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。
			// textBorderType: [5, 10],
			textBorderDashOffset: 5, // 从 v5.0.0 开始支持,用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。
			textShadowColor: 'transparent', // 文字本身的阴影颜色
			textShadowBlur: 3, // 文字本身的阴影长度
			textShadowOffsetX: 5, // 文字本身的阴影X偏移量
			textShadowOffsetY: 5, // 文字本身的阴影Y偏移量
			overflow: 'none', // 文字超出宽度是否截断或者换行，只在配置了width时有效（truncate截断，并在末尾显示ellipsis配置的文本，默认是...;break换行；breakAll换行，和break的区别是，在英语等拉丁文中，breakAll会强制单词内换行）
			ellipsis: '......', // overflow位TRUE时通过此属性配置末尾显示的文本
		},
		subtext: '', // 副标题文本，支持使用\n换行
		sublink: '', // 副标题超链接
		subtarget: 'blank', // 指定窗口打开副标题超链接，self当前窗口，blank新窗口打开
		subtextStyle: {
			// subtextStyle对象中的配置项大部分和textStyle中的一致，这部分省略，下面只记录不一样的配置项
			align: 'left', // 文字水平对齐方式，默认自动对齐（left，center,right）rich中如果没有设置align，则取父层级的align
			verticalAlign: 'top', // 文本垂直对齐方式，默认自动对齐（top,middle,bottom）rich中如果没有设置此属性，则会取父层级的verticalAlign
		}
		textAlign: 'auto', // 整体的水平对齐（包括text和subtext）可选值：auto\left\right\center
		textVerticalAlign: 'auto', // 整体的垂直对齐，包括text和subtext，可选值：auto\top\bottom\middle
		triggerEvent: true, // 是否触发事件
		padding：5, // 标题内边距，单位px，默认值为5，可以通过一个数组分别设定上下左右边距
		itemGap: 10, // 主副标题之间的间距
		zlevel: 1, // 所有图形的zlevel值，用于canvas分层，不同zlevel值的图形会放置在不同的canvas中，zlevel值大的canvas会放在上层，这是一张常见的优化手段，但是过多的canvas会引起内存开销的增大
		z: 1, // 组件的所有图形的z值，控制图形的先后顺序，z值小的图形会被值大的图形覆盖，z的优先级比zlevel低，而且不会创建新的canvas
		left: 'auto', // title组件距离容器左侧的距离，可以设置为一个number像素值（20）;可以设置'20%'这种相对于容器宽高的百分比;也可以是left,center,right,设置为这几个值是组件会根据相应的位置自动对齐
		right: 'auto', // title组件距离容器右侧的距离，默认自适应；值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比
		top: 'auto', // title组件距离容器上侧的距离，以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'，值为'top', 'middle', 'bottom'时，组件会根据相应的位置自动对齐
		bottom: 'auto', // title组件距离容器下侧的距离，默认自适应，值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比
		backgroundColor: 'transparent', // 标题背景色，默认透明
		borderColor: '#ccc', // 标题的边框颜色
		borderWidth: 2, // 标题的边框线宽
		borderRadius: 2, // 圆角半径，单位是px，支持传入数组分别指定四个圆角半径
		shadowBlur: 2, // 图形阴影的模糊大小，前提是设置了show: true以及背景颜色不透明
		shadowColor: '#eee', // 阴影颜色，生效的前提的是show: true
		shadowOffsetX: 1, // 阴影水平方向上的偏移距离，生效的前提是show: true
		shadowOffsetY: 1, // 阴影垂直方向上的偏移距离，生效的前提是show: true 
	}
}

legend参数

图例组件

option = {
	legend: {
		type: 'plain', // 普通图例，默认值就是plain,scroll代表可滚动翻页的图例
		id: '1', // 组件ID，默认不指定，指定后可用于在option和API中使用组件
		show: true, // 是否显示legend
		zlevel: 1, // 所有图形的zlevel值，用于canvas分成，不同zlevel值的图像会放置在不同此canvas中，zlevel值大的canvas会放在zlevel小的canvas上面；canvas分层是一种常见的优化手段，但是过多的canvas分层会引起内存开销的增大
		z: 2, // 组件的所有图形的z值，控制图形的前后顺序，z值小的图形会被z值大的图形覆盖，z相比zlevel优先级低，而且不会创建新的canvas
		left: 'auto', // 图例组件距离容器左侧的距离，值可以是像 20 这样的具体像素值；可以是像 '20%' 这样相对于容器高宽的百分比；也可以是 'left', 'center', 'right'，此时组件会根据相应的位置自动对齐
		right: 'auto', // 图例组件距离容器右侧的距离，值可以是像 20 这样的具体像素值；可以是像 '20%'，默认自适应
		top: 'auto', // 图例组件距离容器顶部的距离，值可以是像 20 这样的具体像素值；可以是像 '20%' 这样相对于容器高宽的百分比；也可以是 'top', 'middle', 'bottom'，此时组件会根据相应的位置自动对齐
		bottom: 'auto', // 图例组件距离容器下侧的距离，值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，默认自适应
		width: 100, // 图例组件的宽度，默认自适应auto
		height: 100, // 图例组件的高度，默认自适应auto
		orient: 'horizontal', // 图例列表的布局朝向 （horizontal,vertical）
		align: 'auto', // 图例标记和文本的对齐方式，默认自动对齐（auto\left\right）
		padding: 5, // 图例内边距，默认个方向的内边距为5，可以接受一个数组分别设定上下左右边距
		itemGap: 10, // 图例每项之间的间隔，横向布局是为水平间隔，纵向布局时为纵向间隔
		itemWidth: 25, // 图例标记的图形宽度
		itemHeight: 14, // 图例标记的图形高度
		itemStyle: { // 图例的图形样式，属性取值为inherit时，表示继承系列中的属性值
			color: 'inherit', // 图形的颜色
			borderColor: 'inherit', // 图形的描边颜色，不支持回调函数
			borderWidht: 'auto', // 图形边框线宽，值为auto时，如果系列有borderWidth取2，系列没有borderWidth则取0，当其值为inehrit,始终取系列的borderWidth
			// 自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 borderDashOffset 可实现更灵活的虚线效果。
			// borderType: [5, 10],
			borderType: 'inherit', // 描边类型（solid,dashed,dotted）
			borderDashOffset: 'inherit', // 从v5.0.0开始支持，用于设置虚线的偏移量，可以搭配borderType属性使用
			borderCap: 'inherit', // 指定线段末端的绘制方式（butt线段末端以方形结束，round线段末端以圆形结束，square线段以方形结束，但是增加一个宽度和线段相同，高度是线段厚度一半的矩形区域）
			borderJoin: 'inherit', // v5.0.0开始支持，？
			// 配置太多了，未完待续...
		}
	}
}

grid 参数

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴，可以在网格上绘制折线图，柱状图，散点图
ECharts 2.x里单个echarts始终只允许有一个grid组件，ECharts 3中可以存在任意个grid组件

option = {
	grid: {
		id: '1', // 组件ID，默认不指定，指定后可用于在option或者API中使用组件
		show: true, //  是否显示直角坐标系网络
		zlevel: 1, // 所有图形的zlevel值，用于canvas分层
		z: 2, // 组件的素有图形的z值，控制图形的先后顺序，z值小的图形会被z值大的图形a覆盖，z相比zlevel优先级更低，而且并不会创建新的canvas
		left: '10%', // grid组件距离容器左侧的距离(取值:60,20%,center)
		top: '30', // grid组件距离容器上侧的距离
		right: '10%', // grid组件距离容器右侧的距离，具体取值类似left
		bottom: '30', // grid组件距离容器底部的距离，具体取值类似top
		width: 'auto', // grid组件的宽度，默认自适应（number，string）
		height: 'auto', // grid组件的高度，默认自适应（number，string）
		containLabel: true, // grid区域是否包含坐标轴的刻度标签，值为false时，grid的left\right\top\bottom\width\height决定的是由坐标轴形成的举行的尺寸和位置，值为true时，这些属性决定了坐标轴标签在内的所有内容所形成的矩形的位置（常用于防止标签溢出）
		backgroundColor: 'transparent', // 网格背景颜色，默认透明 （设置show: true后生效）
		borderColor: '#ccc', // 网格的边框的颜色 （设置show: true后生效）
		borderWidth: 1, // 网格的边框线宽， 设置show： true后生效
		shadowBlur: 10, // 图形阴影的模糊大小
		shadowColor: '#eee', // 阴影的的颜色，设置show: true后生效
		shadowOffsetX: 10, // 阴影水平方向的偏移距离，设置show: true 后生效
		shaowOffsetY: 10, // 阴影垂直方向上的偏移距离，设置show: true后生效
		tooltip: {}, // 本坐标系特定的tooltip设定，配置项同全局tooltip
	}
}

xAxis 参数

直角坐标系grid中的x轴，单个grid组件多于两个X轴时需要使用offset属性防止同位置上多个x轴的堆叠。

option = {
	xAxis: {
		id: '1', // 组件id， 默认不指定， 指定后可用于在option或者API中引用组件
		show: true, // 是否显示x轴
		gridIndex: 1, // x轴所在的grid 的索引，默认位于第一个grid
		position: 'top', // x轴的位置，（top/bottom）
		offset: 10, // x轴相对于默认我i之的偏移，在相同的position上有多个x轴时使用
		realtimeSort: true, // 用于制作动态排序柱状图，值为true时，表示x轴开启实时排序效果（仅当x轴的type是value时有效）
	}
}

样式

颜色主题

在初始化echarts时，指定颜色主题

// 在chart初始化时，切换ECharts5内置的深色主题
var myChart = echarts.init(el,'dark');

没有内置在ECharts中的主题，可以自行加载

// 如果主题保存为 JSON 文件
// 假设主题名称是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {
  echarts.registerTheme('vintage', JSON.parse(themeJSON));
  var chart = echarts.init(dom, 'vintage');
});

// 如果保存为 UMD 格式的 JS 文件，文件内部已经做了自注册，直接引入 JS 即可
// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）
var chart = echarts.init(dom, 'vintage');

调色盘

调色盘给定一组颜色，图形、系列会自动从其中选择颜色，调色盘可以设置在option中成为全局调色盘，也可以设置在series中成为系列专属调色盘

  color: [
    '#c23531',
    '#2f4554',
    '#61a0a8',
    '#d48265',
    '#91c7ae',
    '#749f83',
    '#ca8622',
    '#bda29a',
    '#6e7074',
    '#546570',
    '#c4ccd3'
  ],

itemStyle、lineStyle、areaStyle、label等直接设置样式

这是一种比较常用的样式设置方式，可以通过这种方式设置图形元素的颜色、线条宽度、点的大小、标签的文字、标签的样式等

高亮的样式：emphasis

鼠标悬浮在图形元素上时的样式，默认情况下高亮样式会根据普通样式自动生成，也可以自定义：

option = {
  series: {
    type: 'scatter',
    // 普通样式。
    itemStyle: {
      // 点的颜色。
      color: 'red'
    },
    label: {
      show: true,
      // 标签的文字。
      formatter: 'This is a normal label.'
    },
    // 高亮样式。
    emphasis: {
      itemStyle: {
        // 高亮时点的颜色。
        color: 'blue'
      },
      label: {
        show: true,
        // 高亮时标签的文字。
        formatter: 'This is a emphasis label.'
      }
    }
  }
};

数据集 dataset

dataset是用来管理数据的组件。
以前给图表赋值，习惯在每个系列的series.data中设置数据。从Echarts4支持dataset开始，官方推荐使用数据集来管理数据。
使用数据集管理数据的好处：

方便数据被多个组件复用
符合数据和其他配置分离的风格
利于基于原始数据进行图表类型、系列的映射安排

在dataset中设置数据

option = {
  legend: {},
  tooltip: {},
  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]
    ]
  },
  // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
  xAxis: { type: 'category' },
  // 声明一个 Y 轴，数值轴。
  yAxis: {},
  // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
    // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
    // 如果不指定 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 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

上面两种不同的数据集格式，经过渲染后的图表是相同的：
在这里插入图片描述

数据转换

在dataset中使用transform实现数据转换

var option = {
  dataset: [
    {
      // 这个 dataset 的 index 是 `0`。
      source: [
        ['Product', 'Sales', 'Price', 'Year'],
        ['Cake', 123, 32, 2011],
        ['Cereal', 231, 14, 2011],
        ['Tofu', 235, 5, 2011],
        ['Dumpling', 341, 25, 2011],
        ['Biscuit', 122, 29, 2011],
        ['Cake', 143, 30, 2012],
        ['Cereal', 201, 19, 2012],
        ['Tofu', 255, 7, 2012],
        ['Dumpling', 241, 27, 2012],
        ['Biscuit', 102, 34, 2012],
        ['Cake', 153, 28, 2013],
        ['Cereal', 181, 21, 2013],
        ['Tofu', 395, 4, 2013],
        ['Dumpling', 281, 31, 2013],
        ['Biscuit', 92, 39, 2013],
        ['Cake', 223, 29, 2014],
        ['Cereal', 211, 17, 2014],
        ['Tofu', 345, 3, 2014],
        ['Dumpling', 211, 35, 2014],
        ['Biscuit', 72, 24, 2014]
      ]
      // id: 'a'
    },
    {
      // 这个 dataset 的 index 是 `1`。
      // 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2011 }
      }
      // 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。
      // 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如，
      // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如，
      // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。
      // 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。
    },
    {
      // 这个 dataset 的 index 是 `2`。
      // 同样，这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定，
      // 那么输入默认来自于 index 为 `0` 的 dataset 。
      transform: {
        // 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。
        type: 'filter',
        // 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。
        // 在这个 "filter" transform 中，`config` 用于指定筛选条件。
        // 下面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 2012 的所有
        // 数据项。
        config: { dimension: 'Year', value: 2012 }
      }
    },
    {
      // 这个 dataset 的 index 是 `3`。
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2013 }
      }
    }
  ],
  series: [
    {
      type: 'pie',
      radius: 50,
      center: ['25%', '50%'],
      // 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述
      // 2011 年那个 "filter" transform 的结果。
      datasetIndex: 1
    },
    {
      type: 'pie',
      radius: 50,
      center: ['50%', '50%'],
      datasetIndex: 2
    },
    {
      type: 'pie',
      radius: 50,
      center: ['75%', '50%'],
      datasetIndex: 3
    }
  ]
};

链式声明transform，一个语法糖

option = {
  dataset: [
    {
      source: [
        // 原始数据
      ]
    },
    {
      // 几个 transform 被声明成 array ，他们构成了一个链，
      // 前一个 transform 的输出是后一个 transform 的输入。
      transform: [
        {
          type: 'filter',
          config: { dimension: 'Product', value: 'Tofu' }
        },
        {
          type: 'sort',
          config: { dimension: 'Year', order: 'desc' }
        }
      ]
    }
  ],
  series: {
    type: 'pie',
    // 这个系列引用上述 transform 的结果。
    datasetIndex: 1
  }
};

数据转换器filter

在transform.type中声明数据转换器，并且在transform.config中给出数据筛选条件

 {
      transform: {
      	// filter表示过滤
        type: 'filter',
        config: { dimension: 'Year', '=': 2011 }
        // 这个筛选条件表示，遍历数据，筛选出维度（ dimension ）
        // 'Year' 上值为 2011 的所有数据项。
      }
   }
// 逻辑比较操作（and\or\not,这三种操作符之间是可以互相嵌套的）
{
      transform: {
        type: 'filter',
        config: {
          // 使用 and 操作符。
          // 类似地，同样的位置也可以使用 “or” 或 “not”。
          // 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。
          and: [
            { dimension: 'Year', '=': 2011 },
            { dimension: 'Price', '>=': 20, '<': 30 }
          ]
        }
        // 这个表达的是，选出 2011 年价格大于等于 20 但小于 30 的数据项。
      }
    }

数据转换器sort

sort用于数据排序，主要用于在类目轴上（axis.type: ‘category’）

{
      transform: {
        type: 'sort',
        // 按score排序
        config: { dimension: 'score', order: 'asc' }
      }