//柱状图、折线图
option = {
// 自定义图表颜色
color:['#3979a8'],
tooltip : {
// 提示框触发类型 可选 item(散点,饼图) | axis(柱状,折线) | none
trigger: 'axis',
// 坐标轴指示器,坐标轴触发有效
axisPointer : {
// 默认为直线,可选为:'line' | 'shadow'
type : 'line'
}
},
title : {
// 是否显示
show: true,
// 主标题文本,'\n'指定换行
text: 'iphone销量',
// 副标题文本,'\n'指定换行
subtext: '纯属虚构',
// 水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
x: 'center',
// 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
y: 'top',
// 水平对齐方式,默认根据x设置自动调整,可选为: left' | 'right' | 'center
textAlign: 'center',
},
legend: {
//图例的类型,默认为plain,可选plain(普通) | scroll(可滚动翻页图例)
type:'plain',
// 图例的布局朝向,默认为horizontal,可选为 horizontal | vertical
orient: 'vertical',
// 图例每项间隔
itemGap:12,
//水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
x: 'right',
//垂直安放位置,默认为顶端,可选为:'top' | 'center' | 'bottom' | {number}(y坐标,单位px)
y:'top',
// 图例数据
data:[],
//图例文字的样式
textStyle:{
// 颜色
color:'#e4e4e4',
// 字号
fontSize:31,
},
// 图例组件高度
height:500,
},
grid: {
// 是否显示坐标系网格,可选为 'false' | 'true'
show:'false',
// grid组件离容器顶部距离即图表离容器顶部距离
top: '0%',
// grid组件离容器底部距离即图表离容器底部距离
bottom: '0%',
// grid组件离容器左侧距离即图表离容器左侧距离
left: '30%',
// grid组件离容器右侧距离即图表离容器右侧距离
right: '0%',
},
// x轴设置
xAxis : [
{
// 坐标轴类型,可选为:'value' | 'category' | 'time' | 'log'
type : 'category',
// 坐标轴两边留白,类目轴可配置true或false,默认为true这是刻度只作为分割线,标签和数据点都会在两个刻度之间的带中间;非类目轴设置两个值的数组boundaryGap:['20%','20%']
boundaryGap:true,
// 坐标轴数据
data : [],
//坐标轴 轴线设置
axisLine:{
// 轴线样式设置
lineStyle:{
// 颜色
color:'#fff',
// 宽度
width:'1',
}
},
// 坐标轴刻度设置
axisTick:{
// 是否显示
show:true,
// 类目轴中boundaryGap设置为true时有效,保证刻度线和标签对齐
alignWithLabel:true
},
// 分割线(坐标轴在grid区域的分割线)的设置
splitLine: {
// 是否显示
show:true,
// 分割线样式
lineStyle:{
// 颜色
color:'#64676b',
// 透明度
opacity:'1',
}
},
//刻度标签设置
axisLabel: {
//文本设置
textStyle: {
// 颜色
color: '#e4e4e4',
// 字号
fontSize:'34'
},
//刻度标签显示间隔,0 强制显示所有标签,1 隔一个标签显示一个标签
interval:0,
//刻度标签旋转角度
rotate:-35,
},
}
],
// 双Y轴配置
yAxis : [
{
// 坐标轴类型,可选为:'value' | 'category' | 'time' | 'log'
type : 'value',
// y轴的位置,第一个默认在左侧
position:'left',
// y轴相对默认位置的偏移,多个Y轴是有用
offset:0,
// y轴刻度最大值
max:100,
// Y轴刻度最小值
min:0,
// 坐标轴 轴线设置
axisLine:{
// 轴线样式设置
lineStyle:{
// 颜色
color:'#fff',
}
},
// 刻度标签设置
axisLabel: {
// 刻度标签文本设置
textStyle: {
// 颜色
color: '#e4e4e4',
// 字号
fontSize:31
},
},
},
{
// 坐标轴类型,可选为:'value' | 'category' | 'time' | 'log'
type : 'value',
//Y轴的位置,第二个默认在右侧
position:'right',
//Y轴相对默认位置的偏移,多个Y轴有用
offset:0,
// Y轴刻度最大值
max:100,
// Y轴刻度最小值
min:0,
// 坐标轴 轴线设置
axisLine:{
// 轴线样式设置
lineStyle:{
// 颜色
color:'#fff',
}
},
// 刻度标签设置
axisLabel: {
// 刻度标签文本设置
textStyle: {
// 颜色
color: '#e4e4e4',
// 字号
fontSize:31
},
},
}
],
series : [
{
// 系列名称,用于tooltip显示
name:'船舶类型',
//图形类型,bar用于柱状图
type:'bar',
// 柱间距离,可设固定值(20)或者百分比(30%,表示柱子宽度的30%),如想要两个柱子重叠,可设为'-100%',在运用柱子做背景时有用
barGap:'20',
// 数据堆叠,堆叠的数据需配置相同的stack值
stack:'类型',
//图形柱状的宽度
barWidth:50,
// 图形样式
itemStyle:{
/*柱状 颜色渐变
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#83bff6'}
]
)
},
*/
normal:{
// label(图形文本标签)设置
label:{
// 是否显示
show:true,
//label显示位置,可选为 'top' | 'middle' | 'bottom'
position:'top',
//label文本样式设置
textStyle:{
// 字号
fontSize:36,
// 颜色
color:'#fff000'
}
},
}
},
// 图形数据
data:[]
},
{
// 系列名称,用于tooltip显示
name:'进入',
// 图形类型,line用于折线图
type:'line',
// 数据堆叠,堆叠的数据需配置相同的stack值
stack:'类型',
// 图形数据
data:[],
// 选择对应的Y轴,1 对应第二个Y轴,多个Y轴有用
yAxisIndex: 1,
// 标记(拐点)的图形,默认为'emptyCircle',可选为 'circle' | 'rect' | 'roundRect' | 'triangle' | 'diamond' | 'pin' | 'arrow' | 'image://url'设置图片 | 'path://'将图标设置为矢量路径
symbol:'circle',
//标记(拐点)的大小
symbolSize: 10,
// 是否平滑曲线显示
smooth:false,
// 图形样式
itemStyle : {
normal : {
// 折线样式
lineStyle:{
// 宽度
width:4,
// 类型,默认为solid,可选为 'solid' | 'dashed' | 'dotted'
type:'dotted'
},
// label文本设置
label:{
// 是否显示
show:true,
// label文本显示位置,可选为 'top' | 'middle' | 'bottom'
position:'top',
// 文本样式
textStyle:{
// 字号
fontSize:20,
}
}
}
},
},
]
};
echarts 柱状图、折线图配置整理
最新推荐文章于 2024-07-25 14:17:30 发布