<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 () { // 基于准备好的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>