Bilicom.vue

<template>
  <div class="echarts" style="text-align: left">
    <div id="bilicom" style="with: 100%; height: 100%">echart_test</div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'


export default {
    name: 'Bilicom',
    data () {
        return {
            msg: '内容',
            md_data: [],
            data: ['threejs加载模型']
        }
    },
    methods: {
        echartfunc: function () {
            if (!echarts) return
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.getElementById('bilicom'))
            const option = {
                backgroundColor: 'rgba(0, 0, 0, 0.3)',

                title: {
                    text: 'echarts',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#ccc'
                    }
                },

                tooltip: {
                    trigger: 'item'
                },

                visualMap: {
                    show: false,
                    min: 80,
                    max: 600,
                    inRange: {
                        colorLightness: [0, 1]
                    }
                },
                series: [
                    {
                        name: '学习动力',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: [
                            { value: 335, name: '反向素材' },
                            { value: 310, name: '励志故事' },
                            { value: 274, name: '心灵鸡汤' },
                            { value: 235, name: '社会压力' },
                            { value: 400, name: '发自内心' }
                        ].sort(function (a, b) {
                            return a.value - b.value
                        }),
                        roseType: 'radius',
                        label: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        labelLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        },
                        itemStyle: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },

                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200
                        }
                    }
                ]
            }
            myChart.setOption(option)
        }
    },
    created: function () {
        const that = this
        try {
            that.echartfunc()
            window.onload = that.echartfunc
        } catch (e) {
            console.log(e)
        } finally {
            that.echartfunc()
        }
    },
    mounted () {
        let that = this
        try {
            that.echartfunc()
            window.onload = that.echartfunc
        } catch (e) {
            console.log(e)
        } finally {
            that.echartfunc()
        }
    }
}
</script>

<style scoped>
.echarts {
  margin: 0;
  width: 100%;
  height: 100%;
}

#bilicom {
  /* align-content: left; */
  width: 100%;
  height: 100%;
  background: url(/image/snow/previewFix.jpg) center top no-repeat;
  /* opacity: 1; */
}
</style>