当前位置： 移动技术网 > IT编程>网页制作>CSS > echart 人头

echart 人头

2019年11月04日  | 移动技术网IT编程  | 我要评论

 



 



<template>
    <div :class="classname">
        <div :id="id" class="spiritchartbox"></div>
    </div>
</template>

<script>
import { mapstate } from "vuex";
import echarts from "@/utils/initecharts";
import deepmerge from "@/utils/deepmerge";
export default {
    name: "spiritchart",
    props: {
        classname: {
            type: string,
            default: "spiritchartbox"
        },
        id: {
            type: string,
            default: "spiritchart"
        },
        options: {
            type: object,
            default: function() {
                return {};
            }
        }
    },
    data() {
        return {
            chart: null
        };
    },
    watch: {
        options() {
            this.setoption();
        },
        clientwidth() {
            this.setoption();
        }
    },
    mounted() {
        const self = this;
        self.initchart();
    },
    computed: {
        ...mapstate({
            clientwidth: state => state.init.clientwidth
        })
    },
    methods: {
        initchart() {
            const self = this;
            self.chart = echarts.init(document.getelementbyid(self.id));
            window.addeventlistener("resize", () => {
                self.chart.resize();
            });
            self.setoption();
        },
        setoption() {
            const self = this;
            const { options, clientwidth } = self;
            const maxdata = 100;
            const spirit =
                "image://data:image/png;base64,ivborw0kggoaaaansuheugaaabkaaaa+cayaaadeqldtaaaacxbiwxmaaassaaaleghs3x78aaabpeleqvryhe2yqu6embsgf4n7cotxbhoafrhg7dxavcecaw/g3abp4ljuxkk4gnwab1boghljiq22fr2gmcb0twjh9zwvps389klve3aq6u4gqangzkhtkcyzsepqs5ci7tyaxj0pjzit1wxiuxcpgbaaybp7kzpx7ipmmmopayahzykokgca2dwokgzcvhkc5cmq4s3jin5ze5rnhchmuau3dkdhpjdxewjtadw5it9cjkfqisf3mlnpg9jzadjjtlqhdymhp+jsvcjqlj9ibfjumum09qsoowrel9gbeohmmhmq0ybyyqdpepjah54udacc31fzdjxoctgxglrm18kcsn8dwq/4c0kamfez1nnbnjmh1nr/f0wijeiijel+okrz4kho0khpsvgl2ls/gmftqp10qdtc9bgrthnhrkvpkf3p8a+hf0ftm1fdf+rou30/ltmbaxjw5s0q/stgp3h07nknsy2ju3hfr0iereiereienaiz7i7r82un+yc2vucyeobz1h5wolnx2+i0c00htbayn/+1haiysj8up/kfpqhwbdyuicontdakaaaaaelftksuqmcc";
            self.chart.setoption({
                title: {
                    text: "景区饱和度",
                    x: "center",
                    y: "15%",
                    textstyle: {
                        color: "#fff",
                        fontsize: 24,
                        fontweight: 600
                    }
                },
                tooltip: { show: false },
                xaxis: {
                    max: maxdata,
                    splitline: { show: false },
                    axistick: { show: false },
                    axisline: { show: false },
                    axislabel: { show: false }
                },
                yaxis: {
                    data: options.yaxisdata || [],
                    inverse: true,
                    axistick: { show: false },
                    axisline: { show: false },
                    axislabel: {
                        formatter: val => {
                            const strarr = val.split("_");
                            return `{a|${strarr[0]}}\n{b|${strarr[1]}}`;
                        },
                        rich: {
                            a: {
                                color: "#fff",
                                fontsize: 12,
                                lineheight: 20
                            },
                            b: {
                                color: "#fbee21",
                                fontsize: 16
                            }
                        }
                    }
                },
                grid: { top: "25%", height: "60%", width: "43%", right: "10%" },
                series: [
                    {
                        type: "pictorialbar",
                        symbol: spirit,
                        symbolrepeat: "fixed",
                        symbolmargin: "15%",
                        symbolclip: true,
                        symbolsize: [15, 30],
                        symbolboundingdata: maxdata,
                        data: options.seriesdata || [],
                        z: 10
                    },
                    {
                        type: "pictorialbar",
                        itemstyle: {
                            normal: {
                                opacity: 0.2
                            }
                        },
                        animationduration: 0,
                        symbolrepeat: "fixed",
                        symbolmargin: "15%",
                        symbol: spirit,
                        symbolsize: [15, 30],
                        symbolboundingdata: maxdata,
                        data: options.seriesdata || [],
                        z: 5
                    }
                ]
            });
        }
    }
};
</script>

<style scoped>
.spiritchartbox {
    width: 100%;
    height: 100%;
}
</style>




 



                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，
                        点击进行留言回复！！
                    

                

                 
                

                    
相关文章:

                    
                

               
                       
                             

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网