echart设置双Y轴折线图（以及折线图格式设置）
百度的ECharts图标大大方便了我们的开发，但是各个区域默认属性的设置往往不切人意。这里我写了一些我用ECharts图标识折线图属性的设置方式。
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
,
formatter: function (params) {
let html=params[0].name+"
";
for(let i=0;i'
if(params[i].seriesName=="扬尘平均离线率"){
html+=params[i].seriesName+":"+params[i].value+"%
";
}
if(params[i].seriesName=="扬尘超标项目数"){
html+=params[i].seriesName+":"+params[i].value+"次
";
}
}
return html;
}
},
legend: {
textStyle: {color: '#4CA6A3'},
x: 'right',
// data: ['扬尘超标项目数', '扬尘平均离线率']
data : [ {name : '扬尘超标项目数',icon:'rect'}, {name : '扬尘平均离线率',icon:'rect'} ]
},
grid: {
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
//设置x轴线的属性
axisLine:{
lineStyle:{
color:'#4CA6A3', // 设置x轴字体颜色
width:2, // 设置x轴字体宽度
}
},
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis : [
{
type: 'value',
name:"扬\n尘\n超\n标\n项\n目\n数\n︵\n次\n︶",
nameLocation:"center",
nameGap:35,
nameRotate:0,
nameTextStyle:{
fontSize: 16,
color: '#293C55'
},
splitLine:{show: false},//去除y轴的网格线
//设置轴线的属性
axisLine:{
lineStyle:{
color:'#293C55',
width:2, //这里是为了突出显示加上的
}
}
},
{
type: 'value',
name:"扬\n尘\n平\n均\n离\n线\n率\n︵\n%\n︶",
nameLocation:"center",
nameGap:35,
nameRotate:0,
nameTextStyle:{
fontSize: 16,
color: '#293C55'
},
splitLine:{show: false},//去除网格线
min: 0,
max: 100,
interval: 10,
// 设置轴线的属性
axisLine:{
lineStyle:{
color:'#293C55',
width:2,//这里是为了突出显示加上的
}
}
}
],
series: [
{
name: '扬尘超标项目数',
type: 'line',
stack: '总量',
areaStyle: {},
itemStyle: {
normal: {
color: "#25DEDB",//折线点的颜色
lineStyle: {
color: "#25DEDB"//折线的颜色
}
}
},
areaStyle: { // 该属性设置可以使这下图区域颜色达到渐变的效果
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#25DEDB'
}, {
offset: 1,
color: '#ffe'
}])
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '扬尘平均离线率',
type: 'line',
stack: '总量',
areaStyle: {},
itemStyle: {
normal: {
color: "#E96C44",//折线点的颜色
lineStyle: {
color: "#E96C44"//折线的颜色
}
}
},
areaStyle: { // 该属性设置可以使这下图区域颜色达到渐变的效果
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#E96C44'
}, {
offset: 1,
color: '#ffe'
}])
},
data: [220, 182, 191, 234, 290, 330, 310]
}
]
}; 设置完成后的样式：
百度的ECharts非常好用，没事的话多研究研究还是挺舒服的。欢迎大家一起交流学习。
附上ECharts官方API：https://www.echartsjs.com/zh/api.html#echarts，遇到没提起的设置信息可以自己查阅API来进行设置。