vue中使用echarts
1.第一步当然是使用npm下载echarts啦!
npm install echarts --save
2.第二步就是在main.js中全局引入echarts,当然也可以不进行全局引入
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
3.第三步就是在你需要的页面使用echarts
<template>
<div style="width: 100%; height: 300%" ref="chart"></div>
</template>
<router-view/>
<script>
const Echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar')
export default {
data () { return { chart: null } },
mounted () { this.init() },
methods: {
init () {
this.chart = Echarts.init(this.$refs.chart)
const option = {
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
yAxis: { type: 'value' },
series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }]
}
this.chart.setOption(option)
}
}
}
</script>
<style scoped>
</style>
效果如下:
这个代码已经是根据eslint格式书写的,所以不会报错哦!如果报错了就是您有些地方搞错了,记住不用在当前使用的vue页面引入import哦!!!