如何使用 vuejs 在我的 js 文件中使用视图图表？

Question

我有一个项目，其中包含 index.html,script.js,style.js 我需要对单个页面使用 vue-echart 我该如何使用？

 <script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>
 <script src="vue.js"></script>
 <script type="module" src="newScript.js"></script>

index.html

<div class="echarts">
  <IEcharts
    :option="bar"
    :loading="loading"
    @ready="onReady"
    @click="onClick"
  />
  <button @click="doRandom">Random</button>
</div>

newScript.js

//import IEcharts from 'vue-echarts-v3/src/full.js';
export default {
  name: 'view',
  components: {
    IEcharts
  },
  props: {},
  data: () => ({
    loading: true,
    bar: {
      title: {
        text: 'ECharts Hello World'
      },
      tooltip: {},
      xAxis: {
        data: ['Shirt', 'Sweater', 'Chiffon Shirt', 'Pants', 'High Heels', 'Socks']
      },
      yAxis: {},
      series: [{
        name: 'Sales',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    }
  }),
  methods: {
    doRandom() {
      const that = this;
      let data = [];
      for (let i = 0, min = 5, max = 99; i < 6; i++) {
        data.push(Math.floor(Math.random() * (max + 1 - min) + min));
      }
      that.loading = !that.loading;
      that.bar.series[0].data = data;
    },
    onReady(instance, ECharts) {
      console.log(instance, ECharts);
    },
    onClick(event, instance, ECharts) {
      console.log(arguments);
    }
  }
};

当我使用上述方式时，我得到一个错误

未捕获 ReferenceError: IEcharts 未定义。

//import IEcharts from 'vue-echarts-v3/src/full.js';

上面这一行是注释，因为有错误 full.js is not found.

Answer 1

您需要使用全局变量来注册组件。 (Ref)

所以，将IEcharts 更改为"v-chart": VueECharts

例如：

// https://github.com/ecomfe/vue-echarts#using-the-component
var app = new Vue({
    el: "#app",
    components: {
        "v-chart": VueECharts
    },
    data() {
    
       let data = []

    for (let i = 0; i <= 360; i++) {
        let t = i / 180 * Math.PI
        let r = Math.sin(2 * t) * Math.cos(2 * t)
        data.push([r, i])
    }

    return {
      polar: {
        title: {
          text: 'Demo'
        },
        legend: {
          data: ['line']
        },
        polar: {
          center: ['50%', '54%']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data: data
          }
        ],
        animationDuration: 2000
      }
    }
    }
});

 <script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <v-chart :options="polar"/>

</div>