vue中使用echart柱狀圖

一：

 

<template>
    <Layout>
        <Content>
            <Card :style="{minHeight:'300px'}">
                <div id="myChart"></div>
            </Card>
        </Content>
    </Layout>
</template>

<script>
    export default {
        mounted () {
            // 調用繪制圖表的方法
            this.draw();
        },
        methods: {
            draw () {
                // 實例化echarts對象
                let myChartDrawer = this.$echarts.init(document.getElementById('myChart'))

                // 繪制條形圖
                var option = {
                    title: {
                        text: '地區點位、設備核對進度',
                        top: 5,
                        left: 'center'
                    },
                    legend: {
                        data: ['衣服', '帽子'],
                        top: 30
                    },
                    // X軸
                    xAxis: {
                        data: [
                            '一月', '二月', '三月', '四月', '五月'
                        ]
                    },
                    // Y軸
                    yAxis: {},
                    // 數據
                    series: [
                        {
                            name: '衣服',
                            type: 'bar',
                            data: [120, 100, 440, 320, 150]
                        },
                        {
                            name: '帽子',
                            type: 'bar',
                            data: [200, 120, 240, 330, 170]
                        }
                        /*{
                            name: 'bar',
                            type: 'line',
                            data: [120, 200, 240, 260, 300]
                        },
                        {
                            name: 'bar',
                            type: 'line',
                            data: [120, 200, 300, 140, 260]
                        }*/
                    ]
                };

                myChartDrawer.setOption(option);
            }
        }
    }
</script>

<style scoped>
    #myChart {
        width: 70%;
        min-height: 300px;
        clear: both;
        box-sizing: border-box;
        margin: 30px auto;
    }
</style>

這邊，

this.$echarts是因為我在其他地方已經全局引入過了。這邊替換成你們自己的引入方式即可。