The final results are as follows
. 1 Option = { 2 title: { . 3 text: 'contribution ranking' , . 4 left: 'Center' , // center the title . 5 }, . 6 DataSet: { . 7 Source: [ . 8 [ 'AMOUNT', 'Product' ], . 9 [58212, 'a squadron' ], 10 [78254, "the second squadron ' ], 11 [41032,' three squadron ' ], 12 [12755," four squadron' ], 13 [20145, "five squadron ' ], 14 [79146 'Six squadron ' ], 15 [91852, "seven squadron ' ], 16 [101,852,' eight squadron ' ], 17 [20112," nine squadron' ] 18 is ] . 19 }, 20 is ToolTip: { 21 is 22 is Formatter: function (the params) { 23 is return the params .value [1] + ':' + params.value [0] + ' article' ; // array of value pairs taken display 24 }, 25 }, 26 is Grid: {containLabel: to true }, 27 XAXIS: {name: 'number' }, 28 YAXIS: { 29 name: 'squadron name' , 30 type: 'category' , 31 is AxisLabel: { 32 interval The: 0 , 33 is Rotate: 30 // Name Y-axis rotated 30 degrees 34 is }, 35 36 }, 37 [ 38 is Series: [ 39 { 40 type: 'bar' , 41 is encode: { 42 is X: 'AMOUNT' , 43 is Y: 'Product' 44 is }, 45 ItemStyle: {// color gradient 46 color: new echarts.graphic.LinearGradient( 47 0, 0, 1, 0, 48 [ 49 {offset: 0, color: '#83bff6'}, 50 {offset: 0.5, color: '#188df0'}, 51 {offset: 1, color: '#188df0'} 52 ] 53 ) 54 }, 55 label: { 56 normal: { 57 position: 'right', 58 show: true 59 } 60 }, 61 } 62 ] 63 };
Please copy the code above to see the effects https://www.echartsjs.com/examples/zh/editor.html?c=dataset-encode0&theme=light run