引入图表不显示是为什么?有什么问题?

可以看看有什么问题吗?为什么在页面中不显示echarts图表呢?
这样报错要怎么修改?

img

img

img

img

这里按需引入,需要引入对应图表组件 参考文档:https://echarts.apache.org/handbook/zh/basics/import/
例如:

// plugins/echarts.js
// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'

// 引入图表类型,图表后缀都为 Chart
import {
  PieChart
} from 'echarts/charts'

// 引入组件,组件后缀都为 Component
import {
  TooltipComponent
} from 'echarts/components'

// 标签自动布局,全局过渡动画等特性
import {
  LabelLayout,
  UniversalTransition
} from 'echarts/features'

// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
  CanvasRenderer
} from 'echarts/renderers'

// 将以上引入的组件使用use()方法注册
echarts.use(
  [
    PieChart,
    TooltipComponent,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
  ]
)

// 导出
export default echarts

可以在main.js定义一个变量

// main.js
import echarts from '@/plugins/echarts'

Vue.prototype.$echarts = echarts

报错,写了,饼图没引入,引入下饼图模块

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7640645
  • 这篇博客也不错, 你可以看下使用多个 echarts 图表后,页面卡住、白屏?
  • 除此之外, 这篇博客: Echarts实战案例代码(39):地理坐标整体地图背景色渐变效果和字体随地图缩放的解决方案中的 字体缩放 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    var myZoom;
    myChart.on('georoam', function(params) {
        if (params.dy || params.dx) {
            return;
        }
        var _zoom = myChart.getOption().geo[0].zoom;
        if (myZoom == _zoom) {
            return;
        }
        option = myChart.getOption();
        if (_zoom > myZoom) {
            option.legend.selected = tempLegend;
            var fontSize = option.series[0].label.fontSize;
            if (fontSize + 1 > 26) {
                option.series[0].label.fontSize = 26;
            } else {
                option.series[0].label.fontSize = fontSize + 1;
            }
            myChart.setOption(option);
        } else {
            var fontSize = option.series[0].label.fontSize;
            if (fontSize - 1 < 12) {
                option.series[0].label.fontSize = 12;
            } else {
                option.series[0].label.fontSize = fontSize - 1;
            }
            myChart.setOption(option);
        }
        myZoom = _zoom;
    });
    

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^