Can echarts be configured as the following bar chart?

4legend

the data format is as follows

NSC: {
    plan: 10, // 
    construction: 25, // 
    siteSelection: 20, // 
    opening: 18 // 
 }

the series configuration is supposed to look like this, but the color of this bar chart is all the same. And it can"t be made into four legend

series: [
    {
        type:"bar",
        barWidth: "60%",
        data:[10, 25, 20, 18]
    }
]

I forcibly changed it to the following, which is exactly the same. the problem is that the following X-axis text is crooked because there are four in each place. Ask if there is any other way to achieve it.

series: [
    {
        name: ""
        type: "bar",
        barWidth: "60%"
        data: [10, 0, 0, 0]
    },
    {
        name: ""
        type: "bar",
        barWidth: "60%"
        data: [0, 25, 0, 0]
    },
    ...
]

Echarts4 javascript

Mar.04,2022

this?
http://www.cnblogs.com/kang54.

single bar No legend , multiple bar also take up space
is much simpler than solving legend problems
emphasis is on barGap attribute
http://www.echartsjs.com/opti.

 series : [
        {
            name:'',
            type:'bar',
            barGap:'-100%',
            data:[10, 0, 0, 0],
            itemStyle: {
                normal: {
                    color:'red'
                }
            },
        },
         {
            name:'',
            type:'bar',
            data:[0, 20, 0, 0],
            itemStyle: {
                normal: {
                    color:'blue'
                }
            },
        },
         {
            name:'',
            type:'bar',
            data:[0, 0, 30, 0],
            itemStyle: {
                normal: {
                    color:'yellow'
                }
            },
        },
        {
            name:'',
            type:'bar',
            data:[0, 0, 0, 40],
            itemStyle: {
                normal: {
                    color:'green'
                }
            },
        }
    ]

this type is really suitable for pie chart
, but if you insist on using a bar chart, you can change it to a stacked bar chart and add a stack: 'xxx'
https://codepen.io/caocong/pe.

in order not to be crooked.

Previous: Problems with localStorage data caching.

Next: How to make the Vue single page project package a corresponding .html file for each route?

How echart modifies the color of the origin of a line chart adds prompts and modifies the text style of the y-axis.
is where my picture is circled this is my code novice asking the great god for advice option = { tooltip : { trigger: axis , }, toolbox: { show : true, feature : { mark : {show: true}, ...

Echarts4 javascript

Feb.27,2021
How echarts 3Dbar sets the name of the x-axis is not the name displayed on the axis, but the x-name in the brand displayed by the mouse over the column, as shown in the figure
how to change the name of x marked in a white box? I ve configured the name on the X axis to "xxxx ", but it s still-x on this card. ...

Echarts4 javascript

Mar.17,2021
The main title of multiple bar charts under one div of echarts4.0 is centered, and the subtitle is invalid on the left. Find the solution.
` < html lang= "en " style= width:100%;height:100% > < head > <meta charset="UTF-8"> <title>grid< title> <script type="text javascript" src="http: echarts.baidu.com gallery vendors echarts echarts.mi...

Echarts4 javascript

Mar.19,2021
How does echarts display the comments of the current image by default under a canvas (display when the page is loaded, not hover click, etc.)
-sharp-sharp-sharp series setTimeout(() => { <script> < script> 1 2 ...

Echarts4 javascript

Apr.10,2021
How to automatically display tooltip? after using scatter3D in globe in echarts
using echarts-4.1.0,echarts-gl-1.1.1, in globe I used scatter3D to draw a scatter chart. The tooltip configured in option can be displayed normally, but it is normal to use dispatchAction to exhale tooltip, in the same way that I put it in the 2D diagra...

Echarts3 echarts4 javascript

Feb.09,2022
Map did not render problem when configuring map chart using echarts-for-react and echart.js
The map chart mentioned in the question is the example of the official website . The console does not report any errors, and the local rendering is complete, only the map is not rendered, something like this The code has been uploaded to github...

React.js echarts echarts4 javascript

Apr.15,2022