由于在專案中需要對資料進行可視化處理，也就是用圖表展示，眾所周知echarts是非常強大的插件，
npm install echarts -S
或者使用淘寶的鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
創建圖表
首先需要全域引入
在main.js中
// 引入echarts
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts
在Echarts.vue中
<template>
<div>
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于準備好的dom，初始化echarts實體
let myChart = echarts.init(document.getElementById('myChart'))
// 繪制圖表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
</script>
<style>
</style>
這樣我們就把echarts引入了，然后在瀏覽器中保存下看下
使用ECharts的時候遇到了報錯：
Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined”
原因：echarts的引入方式錯誤：
正確的echarts引入方式：
let echarts = require(‘echarts’)
其實產生這個的原因是因為echarts的版本太高了，我們現在來看package.json里面的echarts的版本
一時半會拿不準問題原因，到處搜羅了一下，發現可能是版本問題，我下載的是最新的，于是卸載了echarts，安裝了低版本
npm install echarts@4.8.0 --save或者let echarts = require(‘echarts’)
發現安裝低于5的版本，這三種方式引入的都可以使用
現在我把本地的依賴都清除，然后在package.json里面把echarts洗掉，然后重新安裝依賴看看
現在的版本是5.1.1
當使用全域引入的時候就會報錯了
使用import的時候也是會報錯
使用require就不會報錯了
總結：如果echarts版本在5.0以下使用三種引入的方式都行，
如果echarts的版本在5.0以上，只能使用require的方式引入
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/282319.html
標籤：其他
上一篇：如何使用原生的 JavaScript 代碼，觸發 SAP UI5 按鈕控制元件的點擊事件處理函式
下一篇：SpringBoot+MyBatisPlus+Vue 前后端分離專案快速搭建【前端篇】【快速生成后端代碼、封裝結果集、增刪改查、模糊查找】【畢設基礎框架】