Shulou(Shulou.com)06/02 Report--

This article mainly explains "echarts how to achieve horizontal bar chart with percentage", the content of the explanation is simple and clear, easy to learn and understand, now please follow the editor's train of thought slowly in depth, together to study and learn "echarts how to achieve horizontal bar chart with percentage" bar!

Example code var data = [220,182,191,234,290,120,65,444]; var barWidth = 20 politics var maxNum = 0 for (var I = 0; I)

MaxNum) {maxNum = data [I] }} option = {backgroundColor: 'black', grid: {top:' 10% columns, left:'20% columns, right:'10% columns, bottom:'0% columns',}, title: {text: 'percentage columns',}, xAxis: {show: column,} YAxis: {data: data.map ((item, index) = > `data ${index} `), splitLine: {show: false,}, axisLabel: {textStyle: {fontSize:'80% false, color:'# 02afff'},}, axisLine: {show: false,}, axisTick: false,} Series: [{type: 'bar', barWidth: barWidth, zlevel: 2, data: data.map (function (item) {return {value: item, maxNum: maxNum,}) }), label: {show: true, position: 'inside', / / distance: 80, align:' center', formatter: function (params) {/ / return params.data.realValue Var percent = Number ((params.data.value / params.data.maxNum) * 100) .tofixed (2) +'%'; return percent }, color:'# fff', fontSize: 12,}, itemStyle: {borderRadius: 10, color: new echarts.graphic.LinearGradient (0,1,1,1, [{offset: 0, color:'# 395 CFE'} {offset: 1, color:'# 2EC7CF'},]),},}, {type: 'bar', barWidth: barWidth, barGap:'-100%' Data: data.map (function (item) {return {realValue: item, value: maxNum,} }), label: {show: true, position: 'right', distance: 80, align:' right', formatter: function (params) {return params.data.realValue + 'pieces' }, color:'# 02 afffenced, fontSize: 18,}, itemStyle: {borderRadius: 10, color: 'rgba',}; effect drawing

Code parsing

1. Before option, define a data array, then get the maximum value in the array through the for loop and save it as a maxNum variable.

2. Define two bar in series. The data of the first bar sets value to the data in step 1 through map, and returns an object type. The object contains two attributes: value and maxNum (value is a required attribute, maxNum is a custom attribute, and other custom attributes can be added if necessary). The attribute maxNum is added because the formatter of the later label needs to use value/maxNum to calculate the percentage. The first time encountered in series data returned as an object type of writing, rising posture, for the acquisition of data for calculation is really useful.

3. The second bar in series is also assigned to data through map. The difference is that the value of this bar is all set to maxNum, and the second bar is used as the background, which is equivalent to 100% progress. You also need to add a realValue attribute, because you also need to display the values of each item on the right side of the bar (220,182,191,234,290,120,65,444).

4. The first bar is above, and the second bar is below. The key lies in the zlevel:2 of the first bar, and then the barGap of the second bar:'- 100% bar.

Take a more look at the case of the official website of echarts, which really benefits a lot.

Thank you for reading, the above is the content of "how to achieve horizontal bar chart with percentage in echarts". After the study of this article, I believe you have a deeper understanding of how to achieve horizontal bar chart with percentage in echarts, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.