初次加载时,由于外层使用%比 echarts dom元素没有完全加载完成,canvas绘画继承本身宽高,造成Echarts图表初始显示异常非完全显示。
-
- <div id="excelC" ref="excelChart" style="width: 90%;height:80%;">div>
- methods: {
- setci(data) {
- // 有的话就获取已有echarts实例的DOM节点
- let myChart = echarts.getInstanceByDom(document.getElementById("cicly"))
- // 如果不存在,就进行初始化
- if (myChart == null || myChart == undefined || myChart == '') {
- myChart = echarts.init(document.getElementById("cicly"));
- }
- //对应配置内容
- var option = {
- tooltip: {
- trigger: 'item',
- formatter: '{a}
{b} : {c} ({d}%)' - },
- series: [
- {
- name: '项目执行情况',
- type: 'pie',
- radius: ['40%', '70%'],
- label: {
- formatter: '{d}%',
- fontSize: 14
- },
- itemStyle: {
- borderColor: '#fff',
- borderWidth: 5
- },
- emphasis: {
- label: {
- show: true,
- },
- },
- data: data,
- },
- ],
- }
- myChart.setOption(option)
- window.addEventListener('resize', function () {
- myChart.resize();
- });
- },
- //获取后端传输数据
- search() {
- this.setci(Data)
- }
- },
- mounted() {
- this.$nextTick(() => {
- this.search()
- })
- },
- myChart.setOption(option)
- window.addEventListener('resize', function () {
- myChart.resize();
- });
- mounted() {
- this.$nextTick(() => {
- this.search()
- })
- },