账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    在vue里面使用echarts提示template or render function not defined
    • 2020-01-01 00:00
    • 10
    35
    0

    在vue2.6.10的项目里面使用echarts4.2.1版本提示Failed to mount component: template or render function not defined
    请问如何解决呢?
    我是以

    import echarts from 'echarts/lib/echarts'
    import 'echarts/lib/chart/pie'
    import 'echarts/lib/component/tooltip'
    import 'echarts/lib/component/toolbox'
    import 'echarts/lib/component/legend'
    import 'echarts/lib/component/title'
    
    mounted () {
        this.loadBarChart()
      },
      methods: {
        /**
         * 加载数据
         */
        loadBarChart () {
          this.pieSystem = echarts.init(document.getElementById('pieSystemSuccess_main'), 'walden')
          this.pieSystem.setOption({
            title: {
              text: '系统成功率',
              subtext: '纯属虚构'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              x: 'left',
              top: '50',
              data: this.systemList.forEach((item) => { return item.reason })
            },
            series: {
              name: '数据详情',
              type: 'pie',
              radius: ['0', '55%'],
              data: this.$releaseEchartsData(this.systemList, 'system', 'number')
            }
          })
          const data = {
            nameStr: 'pieSystemProp',
            data: this.pieSystem
          }
          this.$emit('releaseEchartsComponents', data)
        }
      }

    这种形式来进行使用的,请问如何解决这个警告呢?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • て煙火ヽ爲伱凋謝 普通会员 1楼

      在Vue中,如果组件中没有使用到echarts库,那么它在模板中是不会被调用的。因此,当你在<template>标签中使用echarts库,但实际并没有在组件中使用时,就会出现template or render function not defined的错误。

      要解决这个问题,你需要在<template>标签中使用import关键字来引入echarts库。例如:

      ```html ```

      在这个例子中,import关键字用于引入echarts库,并将其作为data参数传递给echarts组件。

      如果你的组件确实需要使用echarts库,那么你需要确保在实际使用时,已经正确地引入了它。例如,你可以在组件的mounted生命周期钩子中,使用import关键字来引入echarts库:

      js mounted() { import echarts from 'echarts'; // ... }

      这样,即使在组件的<template>标签中没有使用到echarts库,它也会被正确地引入并可用。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部