1. 安装Echarts
使用npm
npm install echarts --save
导入Echarts插件
在main.js文件下的配置
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
在组件中直接使用
import echarts from 'echarts'
2.在vue中使用Echarts
我们来做个简单的实例
首先需要一个容器装下Echarts
<template>
<div id="list" style="width: 600px;height:400px;"></div>
</template>
导包
<script>
import echartsfrom 'echarts'
</script>
初始化echarts
建立mounted生命周期钩子
mounted () {
// 初始化echarts
var myChart = echarts.init(document.querySelector('#list'))
// 拿到echarts图表需要的数据
var option = 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',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
}
// 使用方法引入echarts
myChart.setOption(option)
}
3.优化代码格式
<template>
<div id="list" style="width: 600px;height:400px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'dome',
props: {
},
data () {
return {
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',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
}
}
},
methods: {},
mounted () {
var myChart = echarts.init(document.querySelector('#list'))
var option = this.option
myChart.setOption(option)
}
}
</script>
<style scoped>
</style>