1.首先在项目中安装echarts
1.安装echarts依赖包
npm install echarts --save
2.在plugins目录下创建echarts.js文件并在里面引入echarts依赖包
import Vue from 'vue'
import echarts from 'echarts'//这个需要注意一下有可能会报错,可以用下面方法
Vue.prototype.$echarts = echarts
用以上通用的方法,可能会出现以下报错,“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘
是因为Echarts 5.x 不再支持上面的引入方式,详情可以查看Echarts官网
总而言之就是改为以下:
import Vue from 'vue'
import * as echarts from 'echarts' //区别在这里
Vue.prototype.$echarts = echarts
3.在nuxt.config.js配置文件中引入我们刚刚创建的echart.js
plugins: ['~plugins/echarts']
//我只写了要加这个,不代表这里只有这个
//还可以用'@/plugins/echarts'形式,都差不多的
以上就是需要配置的步骤,下面我们来看看效果
<template>
<div id="echarts">
<div id="myChart"></div>
<div id="myChart2"></div>
</div>
</template>
<script type="text/javascript">
export default {
name: 'Echarts',
data () {
return {}
},
methods: {
echartsInit () {
// 找到容器
let myChart = this.$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]
}]
})
},
echartsInit2 () {
let myChart = this.$echarts.init(document.getElementById('myChart2'))
myChart.setOption({
title: {text: 'echarts 饼图'},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data: [
{value: 235, name: '视频广告'},
{value: 274, name: '联盟广告'},
{value: 310, name: '邮件营销'},
{value: 335, name: '直接访问'},
{value: 400, name: '搜索引擎'}
]
}
]
})
}
},
mounted () {
this.echartsInit()
this.echartsInit2()
}
}
</script>
<style scoped lang="less">
#myChart{
width: 600px;
height: 300px;
margin-left: auto;
margin-right: auto;
float: left;
}
#myChart2{
width: 600px;
height: 300px;
margin-left: auto;
margin-right: auto;
float: right;
}
</style>
在pages下的index.vue引入组件就可以看到效果了