本文介绍了echarts的按需导入、color调色盘、title组件、legend图例、tooltip提示框、dataZoom区域缩放、grid坐标系网格、xAxis和yAxis轴配置，以及Line折线图、饼图和柱状图的常见设置，帮助理解和优化数据可视化效果。
echarts常用图形参数配置
echarts 是一款基于Javascript的数据可视化图表库，涵盖各行业图表，满足各种需求。
官方文档: echarts
术语手册：cheat-sheet
echarts 按需导入
echarts 功能丰富但库体积也比较大，项目中往往只会用到部分图表，导入整个echarts库会造成资源（带宽）浪费，从而影响页面的首屏加载 所以需要根据需求对echarts 按需引入:
import echarts from "echarts/lib/echarts";
//引入所需系列图形
//折线图
import "echarts/lib/chart/line";
//饼图
import "echarts/lib/chart/pie";
//柱状图
import "echarts/lib/chart/bar";
//关系图
import "echarts/lib/chart/graph";
//路径图
import "echarts/lib/chart/lines";
//引入所需组件
//标题
import "echarts/lib/component/title";
//提示框
import "echarts/lib/component/tooltip";
//图例
import "echarts/lib/component/legend";
//数据缩放
import "echarts/lib/component/dataZoom";
export default {
install (Vue) {
Vue.prototype.$echarts = echarts;
}
}
color 调色盘
如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色
{
"color": ["#c23531","#2f4554", "#61a0a8"]
}
title 组件
标题组件，包含主标题和副标题
{
//不需要title显示时可不设置该选项
"title": {
"show": true,
//标题文本，支持使用 \n 换行
"text": "",
//标题文本样式
"textStyle": {
"color": "#333",
...
},
//副标题文本，支持使用 \n 换行
"subtext": "",
//副标题文本样式
"subtextStyle": {
"color": "#ccc"
},
//整体（包括 text 和 subtext）的水平对齐
//可选值：'auto'、'left'、'right'、'center'
"textAlign": "auto",
//整体（包括 text 和 subtext）的垂直对齐
//可选值：'auto'、'top'、'bottom'、'middle'
"textVerticalAlign": "auto",
//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
"padding": 5, // or [5, 10] or [5, 10, 5, 10]
//主副标题之间的间距
"itemGap": 10,
//title 组件离容器左侧的距离
//可选值：'left', 'center', 'right'
//可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比
"left": "auto",
//title 组件离容器右侧的距离
//可选值：'top', 'middle', 'bottom'
//可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比
"top": "auto",
//title 组件离容器右侧的距离，其余同 left
"right": "auto",
//title 组件离容器下侧的距离,其余同 top
"bottom": "auto"
}
}
legend（图例） 组件
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
{
"legend": {
//可选值：plain、scroll（可滚动翻页的图例。当图例数量较多时可以使用）
"type": "plain",
"show": true,
//图例 组件离容器左侧的距离
//可选值：'left', 'center', 'right'
//可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比
"left": "auto",
//图例 组件离容器右侧的距离
//可选值：'top', 'middle', 'bottom'
//可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比
"top": "auto",
//图例 组件离容器右侧的距离，其余同 left
"right": "auto",
//图例 组件离容器下侧的距离,其余同 top
"bottom": "auto",
//图例组件的宽度，值类型：number,string
"width": "auto",
//图例组件的高度,值类型：number,string
"height": "auto",
//图例列表的布局朝向
//可选值：horizontal、vertical
"orient": "horizontal",
//图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
"padding": 5 , // or [5, 10] or [5, 10, 5, 10]
//图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
"itemGap": 10,
//图例标记的图形宽度
"itemWidth": 25,
//图例标记的图形高度
"itemHeight": 14,
//图例的公用文本样式
"textStyle": {
...
},
//配置项同 series层级的tooltip。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip
"tooltip": {
...
},
//图例项的 icon
//可选值：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
//可为图片的URL链接
//不设时默认系列图形的icon
"icon": "roundRect",
"data": ["name1", "name2", "name3"],
/*
or
data: [
{
name: "name1",
icon: "rect",
textStyle: {
...
}
},
...
]
*/
}
}
tooltip 提示框组件
{
"tooltip": {
//是否显示提示框组件，包括提示框浮层和 axisPointer
"show": true,
//触发类型
//可选值：item/axis/none
//item: 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
//axis: 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
"trigger": "item",
//是否将 tooltip 的 DOM 节点添加为 HTML 的 <body> 的子节点
"appendToBody": false,
//提示框浮层的位置，默认不设置时位置会跟随鼠标的位置
// 绝对位置position: [10, 10]，相对于容器左侧 10px, 上侧 10 px
// 相对位置position: ['50%', '50%']，放置在容器正中间
"position": null,
//提示框浮层内容格式器,值类型：string/Function
//模板变量有 {a}, {b}，{c}，{d}分别表示系列名，数据名，数据值，百分比
"formatter": "{a} <br/>{b}: {c} ({d}%)",
//提示框浮层的文本样式
"textStyle": {
"color": "#fff",
...
},
//坐标轴指示器配置项
//tooltip.axisPointer 是配置坐标轴指示器的快捷方式,也可使用xAxis.axisPointer 或 angleAxis.axisPointer配置
"axisPointer": {
//触发类型
//可选值： line/shadow/cross/none
//line: 直线指示器
//shadow: 阴影指示器
//cross: 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer
"type": "line",
//指示器的坐标轴
//可选值：'x', 'y', 'radius', 'angle'
//默认情况，坐标系会自动选择显示哪个轴的 axisPointer（默认取类目轴或者时间轴）
"axis": "auto"
}
}
}
dataZoom
dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响
{
"dataZoom": [
{
//滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游
"type": "slider",
//数据窗口范围的起始百分比。范围是：0 ~ 100，表示 0% ~ 100%
"start": 0,
//数据窗口范围的结束百分比。范围是：0 ~ 100
"end": 100,
//用于限制窗口大小的最小值（百分比值），取值范围是 0 ~ 100
"minSpan": null,
//用于限制窗口大小的最大值（百分比值），取值范围是 0 ~ 100
"maxSpan": null,
//布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴
//可选值：horizontal， vertical
"orient": null,
//dataZoom-slider组件离容器左侧的距离
//可选值：'left', 'center', 'right'
//left 的值可以是20这样的具体像素值，也可以是'20%'这样相对于容器高宽的百分比
"left": "auto",
//dataZoom-slider组件离容器上侧的距离
//可选值：'top', 'middle', 'bottom'
//top 的值可以是20这样的具体像素值，也可以是'20%'这样相对于容器高宽的百分比
"top": "auto",
//dataZoom-slider组件离容器上侧的距离
"right": "auto",
//dataZoom-slider组件离容器右侧的距离
"bottom ": "auto",
}
]
}
grid 坐标系网格
直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴
{
"grid": {
//是否显示直角坐标系网格
"show": false,
//grid 组件离容器左侧的距离
//可选值：'left', 'center', 'right'
//可以是 20 这样的具体像素值，也可以是 '20%' 这样相对于容器高宽的百分比
"left": "10%",
//grid 组件离容器上侧的距离
//可选值：'top', 'middle', 'bottom'
//可以是 20 这样的具体像素值，也可以是 '20%' 这样相对于容器高度的百分比
"top": 60,
//grid 组件离容器右侧的距离,其余同left
"right": "10%",
//grid 组件离容器下侧的距离,其余同top
"bottom": "60" ,
//grid 组件的宽度。默认自适应
"width": "auto",
//grid 组件的高度。默认自适应
"height": "auto",
//grid 区域是否包含坐标轴的刻度标签
//false时：grid决定的是由坐标轴形成的矩形的尺寸和位置
//true时：grid决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置，常用于『防止标签溢出』的场景
"containLabel": false,
//网格的边框线宽,show为true生效
"borderWidth": 1,
//网格的边框颜色,show为true生效
"borderColor": "#ccc"
}
}
xAxis x轴
直角坐标系 grid 中的 x 轴
{
"xAxis":{
//是否显示 x 轴
"show": true,
//x 轴所在的 grid 的索引，默认位于第一个 grid
"gridIndex": 0,
//x 轴的位置
//可选值： bottom,top
"position": "bottom",
//坐标轴类型
//可选值：value,category，time，log
//value: 数值轴，适用于连续数据
//category: 类目轴，适用于离散的类目数据
//time: 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同
//log:对数轴。适用于对数数据
"type": "category",
//坐标轴名称
"name": "",
//坐标轴名称显示位置
//可选值： start、middle、end
"nameLocation": "end",
//坐标轴名称与轴线之间的距离
"nameGap": 15,
//坐标轴名称文本样式设置
"nameTextStyle": {
//文字水平对齐方式，默认自动
//可选值：left/center/right
"align": "left",
//不设时默认取axisLine.lineStyle.color
"color": "#ccc",
"fontSize": 12,
...
},
//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
//类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间
//非类目轴boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效
"boundaryGap": false,
//坐标轴刻度最小值,值类型：number、string、Function
//可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度,不设置时会自动计算最小值保证坐标轴刻度的均匀分布
"min": null,
//坐标轴刻度最大值,值类型：number、string、Function
//可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度,不设置时会自动计算最大值保证坐标轴刻度的均匀分布
"max": null,
//坐标轴的分割段数
//需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
//类目轴中无效
"splitNumber": 5,
//自动计算的坐标轴最小间隔大小
//只在数值轴或时间轴中有效
//可以设置成1保证坐标轴分割刻度显示成整数
"minInterval": 0,
//自动计算的坐标轴最大间隔大小
//只在数值轴或时间轴中有效
"maxInterval": null,
//坐标轴轴线相关设置
"axisLine": {
//是否显示坐标轴轴线
"show": true,
//坐标轴线样式设置
"lineStyle": {
"color": "#333",
//坐标轴线线宽
"width": 1,
...
}
},
//坐标轴刻度相关设置
"axisTick": {
//是否显示坐标轴刻度
"show": true,
//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
"alignWithLabel": true,
//坐标轴刻度是否朝内
"inside": false,
//坐标轴刻度的长度
"length": 5,
//刻度线的样式设置
"lineStyle": {
"color": "#333",
//刻度线线宽
"width": 1,
...
}
},
//坐标轴刻度标签相关设置
"axisLabel": {
//是否显示刻度标签
"show": true,
//坐标轴刻度标签的显示间隔，在类目轴中有效,默认会采用标签不重叠的策略间隔显示标签
//设置成 0 强制显示所有标签
//其余数值：隔x个标签显示一个标签
"interval": "auto",
...
},
//坐标轴在 grid 区域中的分隔线设置
"splitLine": {
//是否显示分隔线。默认数值轴显示，类目轴不显示
"show": true,
//分隔线样式设置
"lineStyle": {
//分隔线会按数组中颜色的顺序依次循环设置颜色
"color": ['#ccc'],
...
}
},
//类目数据，在类目轴中有效
"data": [...],
//坐标轴指示器设置
"axisPointer": {
//是否显示坐标轴指示器
"show": true,
//指示器类型,
//可选值:line/shadow/none
"type": "line",
...
}
}
}
yAxis y轴
直角坐标系 grid 中的 y 轴
{
"yAxis": {
//是否显示 y 轴
"show": true,
//y 轴所在的 grid 的索引，默认位于第一个 grid
"gridIndex": 0,
//y 轴的位置
//可选值： left,right
"position": "left",
//坐标轴类型
//可选值：value,category，time，log
//value: 数值轴，适用于连续数据
//category: 类目轴，适用于离散的类目数据
//time: 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同
//log:对数轴。适用于对数数据
"type": "category",
//坐标轴名称
"name": "",
//坐标轴名称显示位置
//可选值： start、middle、end
"nameLocation": "end",
//坐标轴名称与轴线之间的距离
"nameGap": 15,
//坐标轴名称文本样式设置
"nameTextStyle": {
//文字水平对齐方式，默认自动
//可选值：left/center/right
"align": "left",
//不设时默认取axisLine.lineStyle.color
"color": "#ccc",
"fontSize": 12,
...
},
//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
//类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间
//非类目轴boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效
"boundaryGap": false,
//坐标轴刻度最小值,值类型：number、string、Function
//可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度,不设置时会自动计算最小值保证坐标轴刻度的均匀分布
"min": null,
//坐标轴刻度最大值,值类型：number、string、Function
//可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度,不设置时会自动计算最大值保证坐标轴刻度的均匀分布
"max": null,
//坐标轴的分割段数
//需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
//类目轴中无效
"splitNumber": 5,
//自动计算的坐标轴最小间隔大小
//只在数值轴或时间轴中有效
//可以设置成1保证坐标轴分割刻度显示成整数
"minInterval": 0,
//自动计算的坐标轴最大间隔大小
//只在数值轴或时间轴中有效
"maxInterval": null,
//坐标轴轴线相关设置
"axisLine": {
//是否显示坐标轴轴线
"show": true,
//坐标轴线样式设置
"lineStyle": {
"color": "#333",
//坐标轴线线宽
"width": 1,
...
}
},
//坐标轴刻度相关设置
"axisTick": {
//是否显示坐标轴刻度
"show": true,
//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
"alignWithLabel": true,
//坐标轴刻度是否朝内
"inside": false,
//坐标轴刻度的长度
"length": 5,
//刻度线的样式设置
"lineStyle": {
"color": "#333",
//刻度线线宽
"width": 1,
...
}
},
//坐标轴刻度标签相关设置
"axisLabel": {
//是否显示刻度标签
"show": true,
//坐标轴刻度标签的显示间隔，在类目轴中有效,默认会采用标签不重叠的策略间隔显示标签
//设置成 0 强制显示所有标签
//其余数值：隔x个标签显示一个标签
"interval": "auto",
...
},
//坐标轴在 grid 区域中的分隔线设置
"splitLine": {
//是否显示分隔线。默认数值轴显示，类目轴不显示
"show": true,
//分隔线样式设置
"lineStyle": {
//分隔线会按数组中颜色的顺序依次循环设置颜色
"color": ['#ccc'],
...
}
},
//类目数据，在类目轴中有效
"data": [...],
//坐标轴指示器设置
"axisPointer": {
//是否显示坐标轴指示器
"show": true,
//指示器类型,
//可选值:line/shadow/none
"type": "line",
...
}
}
}
series 配置
使用何种的 echarts 图形的配置在 series中指定，如：
{
...
"series": [
{
//图形系列的类型
"type": "line",
...
}
]
}
Line 折线图
常用于统计随时间而变化的数据，常用配置如下：
{
"type": "line",
//图形名称，用于tooltip的显示，legend的图例筛选
"name": "xxx",
//hover图例时的是否联动高亮
"legendHoverLink": true,
//折线标记的图形
//默认是emptyCircle，可选值：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'，
//也可以是图片的URL链接
"symbol": "emptyCircle",
//标记的大小
//值类型：number(4同[4,4]), Array([20,10],20表示标记的宽，10表示标记的高), Function
"symbolSize": 4,
//是否显示标记，false时只有tooltip和hover时显示
"showSymbol": true,
//是否开启 hover 在拐点标志上的提示动画效果。
"hoverAnimation": true,
//图形上的文本标签，用于说明图形的一些数据信息
//不显示文本标签可不设
"label": {
"show": false,
...
},
//线条样式
"lineStyle": {
//线条颜色默认也会取itemStyle.color,不设itemStyle.color时会默认去调色盘 option.color 获取颜色
//"color": "#000",
//线宽
"width": 2,
...
},
//区域填充样式
"areaStyle": {
//"color": "#000" or rgba(0, 0, 0, .5),
// 线性渐变, x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比
"color": {
"type": "linear",
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"colorStops": [
{
"offset": 0,
"color": "red" // 0% 处的颜色
},
{
"offset": 1,
"color": "blue" // 100% 处的颜色
}
]
},
//区域填充的透明度，取值0-1
"opacity": 1,
...
},
//图形高亮时的样式
"emphasis": {
//高亮时图形上的文本标签设置，同emphasis层级的label
"label": {
"show": true
},
//高亮时折线拐点标志的样式
"itemStyle": {
...
}
},
//是否平滑曲线显示，默认值为false
//值类型：boolean, number
//如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5
"smooth": true,
//系列中的数据内容数组
//如果没有指定data，并且 option 有 dataset（数据集），那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset。
// 与 xAxis.data 一一对应（准确的说和类目轴（category）的data 一一对应）
"data": [23, 44, 55, 19],
// 其实是下面这种形式的简化：
/*
xAxis: {
data: ['a', 'b', 'm', 'n']
},
//在没制定xAxis的data时可设定维度X来指定x轴数据
"data": [
//维度X 维度Y
[0 or a, 23],
[1 or b, 44],
[2 or m, 55],
[3 or n, 19]
],*/
//是否开启动画，false时将关闭系列（图形）的所有动画效果
"animation": true,
//初始动画时长
//值类型:number/Function
"animationDuration": 1000,
//初始动画的延迟
"animationDelay": 0,
//本系列特定的 tooltip 设定，如系列没有特定需求，可在series层级的tooltip设定就行
"tooltip": {
...
}
}
饼图
常用于统计各项数据的大小与各项数据总和的比例，常用配置如下：
{
"type": "pie",
//图形名称，用于tooltip的显示，legend的图例筛选
"name": "xxx",
//hover图例时的是否联动高亮
"legendHoverLink": true,
//是否开启 hover 在扇区上的放大动画效果，默认值为true
"hoverAnimation": false,
//高亮扇区偏移距离，hover动画开启时有效
"hoverOffset": 10,
//最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
//取值范围：0 ~ 360
"minAngle": 5,
//是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
//如果只是扇区高亮时显示标签，可将该值设为false
"avoidLabelOverlap": true,
//是否在数据和为0的时候不显示扇区
"stillShowZeroSum": true,
//pie chart组件离容器左侧的距离
//值类型：number,string
//string时的可选值：'left', 'center', 'right'，表示相对容器的对其方式
"left": "center",
//pie chart组件离容器上侧的距离,其余同left
"top": "center",
//pie chart组件离容器右侧的距离,其余同left
"right": null,
//pie chart组件离容器下侧的距离,其余同left
"bottom": null,
//pie chart组件的宽度。默认自适应
//值类型string，number
"width": "auto",
//pie chart组件的高度。默认自适应
//值类型string，number
"height": "auto",
//图形上的文本标签设置，用于说明图形的一些数据信息
//不显示文本标签可不设
"label": {
"show": false,
//标签的位置
//可选值：outside（扇区外侧），inside（扇区内部），center（饼图中心位置）
"position": "center",
//标签文字的颜色，不设置时颜色同扇区颜色
"color": "#000",
//标签内容格式器，支持字符串模板和回调函数两种形式，可不设
"formatter": "{a}",
...
},
//图形高亮时的样式
"emphasis": {
//高亮时图形上的文本标签设置，同emphasis层级的label
"label": {
"show": true,
...
},
//高亮时扇区的样式设置
"itemStyle": {
...
},
...
},
//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
"center": ["50%", "50%"],
//饼图的半径,数组的第一项是内半径，第二项是外半径
"radius": ["50%", "70%"],
//系列中的数据内容数组
"data": [
{
//数据项的名称，通常与图例（legend）中data中name相对应
"name": "dataName1",
// 数据项值8
"value": 10,
...
},
{
"name": "dataName2",
"value": 20
}
],
//是否开启动画，false时将关闭系列（图形）的所有动画效果
"animation": true,
//初始动画时长
//值类型:number/Function
"animationDuration": 1000,
//初始动画的延迟
"animationDelay": 0,
//本系列特定的 tooltip 设定，如系列没有特定需求，可在series层级的tooltip设定就行
"tooltip": {
...
}
}
柱状图
常用于分析各项数据的差异性，强调个体之间的比较，不适合数据项数较多的场景，常用配置如下：
{
"type": "bar",
//图形名称，用于tooltip的显示，legend的图例筛选
"name": "xxx",
//hover图例时的是否联动高亮
"legendHoverLink": true,
//图形上的文本标签设置，用于说明图形的一些数据信息
//不显示文本标签可不设
"label": {
"show": false,
//标签的位置
//可选值：top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
//也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置
"position": "top",
//标签文字的颜色
"color": "#000",
//标签内容格式器，支持字符串模板和回调函数两种形式，可不设
"formatter": "{a}",
...
},
//图形高亮时的样式
"emphasis": {
//高亮时图形上的文本标签设置，同emphasis层级的label
"label": {
"show": true,
...
},
//高亮时柱条的样式设置
"itemStyle": {
...
}
},
//柱条的宽度，不设时自适应
//可以是绝对值例如 40 或者百分数例如 '60%'。百分数基于自动计算出的每一类目的宽度
"barWidth": null,
//柱条最小高度，可用于防止某数据项的值过小而影响交互
"barMinHeight": null,
//不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）
"barGap": "30%",
//同一系列的柱间距离，默认为类目间距的20%，可设固定值
"barCategoryGap": "20%",
//系列中的数据内容数组
// 与 xAxis.data 一一对应（准确的说和类目轴（category）的data 一一对应）
"data": [23, 44, 55, 19],
// 其实是下面这种形式的简化：
/*
xAxis: {
type: 'category',
data: ['a', 'b', 'm', 'n']
},
//在没制定xAxis的data时可设定维度X来指定x轴数据
"data": [
//维度X 维度Y
[0 or a, 23],
[1 or b, 44],
[2 or m, 55],
[3 or n, 19]
],*/
//是否开启动画，false时将关闭系列（图形）的所有动画效果
"animation": true,
//初始动画时长
//值类型:number/Function
"animationDuration": 1000,
//初始动画的延迟
"animationDelay": 0,
//本系列特定的 tooltip 设定，如系列没有特定需求，可在series层级的tooltip设定就行
"tooltip": {
...
}
}
扫一扫
955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
