echarts常用图表

完整代码如下

• 根据代码需要进行改动

// utilizationTimes.vue文件
<template>
    <div class="whthinWay flex flex-col items-center" :class="{'shadow':shadowFlag}" v-loading="waysLoad">
        <span class="whthinWayTitle">查档方式</span>
        <div class="whthinWayChart">
            <div id="main2" style="width: 100%;height: 100%;"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            option2:{
                title: {},
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: 'right',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '70%',
                        data: [
                            {value: 1048, name: '搜索引擎'},
                            {value: 735, name: '直接访问'},
                            {value: 580, name: '邮件营销'},
                            {value: 484, name: '联盟广告'},
                            {value: 300, name: '视频广告'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
            varCharts:null,
            waysLoad:true,
            shadowFlag:true,
        }
    },
    methods: {
        show_data(  ){
            if(  this.varCharts!=null && this.varCharts!="" && this.varCharts!=undefined  ){
                this.varCharts.dispose();
            }
            this.varCharts = echarts.init( document.getElementById('main2') );
            this.varCharts.setOption(this.option2);
        },
    },
    mounted() {
    },
}
</script>

<style lang="less" scoped>
.whthinWay{
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    border-radius: 8px;
    // box-shadow: -1px 2px 4px 2px rgba(34, 23, 20, 0.15);
    position: relative;
    .whthinWayTitle{
        font-size: 20px;
        letter-spacing: 2px;
        color: black;
        margin-top: 10px;
    }
    .whthinWayChart{
        width: 98%;
        height: 85%;
        position: absolute;
        top: 15%;
        left: 0px;
    }
}
/deep/.el-loading-spinner{
    top: 50%;
    margin-top: -21px;
    left: 50%;
    width: 100%;
    text-align: center;
    position: absolute;
}
</style>

• 实现效果如图所示：
  
• 接口请求数据根据需要转变形式如下：

//html显示代码
<div class="report">
  <search-times ref="serTimes" class="halfStyle"  :class="{'allStyle':type>2}" ></search-times>
</div>

//组件引入代码
import searchTimes from '../kpiCharts/utilizationTimes.vue';
//数据请求形式转变
getRoleStatics(){
    let query = {
         type:this.type,
         userId:this.userId
     }
     let param =this.make_params(query);
     this.$api.get(`/fq/fileQueryStatistics/getRoleStatistics?${param}`)
     .then(res =>{
        let code = res.code;
        this.$refs.serTimes.timesLoad=false;
        if(code == 0){
             let data = res.data;
             this.$refs.serTimes.option1.series = data;
             this.$refs.serTimes.option1.xAxis.data = res.abscissa;
             let legend = data.map((item)=>{
                 return item.name;
             })
             this.$refs.serTimes.option1.legend.data = legend;
             this.$refs.serTimes.totals = res.total;
             this.$refs.serTimes.show_data();
        }
     })
     .catch(err =>{
         this.$refs.serTimes.timesLoad=false;
     })
 }