vue使用echarts

在vue中使用echarts有好几种方法，在这里使用的是直接npm引入。

 

1.先创建一个vue项目

2.在项目路径下执行以下命令

npm install echarts --save 或 npm install echarts -S

3.在main.js文件中引入echarts

import * as echarts from "echarts";

Vue.prototype.$echarts = echarts;

4.在页面中使用

<template>
    <div class="home">
        <div id="container"></div>
    </div>
</template>

<script>
    export default{
        name:"home",
        methods:{
            drawChart(){
                var echart = this.$echarts.init(document.getElementById("container"));
                var option = {
                    title:{text:"前端实时数据"},
                    tooltip:{},
                    legend:{data:["人数","人气"]},
                    xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
                    yAxis:{},
                    series:[
                        {name:"人数",type:"bar",data:[1000,800,600,300,200]},
                        {name:"人气",type:"line",smooth:true,data:[800,1100,700,900,1000]},
                        {name:"年龄分布",type:"pie",radius:["20%","10%"],right:"-50%",top:"-50%",
                        data:[
                            {name:"儿童",value:10},
                            {name:"少年",value:30},
                            {name:"青年",value:50},
                            {name:"中年",value:20},
                            {name:"老年",value:10},
                            ]},
                    ]
                };
                echart.setOption(option);
            }
        },
        mounted() {
            this.drawChart()
        }
    }
</script>
<style scoped="scoped">
    *{
        margin: 0;
        padding: 0;
    }
    #container{
        width: 600px;
        height: 800px;
    }
</style>

注意：