vue 百度圖表插件（echarts ）在vue項目中引入以及使用

1.npm引入

npm install echarts -S

2.在組件中使用

//在組件中先通過import引入插件
import echarts from 'echarts' 

3.完整代碼，直接拷貝在組件中就能直接使用

在這裏我使用了 Easy mock模擬數據，使用方法直接百度，非常簡單 

<template>
    <div>
         <div class="echarts">
            <div id="myChart" :style="{width:'100%',height:'150px'}"></div>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts' 
export default {
    data(){
        return{
            tbabData : {}
        }
    },
    created(){
        this.getData();
    },
    mounted(){
        this.setMychart();
    },
    methods:{
        setMychart(){
            //原生方法獲取寬高
            //這是一個封裝好的方法，兼容IE，第一個參數，element,第二個屬性，css樣式
            function getStyle(obj,attr){ 
                if(obj.currentStyle){ 
                    return obj.currentStyle[attr]; 
                } 
                else{ 
                    return document.defaultView.getComputedStyle(obj,null)[attr]; 
                } 
            }
            //獲取父元素
            var echarts = document.querySelector('.echarts');
            //獲取父元素寬高
            var echartsWidth = getStyle(echarts,'width');
            var echartsHeight = getStyle(echarts,'height');

            //獲取圖表元素
            var myChart = document.querySelector('#myChart');

            //將父元素寬高賦值給圖表
            myChart.style.width = echartsWidth;
            myChart.style.height = echartsHeight;
        },
        //獲取數據
        getData(){
            this.axios.get('https://easy-mock.com/mock/5bff9732ec952807e818415e/admin/leidatu')
            .then((response) => {
                this.tbabData = response.data.data;
                this.leidatu();
            })
            .catch((error) => {
                console.log(error);
            });
        },
        leidatu(){
            /*ECharts雷達圖表*/
            var myChart = echarts.init(document.getElementById('myChart'));
            myChart.setOption({
            polar : [
                {
                    //定義圖表對應文字從左到右的順序
                    indicator : [
                        {text : '助攻', max  : 100},
                        {text : '搶斷', max  : 100},
                        {text : '蓋帽', max  : 100},
                        {text : '後板', max  : 100},
                        {text : '前板', max  : 100},
                        {text : '罰球', max  : 100},
                        {text : '二分', max  : 100},
                        {text : '三分', max  : 100},
                    ],
                    splitArea : {
                        show : true,   
                        areaStyle : {
                            color: ['#fff']  
                            // 圖表背景網格的顏色
                        }
                },
                splitLine : {
                    show : true,
                    lineStyle : {
                        width : 1,
                        color : ['#ccc','#fff','#fff','#fff','#fff']  
                        // 圖表背景網格線的顏色
                        }
                    },
                    radius : 41
                }
            ],
            color:['#f60'],
            series : [
                {
                    type: 'radar',
                    center:['50%','50%'],  //圖表相對容器居中
                    itemStyle: {
                        normal: {
                            areaStyle: {
                                type: 'default'
                            }
                        }
                    },
                    data : [
                        {
                            //value就是展示數據
                            value : [
                                this.tbabData.assist, //助攻
                                this.tbabData.steal, //搶斷
                                this.tbabData.blockper, //蓋帽
                                this.tbabData.defper, //後板
                                this.tbabData.offter, //前板
                                this.tbabData.freeper, //罰球
                                this.tbabData.twoper, //二分
                                this.tbabData.thrper //三分
                            ]
                        }
                    ]
                }
            ]
            })
        }
    }
}
</script>
<style>
    .echarts{
        width:300px;
        height:150px;
    } 
</style>

4.效果圖

5.遇到的問題

1. //數據是從服務端獲取的，leidatu方法需要在.then處執行，否則或出現雷達圖數據爲空的問題