echarts双y轴折线图 图例样式设置
2023-12-28 15:38:16
drawenergyline(){
this.energyline = echarts.init(document.getElementById('energyline'));
this.energyline.setOption({
color:['#22D5FF','#FFD836'],
tooltip: {
trigger: "axis",
axisPointer: {
type: 'shadow'
},
// formatter: '{a0}: {c0}%<br />{a1}: {c1}%',
backgroundColor:'#2A3036',
borderColor:'#2A3036',
textStyle:{
color:'#fff',
}
},
legend: {
data: ['用电量', '用气量'],
// 图例样式
icon: 'rect',
itemWidth: 14,
itemHeight: 3,
textStyle:{
fontSize: 14,//字体大小
color: '#ffffff'//字体颜色
},
},
grid: {
top:30,
right:'10%',
bottom:'10%',
left:'10%'
// containLabel: true
},
xAxis: {
data: ['11-24', '11-25', '11-26', '11-27', '11-28'],
axisLine: {
show: false, //隐藏X轴轴线
},
axisTick: {
show: false //隐藏X轴刻度
},
axisLabel: {
show: true,
margin: 14,
fontSize: 14,
textStyle: {
color: "#fff" //X轴文字颜色
}
},
},
yAxis : [
{
type : 'value',
name : '用电量(kw.h)',
nameTextStyle: {
color: "#fff",
nameLocation: "start",
},
axisLabel : {
// formatter: '{value}',
textStyle:{
color:'#fff',
fontSize: 12,
}
},
axisLine:{
show:false,
},
axisTick:{
show:false,
},
splitLine:{
show:false,
lineStyle:{
color:'#D4D4D8'
}
}
},
{
type : 'value',
name : '用气量(m3)',
nameTextStyle: {
color: "#fff",
nameLocation: "start",
},
axisLabel : {
formatter: '{value} ',
textStyle:{
color:'#fff',
fontSize: 12,
}
},
axisLine:{
show:false
},
axisTick:{
show:false,
},
splitLine:{
show:true,
lineStyle:{
color:'#11366e'
}
}
}
],
series: [
{
name:'用电量',
type:'line',
// symbol:'circle',
// symbolSize: 5,
yAxisIndex: 0,
smooth: true, //是否平滑
itemStyle: {
normal: {
color:'#22D5FF',
lineStyle: {
color: "#22D5FF",
width:1
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#22D5FF" },
{ offset: 1, color: "#151855" }
])
},
}
},
data:[15, 23, 65, 6, 45, 23, 56]
},
{
name:'用气量',
type:'line',
// symbol:'circle',
// symbolSize: 5,
yAxisIndex: 1,
smooth: true, //是否平滑
itemStyle: {
normal: {
color:'#FFD836',
lineStyle: {
color: "#FFD836",
width:1
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFD836" },
{ offset: 1, color: "#151855" }
])
},
}
},
data:[50, 65, 40, 50, 60, 70, 80]
},
]
},true)
},
文章来源:https://blog.csdn.net/weixin_38999134/article/details/135247853
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!