Vue introduces ecarts, init initializes and reports an error

1. Download ecarts

npm install echarts --save

2. I have only one page to refer to ecarts, so I directly introduce it into the page

import echarts from 'echarts'

3. Write corresponding examples in methods

myEcharts() {
      this.chart = echarts.init(document.getElementById('main'))

      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['rented', 'not rented', 'booked']
        },
        series: [
          {
            name: 'Vehicle Rental Status',
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            data: [
              { value: 40, name: 'rented' },
              { value: 30, name: 'not rented' },
              { value: 30, name: 'booked' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }

4. Reference method in mounted

mounted() {
    this.myEcharts()
  }

Results an error was reported, init initialization error was reported

it took half an hour to find out the reason, because the import mode was wrong
the original import accessories from 'accessories' should be changed to Import * as accessories from' accessories' . The updated writing method in the official website. After modification, refresh the page

if ecarts is needed in many parts of the system, it can be introduced globally in main.js

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts