JinLinC个人在线文档库

常用属性

图表的属性一般设置在option对象中，option用于指定图表的配置项和数据

全部的属性详见：Documentation - Apache ECharts

图表标题

标题是图表的入口，用户通常通过标题来理解图表的主题，title属性设置如下：

title: {
   text: "图表的名称",
   x: 'left',  // 水平位置，默认为左对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
   y: 'top',   // 垂直位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
   backgroundColor: 'rgba(0,0,0,0)',   // 标题背景颜色
   borderColor: '#ccc',                // 标题边框颜色
   borderWidth: 0,           // 标题边框线宽，单位px，默认为0（无边框）
   padding: 5,               // 标题内边距，单位px，默认各方向内边距为5，
   itemGap: 10,              // 主副标题纵向间隔，单位px，默认为10，
   textStyle: {          // 标题文本的具体样式
       fontSize: 18,
       fontWeight: 'bolder',
       color: '#333'     // 主标题文字颜色
   },
   subtextStyle: {       // 副标题文本的具体样式
       fontSize: 12,
       color: '#aaa'     // 副标题文字颜色
   }
},

默认的图表标题在图表的左上方进行显示

图例

legend用于展示图表中的不同数据系列，用户可以通过点击图例来选择显示或隐藏某个系列的数据

legend: {
    data: ['企业数', '设备数'],    // 设置图例文本内容
    orient: 'horizontal', // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
    x: 'center', // 水平安放位置，默认为全图居中，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
    y: 'top',  // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
    // top: '10%', // 设置图例距离顶部的位置
    // right: '10%', // 设置图例距离右侧的位置
    backgroundColor: 'rgba(0,0,0,0)',  // 设置图例的背景颜色
    borderColor: '#ccc',               // 图例边框颜色
    borderWidth: 0,         // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5,             // 图例内边距，单位px，默认各方向内边距为5，
    itemGap: 10,            // 各个item之间的间隔，单位px，默认为10
    icon: 'rect',           // 设置图例图标
    itemWidth: 20,          // 图例图形（图标）宽度
    itemHeight: 14,         // 图例图形（图标）高度
    textStyle: {         // 图例文本样式
        fontSize: 12,
        color: '#333'    // 图例文字颜色
    }
},

data和图标icon可以一起进行设置，可以设置为一条图例有不同的图标：

data: [
     {icon: 'circle', name: '111'},
     {icon: 'rect', name: '222'},
     {icon: 'roundRect', name: '333'},
     {icon: 'triangle', name: '444'},
     {icon: 'diamond', name: '555'},
     {icon: 'pin', name: '666'},
     {icon: 'arrow', name: '777'}
 ]

数据提示

tooltip用于显示鼠标悬浮时的提示信息，常见的触发方式包括axis和item，分别用于有轴图表和无轴图表（如饼图）

tooltip: {
    trigger: 'item',   // 触发类型，默认数据触发，可选为：'item' ¦ 'axis'
    showDelay: 20,     // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
    hideDelay: 100,    // 隐藏延迟，单位ms
    transitionDuration : 0.4,       // 动画变换时间，单位s
    backgroundColor: 'rgba(0,0,0,0.7)',// 背景颜色，默认为透明度为0.7的黑色
    borderColor: '#333',            // 提示边框颜色
    borderRadius: 4,                // 提示边框圆角，单位px，默认为4
    borderWidth: 0,                // 提示边框线宽，单位px，默认为0（无边框）
    padding: 5,                   // 提示内边距，单位px，默认各方向内边距为5，
    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
        lineStyle : {          // 直线指示器样式设置
            color: '#48b',
            width: 2,
            type: 'solid'
        },
        shadowStyle : {              // 阴影指示器样式设置
            width: 'auto',           // 阴影大小
            color: 'rgba(150,150,150,0.3)'  // 阴影颜色
        }
    },
    textStyle: {        // 设置提示框文本字体样式
        fontSize: 12,
        color: '#fff'
    }
},

轴类型

x轴和y轴的类型统称为轴类型，轴类型有三种类型：

category 类目轴，适用于离散的类目数据，就是x轴的类别是自定义的，都是字符串，需要通过data设置类目数据与series 中data对应，data是一维数组
time 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度，data是二维数组，第一个数值对应x轴
value 数值轴，适用于连续的数据，是数据类型的数据与series 中data对应，data是二维数组，第一个数值对应x轴

x y轴翻转，就是 xAxis与yAxis的设置交换一下；柱图和条形图之间可以相互转换

`x`轴设置

xAxis用于设置图表的x轴。可以设置轴的类型（数值轴、类目轴、时间轴等），以及显示的数据

xAxis: [
    {
        type: "category",
        boundaryGap: false,
        data: ["09-08", "09-09", "09-10", "09-11", "09-12", "09-13"],
    },
],

`y`轴设置

yAxis设置图表的y轴，通常用于显示连续的数据值

yAxis: [
    {
        type: "value",
    },
],

系列列表

series是图表的核心部分，用于定义图表中显示的具体数据和样式。每一个series对象代表图表中的一条数据线、一个柱状图等

series: [{
    name: '销量',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

每个系列通过 type 决定自己的图表类型：
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'：自定义系列

值域

dataRange值域范围信息框用于选择图表中的对应值域范围的数据

dataRange: {
    orient: 'vertical',    // 布局方式
    x: 'left',             // 水平安放位置，默认为全图左对齐
    y: 'bottom',           // 垂直安放位置，默认为全图底部
    backgroundColor: 'rgba(0,0,0,0)',   // 值域内容框的背景颜色
    borderColor: '#ccc',                // 值域边框颜色
    borderWidth: 0,             // 值域边框线宽，单位px，默认为0（无边框）
    padding: 5,                 // 值域内边距，单位px，默认各方向内边距为5
    itemGap: 10,                // 各个item之间的间隔，单位px，默认为10，
    itemWidth: 20,           // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
    itemHeight: 14,          // 值域图形高度，线性渐变垂直布局高度为该值 * 10
    splitNumber: 5,          // 分割段数，默认为5，为0时为线性渐变
    color:['#1e90ff','#f0ffff'],  // 具体值域的文本颜色
    text:['高','低'],              // 文本，默认为数值文本（具体值域的内容）
    textStyle: {               // 值域文本样式
        fontSize: 12,
        color: '#333'           // 值域文字颜色
    }
},

网格

grid 是用于配置直角坐标系内绘图网格的配置项。grid 主要用于控制图表的布局，特别是当图表中包含多个坐标系（如多个 X 轴或Y轴）时，grid 可以帮助你更好地组织和管理这些坐标系的位置和大小

grid: {
    show: true,    // 显示 grid 区域
    left: '10%',   // 图表网格距离容器左侧 10%
    right: '10%',  // 图表网格距离容器右侧 10%
    top: '15%',    // 图表网格距离容器顶部 15%
    bottom: '15%', // 图表网格距离容器底部 15%
    width: 'auto', // 宽度自动调整
    height: 'auto', // 高度自动调整
    backgroundColor: 'rgba(0,0,0,0.02)', // 背景颜色
    borderColor: '#ccc', // 边框颜色
    borderWidth: 1, // 边框宽度
    containLabel: true  // 包含坐标标签
},

containLabel 是一个布尔值属性，用于控制 grid 区域是否包含坐标轴的标签（label），这个属性在处理图表布局时非常有用，特别是在标签较长或图表较小时，可以帮助你更好地控制图表的显示效果

常用属性 ​

图表标题 ​

图例 ​

数据提示 ​

轴类型 ​

x轴设置 ​

y轴设置 ​

系列列表 ​

值域 ​

网格 ​