" + "

" + param[0].name + '

' + "

" + "" + " " + param[0].seriesName + ': ' + "" + param[0].value + '%' + '

' + "

" + "" + " " + param[1].seriesName + ': ' + "" + param[1].value + '%' + '

' + "

" + "" + " " + '已开工未完成' + ': ' + "" + (100 - param[0].value) + '%' + '

' + "

" + "" + " " + '已完成未合格' + ': ' + "" + (100 - param[1].value) + '%' + '

' + '

'; return resultTooltip; }, }, title: [ { text: 100 - newchartValue1[0] + '%', textAlign: 'center', textStyle: { color: 'rgba(61,187,255,.3)', fontSize: 12, }, top: '20%', left: '19%', }, { text: 100 - newchartValue2[0] + '%', textAlign: 'center', textStyle: { color: 'rgba(255,146,41,.3)', fontSize: 12, }, top: '20%', left: '24%', }, { text: 100 - newchartValue1[1] + '%', textAlign: 'center', textStyle: { color: 'rgba(61,187,255,.3)', fontSize: 12, }, top: '20%', left: '48%', }, { text: 100 - newchartValue2[1] + '%', textAlign: 'center', textStyle: { color: 'rgba(255,146,41,.3)', fontSize: 12, }, top: '20%', left: '53%', }, { text: 100 - newchartValue1[2] + '%', textAlign: 'center', textStyle: { color: 'rgba(61,187,255,.3)', fontSize: 12, }, top: '20%', left: '77%', }, { text: 100 - newchartValue2[2] + '%', textAlign: 'center', textStyle: { color: 'rgba(255,146,41,.3)', fontSize: 12, }, top: '20%', left: '82.5%', }, ], grid: { top: '25%', left: '5%', bottom: '10%', right: '5%', containLabel: true, }, animation: false, xAxis: [ { type: 'category', axisTick: { show: false, }, axisLine: { show: false, lineStyle: { color: 'rgba(0,228,255,1)', }, }, axisLabel: { inside: false, textStyle: { color: '#fff', fontWeight: 'normal', fontSize: 12, }, margin: 20, //刻度标签与轴线之间的距离。 }, data: newchartName, }, { type: 'category', axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { show: false, }, splitArea: { show: false, }, splitLine: { show: false, }, data: newchartName, }, ], yAxis: [ { show: false, type: 'value', axisLabel: { textStyle: { color: '#fff', }, }, splitLine: { lineStyle: { color: 'rgba(0,228,255,1)', }, }, axisLine: { show: false, }, }, ], series: [ { name: '已开工已完成', type: 'pictorialBar', symbolSize: [barWidth, 10], symbolOffset: ['-81%', -5], symbolPosition: 'end', z: 15, color: '#3eb6f5', zlevel: 2, data: newchartValue1, }, { name: '已完成已合格', type: 'pictorialBar', symbolSize: [barWidth, 10], symbolOffset: ['81%', -5], symbolPosition: 'end', z: 15, color: '#ffc241', zlevel: 2, data: newchartValue2, }, { name: '已开工已完成', type: 'bar', barGap: '60%', barWidth: barWidth, itemStyle: { // // color: '', color: color1, borderColor: color1, borderWidth: 1, borderType: 'solid', }, label: { show: true, formatter: '{c}' + '%', position: 'left', color: 'rgba(119,167,255,1)', fontSize: 12, textAlign: 'center', }, zlevel: 2, data: newchartValue1, }, { name: '已完成已合格', type: 'bar', barGap: '60%', barWidth: barWidth, itemStyle: { // color: 'rgba(255,164,41,.16)', color: color2, borderColor: color2, borderWidth: 1, borderType: 'solid', }, label: { show: true, formatter: '{c}' + '%', position: 'right', color: 'rgba(255,228,59,1)', fontSize: 12, textAlign: 'center', }, zlevel: 2, data: newchartValue2, }, { name: '工程量', type: 'bar', xAxisIndex: 1, barGap: '60%', data: [100, 100, 100], zlevel: 1, barWidth: barWidth, itemStyle: { normal: { color: 'rgba(61,187,255,.16)', }, }, }, { name: '合格量', type: 'bar', xAxisIndex: 1, barGap: '60%', data: [100, 100, 100], zlevel: 1, barWidth: barWidth, itemStyle: { normal: { color: 'rgba(255,164,41,.16)', }, }, }, { name: '已开工已完成', type: 'pictorialBar', symbolSize: [barWidth, 10], symbolOffset: ['-81%', 5], z: 12, color: '#3eb6f5', data: [ { name: '', value: '100', }, { name: '', value: '100', }, { name: '', value: '100', }, ], }, { name: '已完成已合格', type: 'pictorialBar', symbolSize: [barWidth, 10], symbolOffset: ['81%', 5], z: 12, color: '#ffc241', data: [ { name: '', value: '100', }, { name: '', value: '100', }, { name: '', value: '100', }, ], }, // 头 { name: '已开工未完成', type: 'effectScatter', rippleEffect: { period: 1, scale: 5, brushType: 'fill', }, z: 20, zlevel: 3, symbolPosition: 'end', // symbol: path, symbolSize: [10, 4], symbolOffset: [-32, 0], itemStyle: { normal: { shadowColor: 'rgba(0, 0, 0, .3)', shadowBlur: 5, shadowOffsetY: 3, shadowOffsetX: 0, color: 'rgba(119,167,255,1)', }, }, data: [ { name: '', value: 100, symbolPosition: 'end', }, { name: '', value: 100, symbolPosition: 'end', }, { name: '', value: 100, symbolPosition: 'end', }, ], }, // { // name: '已完成未合格', // type: 'pictorialBar', // symbolSize: [barWidth, 10], // symbolOffset: ['81%', -5], // z: 20, // itemStyle: { // normal: { // color: 'rgba(255,164,41,0.5)', // }, // }, // data: [ // { // name: '', // value: 100, // symbolPosition: 'end', // }, // { // name: '', // value: 100, // symbolPosition: 'end', // }, // { // name: '', // value: 100, // symbolPosition: 'end', // }, // ], // }, { name: '已开工未完成', type: 'effectScatter', rippleEffect: { period: 1, scale: 5, brushType: 'fill', }, z: 20, zlevel: 2, symbolPosition: 'end', // symbol: path, symbolSize: [10, 4], symbolOffset: ['310%', 0], itemStyle: { normal: { shadowColor: 'rgba(0, 0, 0, .3)', shadowBlur: 5, shadowOffsetY: 3, shadowOffsetX: 0, color: 'rgba(255,164,41,0.5)', }, }, data: [ { name: '', value: 100, symbolPosition: 'end', }, { name: '', value: 100, symbolPosition: 'end', }, { name: '', value: 100, symbolPosition: 'end', }, ], }, ], };

Echarts在线免费图表