vue used echart histogram

One:

 

<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 =Draw a bar graph//))

                { 
                    Title: { 
                        text: 'point area, checking the progress of the device' , 
                        Top: . 5 , 
                        left: 'Center' 
                    }, 
                    Legend: { 
                        Data: [ 'clothes', 'caps' ], 
                        Top: 30 
                    }, 
                    // X- axis 
                    XAXIS: { 
                        Data: [
                             'month', 'February', 'March "," April ",' May ' 
                        ] 
                    }, 
                    // the Y axis
                    YAXIS: {},
                     // Data 
                    Series: [ 
                        { 
                            name: 'clothes' , 
                            type: ' bar ' , 
                            Data: [ 120, 100, 440., 320., 150 ] 
                        }, 
                        { 
                            name: ' hat ' , 
                            type: ' bar ' , 
                            Data: [ 200 is, 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%;
        me-height: 300px;
        clear: both;
        box-sizing: border-box;
        margin: 30px auto;
    }
</style>

Here,

this. $ echarts is because I have been introduced globally in other places. Here replaced by your own way can be introduced.

Guess you like

Origin www.cnblogs.com/chenmz1995/p/11113427.html