option = { backgroundColor: '#000', 数据节点1:80, 数据节点2:90, dataset: { source: [ ["product","DATA1","DATA2","DATA3"], ["华中\n(武汉)","85","94", "10"], ["华北","94","82", "-16"], ["西南","82","96", "8"], ["华东","96","75", "12"], ["西北","75","86", "-5"], ["东北","86","90", "6"], ["山东","90","78", "11"], ["新疆","78","86", "9"], ["北方","86","85", "12"] ] }, "grid":{ "top":"5%", "bottom":"15%", "left":"8%", "right":"8%" }, legend:{ show:true, right:20, itemWidth:4, itemHeight:12, textStyle:{ color:"#0ae9ff" } }, "tooltip": { "trigger": "axis", "axisPointer": { "type": "line" }, "backgroundColor": "#0F1225", "borderWidth": 1, "borderColor": "rgba(69, 159, 216, 1)", fontFamily:"DIN", formatter:function(datas){ let html =""+datas[0].name+"大区
"+datas[0].seriesName+"："+datas[2].value[1]+"%
"+datas[1].seriesName+"："+datas[2].value[2]+"%
"+datas[2].seriesName+"："+datas[2].value[3]+"%
" return html } }, xAxis: [{ type: "category", boundaryGap: false, axisLine: { show: false }, axisLabel: { show: true, interval:0, margin:40, padding:[0,-40], color: '#fff' }, axisTick: { show: false }, splitLine:{ show:true, lineStyle:{ width:45, color:"rgba(10,233,255, 0.1)" } } },{ type: "category", boundaryGap: false, position:"bottom", axisLine: { show: false }, axisLabel: { show: true, interval:0, padding:[5,10], color: '#0ae9ff', fontFamily:"DIN", backgroundColor:"rgba(10,233,255, 0.1)", formatter:function(value){ for(let i=0;i0)?"c3":"c1" return "{"+style+"|"+str+"%}" } } }, rich:{ c1:{ color:"#d5457f"//红 }, c3:{ color:"#0ae9ff"//蓝 } } }, axisTick: { show: false } }], yAxis: [{ type: 'value', splitNumber: 3, axisLine: { show: false }, axisLabel: { show: false }, axisTick: { show: false }, splitLine: { show: true, lineStyle:{ color:"rgba(10,233,255, 0.1)" } } },{ type: 'value', splitNumber: 3, axisLine: { show: false }, axisLabel: { show: false }, axisTick: { show: false }, splitLine: { show: false } }], series: [{ name:"整体补货可得率", type: 'bar', barWidth:"20%", itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#5ffdff' // 0% 处的颜色 }, { offset: 1, color: 'rgba(216,163,46,0.1)' // 100% 处的颜色 }], global: false // 缺省为 false }, barBorderRadius:[30,30,0,0] }, label:{ show:false }, encode:{ y:"DATA1" } },{ name:"TOP60补货可得率", type: 'bar', barWidth:"20%", itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#0aeaff' // 0% 处的颜色 }, { offset: 1, color: 'rgba(89,207,217,0.1)' // 100% 处的颜色 }], global: false // 缺省为 false }, barBorderRadius:[30,30,0,0] }, label:{ show:false }, encode:{ y:"DATA2" } },{ name:"日环比", type: 'line', xAxisIndex:1, yAxisIndex:1, symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUxRkI2RTEwMTY1MjExRUE4MURDQjkxMkFEMEFFM0E1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUxRkI2RTExMTY1MjExRUE4MURDQjkxMkFEMEFFM0E1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTFGQjZFMEUxNjUyMTFFQTgxRENCOTEyQUQwQUUzQTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTFGQjZFMEYxNjUyMTFFQTgxRENCOTEyQUQwQUUzQTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5tMXL8AAAByklEQVR42rSWP0hCQRzHz0caQtbToVADXZKKWpSWlsJwzqkl2mp1jJagaIm29rbabLDVIGixpRwiynCJKIIoCw2kIez7g9+Ly/Tukc+DD7x37+77lbvfH12NRkMohh9MgREQBH3gC7yDCiiDC/DaTsDVxoCE58EoKIIb8ACqwA0GwCAYAwn+fgTe7BhMgkVwCk7Ap1CPXpAEM+AQnP/6SgYSs2ADhJvm7RACmyApz8sL4mALmP8QtzBZI95s4AfbINqBuEWUtUhTGHxSdKEFcCc6H6RxBtL0QgYBjoZj4dzIcwQGDA6zK1B30KDO+ZEggxi41GzwgF1OqAo/ezR7KDdiPZyh95rFOyAjvWf4V64p9lBiBg1O/6rGYKnF3IpmD2n6rChyiy4NMvgA/Zp1+y3m9jR7SLNGd/AEQuBZsXiV6pZ0VGS4rjEYJm0qdik8DIEDh09ngaqrweV4AngdFPdyfhUNju1bkHLQgLRKpG1FUQ5Mg4gD4hHWyllRJLgTZcEyMDsQN1kj+9PdutBw5uR5VcsscIWt27jQFB/Ln5apavppLrlUFa/Bo1RSKInCYJyjpcRnbqvpq/62+Hi+xgla5jB/aSfwLcAAR/OKgGLG68wAAAAASUVORK5CYII=', symbolSize: 15, itemStyle: { color: "#0ae9ff" }, lineStyle:{ width:1 }, encode:{ y:"DATA3" } }] };

双柱折线图