1. Echarts double layer horizontal column, rounded corner, gradient.

option = { grid: { left: '5%', right: '5%', bottom: '5%', top: '10%', containLabel: true }, xAxis: { show: false, type: 'value' }, yAxis: [{ type: 'category', inverse: true, axisLabel: { show: true, textStyle: { color: 'black' }, }, splitLine: { show: false }, axisTick: { show: false }, axisLine: { show: false }, data: [' barBorderRadius ', 'barBorderRadius '], series: [{name:' amount ', type: 'bar', zLevel: 1, itemStyle: {normal: {barBorderRadius: 30, color: New echarts. Graphic. That LinearGradient (0, 0, 1, 0, [{offset: 0, color: 'RGB (57,89,255,1)}, {offset: 1, the color: 'RGB (46,200,207,1)'}]),},}, barWidth: 20, data: [50000000, 22000000]}, {name:' background ', type: 'bar', barWidth: 20, barGap: '-100%', data: [50000000, 50000000], itemStyle: { normal: { color: 'gray', barBorderRadius: 30, } }, }, ] };Copy the code

2. Add values to the right or upper side of the bar chart

option = { grid: { left: '5%', right: '5%', bottom: '5%', top: '10%', containLabel: true }, xAxis: { show: false, type: 'value' }, yAxis: [{ type: 'category', inverse: true, axisLabel: { show: true, textStyle: { color: 'black' }, }, splitLine: { show: false }, axisTick: { show: false }, axisLine: { show: false }, data: [' rice ', 'corn ']},{type: 'category', inverse: true, axisTick:' None ', axisLine: 'None ', show: true, axisLabel: {textStyle: {color: 'gray', fontSize: '12'},}, data: [50000000, 22000000]}], series: [{name: 'amount ', type: 'bar', zlevel: 1, itemStyle: { normal: { barBorderRadius: 30, color: New echarts. Graphic. That LinearGradient (0, 0, 1, 0, [{offset: 0, color: 'RGB (57,89,255,1)}, {offset: 1, the color: 'RGB (46,200,207,1)'}]),},}, barWidth: 20, data: [50000000, 22000000]}, {name:' background ', type: 'bar', barWidth: 20, barGap: '-100%', data: [50000000, 50000000], itemStyle: { normal: { color: 'gray', barBorderRadius: 30, } }, }, ] };Copy the code

3. The ring

Option = {title: [{text: 'done ', x: 'center', top: '55%', textStyle: {color: 'gray', fontSize: 16, fontWeight: '100', }, }, { text: '75%', x: 'center', top: '38%', textStyle: { fontSize: '60', color: 'gray', fontFamily: 'DINAlternate-Bold, DINAlternate', foontWeight: '600', }, }, ], polar: { radius: ['42%', '52%'], center: ['50%', '50%'], }, angleAxis: { max: 100, show: false, }, radiusAxis: { type: 'category', show: true, axisLabel: { show: false, }, axisLine: { show: false, }, axisTick: { show: false, }, }, series: [ { name: '', type: 'bar', roundCap: true, barWidth: 50, showBackground: true, // [80], coordinateSystem: 'polar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: '#16CEB9', }, { offset: 1, color: '#6648FF', }, ]), }, }, }, ], };Copy the code

4. Tooltip still has problems after Echarts removes the page

// Hide tooltip mychart.dispatchAction ({type: 'hideTip'}) with hideTip; // Hide vertical line mychart.dispatchAction ({type: 'updateAxisPointer', currTrigger: 'leave'})Copy the code

Github.com/apache/echa…