javascript - 如何在Vuejs中插入Echarts？

Question

我想在具有文件夹结构的模板中添加echarts

ecomponents---->BarCharts.js
Vue-Echarts.vue

BarCharts.js 文件中编写的代码是:-

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

const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [
   {
      label: 'GitHub Commits',
      backgroundColor: '#f87979',
      borderColor: '#f87979',
      fill: false,
      data: [40, 20, 60, 80, 65, 89, 40]
   },
   {
     label: 'New Commits',
     backgroundColor: 'green',
     borderColor: 'green',
     fill: false,
     data: [20, 30, 45, 60, 25, 66, 69]
  }
]
}

const options = {

}

export default {
extends: IEcharts,
mounted() {
   // Overwriting base render method with actual data.
   this.renderChart(data, options)
}
}

VueEchart.vue 中的代码是:-

  <template>
    <v-container fluid grid-list-md>
      <v-layout row wrap>
        <v-flex xs12 lg6 md12 sm12>
          <app-card-block heading="Bar Chart">
           <IEcharts :height="250"></IEcharts>
          </app-card-block>
        </v-flex>
     </v-layout>
    </v-container>   
  </template>

 <script>
 import BarChart from "./ecomponents/BarChart";


export default {
 components: {
  BarChart
 }
}   

这将向我显示此错误:-

[WDS] Errors while compiling. Reload prevented. errors @ client:155 onmessage @ socket.js:41 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:883 SockJS._transportMessage @ sockjs.js:881 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2957 client:161 ./node_modules/vue-echarts-v3/src/full.js Module not found: Error: Can't resolve 'echarts' in 'D:\vue\speedvue\node_modules\vue-echarts-v3\src' errors @ client:161 onmessage @ socket.js:41 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:883 SockJS._transportMessage @ sockjs.js:881 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2957 vue-router.esm.js:17 [vue-router] Failed to resolve async component default:Error: Cannot find module 'echarts' warn @ vue-router.esm.js:17 (anonymous) @ vue-router.esm.js:1764 (anonymous) @ vue-router.esm.js:1834 vue-router.esm.js:17 [vue-router] uncaught error during route navigation: warn @ vue-router.esm.js:17 abort @ vue-router.esm.js:1905 (anonymous) @ vue-router.esm.js:1948 (anonymous) @ vue-router.esm.js:1769 (anonymous) @ vue-router.esm.js:1834 vue-router.esm.js:1906 Error: Cannot find module 'echarts' at webpackMissingModule (full.js:2) at eval (full.js:2) at Module../node_modules/vue-echarts-v3/src/full.js(21.fb0a995c.chunk.js:178) at webpack_require (main.78994579.js:64) at eval (BarChart.js:2) at Module../src/views/Charts/VueChartjs/ecomponents/BarChart.js(23.2464eff6.chunk.js:47)

我该如何解决这个错误，谁能告诉我如何实现这个echart。

Answer 1

此处的相关错误是错误:无法解析“D:\vue\speedvue\node_modules\vue-echarts-v3\src”中的“echarts”和错误:无法在 webpackMissingModule 中找到模块“echarts”。

这是什么意思？您的包 vue-echarts-v3 需要 echarts 包，但显然没有正确地将其列为依赖项。因此，当您安装 vue-echarts-v3 时，该软件包不会自动安装。您可以通过运行npm install echarts来修复该问题。