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

This article mainly introduces "how to use Echarts to achieve multi-segment circle map". In daily operation, I believe many people have doubts about how to use Echarts to achieve multi-segment circle chart. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt of "how to use Echarts to achieve multi-segment circle chart". Next, please follow the editor to study!

Perfect realization

Finally, a more complex implementation is found on the Rose Chart website, which is realized by modifying the configuration and using ehcarts perfectly. First of all, there is an option configuration code for echarts, which separates series from option in order to facilitate the separation.

Const colorDataHandle = (data, total, width = 375) = > {let num = 0 let option = {angleAxis: {axisLine: {show: false,}, axisLabel: {show: false,}, splitLine: {show: false,} AxisTick: {show: false,}, min: 'dataMin', max:' dataMax', startAngle: 135,}, radiusAxis: {type: 'category', axisLine: {show: false }, axisTick: {show: false,}, axisLabel: {show: false,},}, polar: {radius:'95%'} Series: []} / / option is a processing of incoming data const options = data.map ((item, index) = > {num + = item const a = {type: 'bar', data: [0,0,0, num], coordinateSystem:' polar', z: 9999-index, roundCap: true Color: colors [index], barGap:'- 100% arc, / / barWidth:'30% arc, itemStyle: {/ / control arc width, arc width control does not make much judgment, simply distinguish borderWidth: index = = 0? 4: index = 1? 2: 0, / / shadowBlur: 5 / / color: 'transparent', borderColor: colors [index], shadowColor: colors [index],},} return a}) option.series = options return option}

Then there is a treatment of the three color areas.

Const colors = [{type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{offset: 0, color:' # 1DBC3F, / / 0% color}, {offset: 1, color:'# 1DBC3F, / / 100% color},],} {type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{offset: 0, color:' # CB3939', / / 0% color}, {offset: 1, color:'# CB3939', / / 100% color},],} {type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{offset: 0, color:' # C0C0C0C0, / 0% color}, {offset: 1, color:'# C0C0C0C0, / / 100% color},],},]

Here is the flexible use of echarts type for linear components, a specific configuration item is how to implement I did not delve into.

Effect picture

The display of a final effect picture on the real machine.

It not only ensures the fillet of the beginning and end of each arc, but also increases the width of each arc.

At this point, the study on "how to use Echarts to achieve multi-segment circle map" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.