echarts通用配置,可以用官网例子测试(随时补充,欢迎留言,其他类型也是会加的)
柱状图or折线图
轴的设置
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {//刻度轴线,就是指向文字的线,一般不需要
show: false
},
axisLine: {//坐标轴轴线相关设置,一般调整颜色和时候显示,如果有刻度线,建议width大一点
show: true,
lineStyle: {
color: '#DCE2E8',
width: 3
}
},
axisLabel: {//坐标轴刻度标签的相关设置。口头就是轴边上的文字,一般调整颜色
textStyle: {
color: '#556677'
}
},
splitLine: {//坐标轴在 grid 区域中的分隔线,通俗点就是折线图或者柱状图背景上的刻度线,我们ui一般追求不显示或者显示成虚线
show: true,
lineStyle:{
color: 'blue',
type: "dashed",
width: 2,//设置虚线宽度,同理其他东西亦可以设置,详细看官网配置项
}
},
boundaryGap: false
},
yAxis: {
type: 'value',
axisTick: {//刻度轴线,就是指向文字的线,一般不需要
show: false
},
axisLine: {//坐标轴轴线相关设置,一般调整颜色和时候显示,如果有刻度线,建议width大一点
show: true,
lineStyle: {
color: '#DCE2E8',
width: 3
}
},
axisLabel: {//坐标轴刻度标签的相关设置。口头就是轴边上的文字,一般调整颜色
textStyle: {
color: '#556677'
}
},
splitLine: {//坐标轴在 grid 区域中的分隔线,通俗点就是折线图或者柱状图背景上的刻度线,我们ui一般追求不显示或者显示成虚线
// show: false,
lineStyle:{
color: 'red',
type: "dashed",
width: 2,//设置虚线宽度,同理其他东西亦可以设置,详细看官网配置项
}
}
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
lineStyle:{
color:"orange"
},
smooth: true
}]
};
拐点设置和折线下的背景色(渐变)
这里是有版本问题的,用的时候是4.7及以上版本
option = {
xAxis: {
type: ‘category’,
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’],
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
symbolSize: 24,//设置拐点大小
itemStyle: {
color: "red",//线条颜色
borderColor: "blue",//外边框颜色
borderWidth: 12,//外边框大小
//阴影相关配置
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
areaStyle: {//距离顶部的颜色变换
normal: {//设置渐变色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,202,149,0.3)'
},
{
offset: 1,
color: 'rgba(0,202,149,0)'
}
], false),
shadowColor: 'rgba(0,202,149, 0.9)',
shadowBlur: 20
}
},
smooth: true
}]
};
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// boundaryGap: false//时候左右两边贴着轴线
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
symbolSize: 60,//设置拐点大小
itemStyle: {
color: "red",
borderColor: "red",
borderWidth: 80,
//阴影相关配置
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
areaStyle: {//距离顶部的颜色变换
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,202,149,0.3)'
},
{
offset: 1,
color: 'rgba(0,202,149,0)'
}
], false),
shadowColor: 'rgba(0,202,149, 0.9)',
shadowBlur: 20
}
},
smooth: true
}]
};
双y轴
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: [{
type: 'value'
},//下标为0的y轴
{
type: 'value'
}//下标为1的y轴
],
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar',//折线图改为line
smooth: true,
yAxisIndex:0,//属于第几个y轴,详细看文档信息
},
{
data: [182, 193, 190, 193, 229, 233, 232],
type: 'bar',//折线图改为line
smooth: true,
yAxisIndex:1,
}]
};
值顶部有数值显示
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: [{
type: 'value'
}],
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar',
smooth: true,
label: {//显示顶部样式的字段
normal: {
show: true,
fontSize: 14,
// fontWeight: 'bold',
color: '#909399',
position: 'top',
formatter: function(params) {
return params.value + ' 测试字段'
},
}
}
}]
};
超过一定阈值颜色变色,渐变色例子, 柱状图带圆角
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: [{
type: 'value'
}],
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar',
smooth: true,
itemStyle: {//修改样式的主要地方
normal: {
barBorderRadius: [6, 6, 0, 0],//设置圆角
color: function(params) {//改变颜色的判断
return params.value > 1000
? new echarts.graphic.LinearGradient(//渐变色
0,
0,
0,
1,
[
{
offset: 0,
color: '#FACC14' // 0% 处的颜色
},
{
offset: 1,
color: '#ffffff' // 100% 处的颜色
}
],
false
)
: new echarts.graphic.LinearGradient(//渐变色
0,
0,
0,
1,
[
{
offset: 0,
color: '#1890ff' // 0% 处的颜色
},
{
offset: 1,
color: '#ffffff' // 100% 处的颜色
}
],
false
)
}
}
},
label: {//显示bar顶部样式的字段
normal: {
show: true,
position: 'top'
}
}
}]
};
反向柱状图(makeapie参考By姜***肖)
option = {
backgroundColor: '#fff',
grid: {
top: '15%',
right: '10%',
left: '10%',
bottom: '12%'
},
xAxis: [{
type: 'category',
color: '#59588D',
data: ['2019Q1', '2019Q2', '2019Q3', '2019Q4'],
axisLabel: {
margin: 20,
color: '#999',
textStyle: {
fontSize: 18
},
},
axisLine: {
lineStyle: {
color: 'rgba(107,107,107,0.37)',
}
},
axisTick: {
show: false
},
}],
yAxis: [{
axisLabel: {
formatter: '{value}%',
color: '#999',
textStyle: {
fontSize: 18
},
},
axisLine: {
lineStyle: {
color: 'rgba(107,107,107,0.37)',
}
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: 'rgba(131,101,101,0.2)',
type: 'dashed',
}
}
}],
series: [{
type: 'bar',
data: [40, 80, 20, -16],
barWidth: '50px',
itemStyle: {
normal: {
color: function(params){//展示正值的柱子,负数设为透明
let colorArr = params.value > 0?['#FF9A22', '#FFD56E']:['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorArr[0] // 0% 处的颜色
}, {
offset: 1,
color: colorArr[1]// 100% 处的颜色
}], false)
},
barBorderRadius: [30,30,0,0]
},
},
label: {
normal: {
show: true,
fontSize: 18,
fontWeight: 'bold',
color: '#333',
position: 'top',
}
}
},{
type: 'bar',
data: [40, 80, 20, -16],
barWidth: '50px',
barGap: '-100%',
itemStyle: {
normal: {
color: function(params){//展示负值的柱子,正数设为透明
let colorArr = params.value > 0?['rgba(0,0,0,0)', 'rgba(0,0,0,0)']:['#FFD56E', '#FF9A22']
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorArr[1] // 0% 处的颜色
}, {
offset: 1,
color: colorArr[0]// 100% 处的颜色
}], false)
},
barBorderRadius: [0,0,30,30]
},
}
}
]
};
随鼠标移动标示线(渐变色)
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
show: true,
shadowOffsetY: 0
},
lineStyle: {
width: 1.8,
type: 'solid',
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'red' // 0% 处的颜色
},
{
offset: 0.5,
color: 'blue' // 100% 处的颜色
},
{
offset: 1,
color: '#ffffff' // 100% 处的颜色
}
],
false
)
}
},
backgroundColor: '#fff',
textStyle: {
color: '#5c6c7c'
},
padding: [10, 10],
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: [{
type: 'value'
}],
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,
yAxisIndex:0,
label: {//显示顶部样式的字段
normal: {
show: true,
}
}
}]
};