最近一年项目开发中陆陆续续使用过很多次echarts图表，边用边整理了一份关于option参数设置的资料，以便后续使用时可以查阅。echarts官方文档对于option的讲解很详细，能够解决大半开发中遇到的问题，刚开始使用echarts的童鞋，如果遇到问题还是要多多查阅官网文档哦~
附上>>>>>>>>
echarts官方文档：Examples - Apache ECharts
自己整理的参考资料：
option = {
//echarts容器背景色
backgroundColor: '#000',
//系列颜色，调色盘颜色列表，可以在全局设置，也可以分别设置在series中
color: ["#fff", "#ccc"],
//标题，可以设置多个，形式为数组
title: {
text: "各单位落实情况", //文本
//文本样式设置
textStyle: {
color: "#333333", //颜色
fontSize: 20, //字体大小
},
//位置
left: "center",
top: "0%"
},
//图例，图中的标记(symbol)，通常位于右上方，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: {
icon: "rect", //形状
orient: "horizontal", //horizontal水平方向排列，vertical垂直方向排列
itemGap: 25, //间距
itemWidth: 15,
itemHeight: 7,
top: '10%',
right: 0,
borderRadius: 10,
data: ['参考1', '参考2', '百分比数据', '百分比2'], //如果不设置，会通过series系列数据自动生成
textStyle: {
color: '#ccc', //文字颜色
fontSize: "20",
},
selectedMode: false, //控制是否可以通过点击图例改变图形的显示状态。默认开启，false可关闭。
},
//提示框，可以全局设置，也可设置在坐标系或系列数据中
tooltip: {
trigger: "axis", //触发类型，'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
axisPointer: {
type: "shadow", //提示类型：鼠标移入显示阴影
}
},
//坐标系内的绘图网格，可以理解为整个图表
grid: {
top: '20%',
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true, //grid区域是否包含坐标轴的刻度标签
},
//用于区域缩放，从而能自由关注细节的数据信息，不常用
dataZoom: [
{
xAxisIndex: 0,
show: false, //是否展示dataZoom组件
type: "slider",
startValue: 0,
endValue: 3
}
],
//直角坐标系 grid 中的 x 轴
xAxis: [
{
type: 'category', //坐标轴类型：'value' 数值轴，适用于连续数据；'category' 类目轴，适用于离散的类目数据
boundaryGap: false, //设置为false代表从X轴零刻度开始绘制，设置为true代表离零刻度间隔一段距离
data: ['大客户', '人才服务部', '人才招聘部', '人才培训部', '档案服务部', '外包服务部'], //X轴类目数据，仅type为category时有效
//X轴刻度相关设置
axisTick: {
show: true, //是否显示X轴刻度，默认显示
interval: 0, //坐标轴刻度的显示间隔
inside: false, //坐标轴刻度是否朝内，默认朝外
alignWithLabel: false, //刻度是否位于标签中间
},
//X轴刻度标签相关设置（指X轴文字）
axisLabel: {
show: true, //是否显示
color: '#ccc', //文字颜色
interval: 0, //间隔显示个数
rotate: 20, //刻度标签旋转的角度，值>0向左倾斜，值<0则向右倾斜，旋转的角度从 -90 度到 90 度。
},
//x轴轴线相关设置
axisLine: {
show: false, //是否显示X轴，默认显示
symbol: ['none', 'arrow'] //轴线两边的箭头，默认不显示
},
//坐标轴提示框配置项，鼠标移入图形时显示
axisPointer: {
show: false, //默认不显示
type: 'shadow', //'line'直线指示器 'shadow'阴影指示器 'none'无
},
}
],
//直角坐标系 grid 中的 y 轴，如果有多条Y轴，yAxis为数组
//当有两个Y轴时默认分别位于坐标轴两端
//如果柱状和折线都有，则要通过数组设置两个对象，分别对应柱状和折线的样式
yAxis: {
type: 'value', //坐标轴类型：'value' 数值轴，适用于连续数据；'category' 类目轴，适用于离散的类目数据；'time' 时间轴，适用于连续的时序数据
name: '数据', //坐标轴名称
min: 0, //坐标轴刻度最小值
max: 100, //坐标轴刻度最大值
interval: 20, //强制设置坐标轴分割间隔
minInterval: 1, //表示将刻度的最小间距设置为1，只在数值轴或时间轴中有效
//Y轴刻度标签相关设置
axisLabel: {
formatter: '{value} %', //Y轴刻度格式，支持字符串模板和回调函数两种形式
color: '#fff', //刻度标签文字的颜色
},
//Y轴在 grid 区域中的分隔线（横向）
splitLine: {
show: true, //是否显示
interval: 0, //坐标轴分隔线的显示间隔，在类目轴中有效
lineStyle: {
color: "#053c89", //分隔线颜色
width: "2", //分隔线宽度
type: "solid", //线条样式，实线、虚线
}
}
},
//原生图形元素组件
graphic:
{
z: 1000, //显示层级
type: 'image', //可随意是image, text, circle, sector, ring等
id: 'logo',
left: '32%',
top: '42%',
bounding: 'raw', //决定此图形元素在定位时，对自身的包围盒计算方式
rotation: 0, //旋转角度
origin: [66.5, 40.5], //中心点
scale: [1.0, 1.0], //缩放
style: {
image: situationhouseicon, //图片路径
width: 129,
height: 65,
opacity: 1
}
},
//数据集
series: [
{
name: '系列1',
type: 'bar', //柱状图
stack: 'BB', //数据堆叠，同个类目轴上配置相同stack的系列可以堆叠放置
barWidth: '15%', //柱条的宽度，不设时自适应。
//高亮的图形样式和标签样式
emphasis: {
disabled: true, //是否关闭高亮状态
focus: "series", //在高亮图形时，是否淡出其它数据的图形以达到聚焦的效果
},
//图形的样式
itemStyle: {
opacity: "0.5", //图形透明度，支持从 0 到 1 的数字
borderRadius: [15, 15, 0, 0], //圆角半径，单位px
normal: {
//柱条的颜色，可设置渐变色或纯色，echarts.graphic.LinearGradient参数含义：前4个参数用于配置渐变色的起止位置, 依次对应从右到左/从下到上/从左到右/从上到下四个方位，第5个参数是一个数组, 用于配置颜色的渐变过程，包含offset和color两个参数，offset的范围是0 ~ 1, 用于表示位置, color表示颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#02CDF5'
}, {
offset: 1,
color: '#02CDF5'
}]),
}
},
//图形上的文本标签，用于说明图形的数据信息，比如值，名称等
label: {
normal: {
show: true, //是否显示
distance: 5, //距离图形元素的距离
position: "left", //标签的位置，例top / left / right / bottom / inside / insideLeft / insideRight / insideTop 等
//文本样式
textStyle: {
color: "#B78E11",
fontSize: "40",
fontWeight: "bold",
fontStyle: "italic",
},
formatter: "{b}", //标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板：{a}：系列名series.name。{b}：数据名xAxis.data。{c}：数据值yAxis.data。{@xxx}：数据中名为 'xxx' 的维度的值，如 { @product } 表示名为 'product' 的维度的值。{ @[n] }：数据中维度 n 的值，如 { @[3] } 表示维度 3 的值，从 0 开始计数。
overflow: "break", //文字超出宽度是否隐藏
}
},
//系列中的数据内容数组，数组项通常为具体的数据项
//1、只有一个X轴维度，是一维数组
data: [
100, 80, 100, 120, 200, 150,
],
//2、当有多个X轴维度时，是二维数组
data: [
// 维度X 维度Y 其他维度 ...
[3.4, 4.5, 15, 43],
[4.2, 2.3, 20, 91],
[10.8, 9.5, 30, 18],
[7.2, 8.8, 18, 57]
]
},
{
name: '系列2',
type: 'bar', //柱状图
stack: 'BB',
label: {
normal: {
show: true,
position: "left",
textStyle: {
color: "#06AD80",
}
}
},
barWidth: '15%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFC600'
}, {
offset: 1,
color: '#FFC600'
}]),
}
},
data: [
150, 280, 200, 100, 100, 120,
]
},
{
type: 'line', //折线图
showSymbol: true, //是否展示数据点，默认为true
name: '系列3',
barWidth: 2, //线条宽度
smooth: true, //是否为平滑曲线
showAllSymbol: true, //显示所有图形
symbol: "circle", //数据点图形：实心圆
symbolSize: 6, //数据点大小
itemStyle: {
normal: {
color: "rgba(209, 168, 0, 0.7)", //折线颜色
shadowColor: "#29acff", //背景阴影颜色
shadowBlur: 10, //背景阴影长度
borderWidth: 2, //边框宽度
borderColor: "#fff", //边框颜色
}
},
//折线区域样式
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(209, 168, 0, 0.6)',
}, {
offset: 0.1,
color: 'rgba(209, 168, 0, 0.1)',
}])
},
},
{
z: 1000, //显示层级
name: '系列4',
type: 'pie', //饼图
radius: ['10%', '40%'], //饼图的半径，可以为如下类型：number：直接指定外半径值；string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度；Array：数组的第一项是内半径，第二项是外半径。
center: ['20%', '50%'], //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
data: source,
roseType: "radius", //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小；'area' 所有扇区圆心角相同，仅通过半径展现数据大小
silent: false, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
itemStyle: {
normal: {
label: {
show: false
},
shadowColor: '#438bff',
shadowBlur: 20
},
},
//每个图形的起始位置
minAngle: 15,
startAngle: 315,
//标签的视觉引导线配置
labelLine: {
show: false,
normal: {
lineStyle: {
color: "rgb(98,137,169)",
},
smooth: 0.2, //指示线是否平滑
length: 10, //第一段长度
length2: 20, //第二段长度
},
},
}
]
}