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

小包子
  • 25

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]
          }]
        })
      }
    }
  }
回复
阅读 12k
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) // 注册主题
包包包bottle
  • 2
新手上路,请多包涵

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

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

宣传栏