本文主要是介绍echarts柱状图顶端用折线图连接起来,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
效果:
代码:
option: {color: ["#29676a", "#4CCEFE"],tooltip: {},grid:{top:20,height:120},xAxis: {data: ['2021-8-1', '2021-8-2', '2021-8-3', '2021-8-4', '2021-8-5', '2021-8-6'],axisLine: { //这是x轴文字颜色lineStyle: {color: "#fff",}}},yAxis: {splitArea: {show: false},splitLine: {show: true,lineStyle: {color: ['#85a6a9'],width: 1,type: 'dashed',},},axisLine: { //这是x轴文字颜色lineStyle: {color: "#fff",}}},series: [{barWidth: 20,data: ["327", "259", "95", "374","150","399"],name: "总量",type: "bar",},{barGap: "-100%", /*这里设置包含关系,只需要这一句话*/barWidth: 20,data: ["217", "124", "43", "210","50","310"],name: "分量",type: "bar"},{data: ["327", "259", "95", "374","150","399"],/* 这里要和第一组数据一样、才能保持在最高处*/type: 'line',symbol: 'circle',//拐点样式symbolSize: 18,//拐点大小itemStyle: {normal: {lineStyle: {width: 3,//折线宽度color: "#27dba0"//折线颜色},color: '#27dba0',//拐点颜色borderColor: '#fff',//拐点边框颜色borderWidth: 3//拐点边框大小},emphasis: {color: '#4CCEFE'//hover拐点颜色定义}},}]}
这篇关于echarts柱状图顶端用折线图连接起来的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!