颜色渐变
color:new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: '#4E6783',
},
{
offset: 1,
color: '#A7D6EC',
},
],
false
),
轴设置
xAxis: [{
type: 'category',
data: ['第一阶段', '第二阶段', '第三阶段', '第四阶段'],
axisTick: {
show: false,//轴刻度
},
splitLine: {
show: true,//内容部分刻度显示
lineStyle:{
type:'dashed', //设置网格线类型 dotted:虚线 solid:实线
color: "#192935"
},
},
axisLine: {
show: true,//x轴线
lineStyle:{
color: "#192935"
},
},
axisLabel: {//显示文字设置
show: true,
rotate : 30,//x轴文字显示倾斜
textStyle: {
color: '#83C3DB',
},
padding: 10
},
}],
边距设置
grid: {
top: '10%',
left: '5%',
right: '5%',
bottom: '15%',
containLabel: true
},
柱子宽度和圆角设置
series: [
{
name: "执行中",
type: "bar",
stack: "total",
data: [12, 65, 85, 61, 86],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#A7D6EC" },
{ offset: 1, color: "#4E6783" },
]),
barWidth: 4,
itemStyle: {
borderRadius: 2,
},
label: {
show: true,
color: "#A7D6EC",
offset: [0, -15],
fontFamily:'DIN Next LT Pro',
fontWeight: 0,
},
},]
横向柱状图
yAxis: {
show:false,
type: 'category',//坐标轴类型:类目轴
},
图显设置
legend: {
top: "0%",
right: '10%',
itemHeight: 9, //高度
itemWidth: 50, //宽度
itemGap: 20,
icon: 'roundRect',
textStyle: {
color: "#90979c",
},
data: ["燃气泄漏历史曲线", "震动报警历史曲线"],
},
图例文字换行
‘
formatter: function (name) {
for (let i = 0; i < curArr.length; i++) {
if(curArr[i].name==name){
return name + ' \n' + curArr[i].value;
}
}
},
主要是"/n"
轴文字转换添加百分比
axisLabel: {
color: "#83C3DB",
fontSize: 12,
fontFamily: "Source Han Sans SC",
formatter: function (e) {
return e + "%";
},
},