vue中echarts之橫向柱狀統計圖

常規豎向柱狀圖

餅圖

這裏設置圖表的寬高：

<div id="main" style="width: 100%;height: 300px;margin-left: 5%"></div>

添加圖表的屬性：

showchart() {
    var myChart = echarts.init(document.getElementById('main'));
    this.option = {
        stillShowZeroSum: true,
        // grid: {   //繪圖區調整
        //     x: 100,  //左留白
        //     y: 10,   //上留白
        //     x2: 100,  //右留白
        //     y2: 10   //下留白
        // },
        tooltip: {
            trigger: 'item',
            formatter: '{b}:{c}'
        },
        xAxis: [
            {
                show: false,
                type: 'value',
                boundaryGap: [0, 0],
                position: 'top',
            }
        ],
        yAxis: [
            {
                type: 'category',
                data: ['提交審覈\n\n\n\n\n審覈通過'],
                axisLine: {show: false},     //座標軸
                axisTick: [{    //座標軸小標記
                    show: false
                }],
                axisLabel: {
                    textStyle: {
                        fontSize: '14'
                    }
                }
            }
        ],
        // color: ['#1685ff', '#7eef7d'],
        series: [
            {
                name: '1',
                type: 'bar',
                barMinHeight: 40,  //最小柱高
                barWidth: 50,
                barMaxWidth: 100,   //最大柱寬度
                data: [                  //每個模塊的名字和值
                    {name: '提交審覈', value: this.apply}
                ],
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#4167FF'
                        }, {
                            offset: 1,
                            color: '#14D0FF'
                        }]),
                        // barBorderRadius: 12,
                        label: {
                            show: true,//餅圖上是否出現標註文字 標註各模塊代表什麼  默認是true
                            fontSize: '14',
                            position: 'right'
                        }
                    },

                },
            },
            {
                name: '2',
                type: 'bar',
                barMinHeight: 40,  //最小柱高
                barWidth: 50,
                barMaxWidth: 100,   //最大柱寬度
                data: [                  //每個模塊的名字和值
                    {name: '審覈通過', value: this.adopt}
                ],

                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#89E821'
                        }, {
                            offset: 1,
                            color: '#BEF545'
                        }]),
                        // barBorderRadius: 12,
                        label: {
                            show: true,//圖上是否出現標註文字 標註各模塊代表什麼  默認是true
                            fontSize: '14',
                            position: 'right'
                        }
                    },
                },
            }
        ]
    };
    myChart.setOption(this.option);
},

在鉤子函數中調用：

this.showchart();

拿到數據後賦值：

this.option.series[0].data[0].value = respond.data.data.apply
this.option.series[1].data[0].value = respond.data.data.adopt
var myChart = echarts.init(document.getElementById('main'))
myChart.setOption(this.option);

效果如下：