vue中使用echarts自定义主题,报错ECharts is not Loaded

vue中引入echarts和自定义的主题文件, 主题文件js报错ECharts is not Loaded。页面上echarts的图表是正确显示的。

  import echarts from 'echarts/lib/echarts'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import '@/assets/echarts/mytheme' // 主题文件

  export default {
    name: 'user-chart',
    data () {
      return {
      }
    },
    mounted () {
      this.initChart()
    },
    methods: {
      initChart () {
        this.userChart = echarts.init(this.$refs['userChart'], 'mytheme')
        this.userChart.setOption({
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        })
      }
    }
  }
阅读 6.5k
评论
    3 个回答

    找到了一种方法,把主题的json下载下来,放到js文件中,比如theme.js

    const theme = {//主题的json数据}
    export default theme

    然后在vue文件中

     import echarts from 'echarts/lib/echarts'
     import theme from 'themepath/theme'
     echarts.registerTheme('theme', theme) // 注册主题
      • 2
      • 新人请关照

      把 js文件里的root.echarts 改成echarts;然后在该js文件内 import echarts from 'echarts'

        • 2.4k

        看下主题什么中的Echarts是不是为全局变量.
        如果是的话.需要将echarts暴露出去.
        不然无法引用

          撰写回答

          登录后参与交流、获取后续更新提醒