1.在vue项目中npm运行
npm install echarts --save
2.在main.js中引入echarts
// 引入echarts-5.0
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.新建组件在组件中使用
<template>
<div id="container" style="width: 600px; height: 300px"></div>
</template>
<script>
export default {
name: 'surface',
data () {
return {
option: {
title: {
text: '某站点用户访问来源',
top: '5%',
left: 'center'
},
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)'
}
}
]
}
}
},
mounted () {
let chartDom = document.getElementById('container')
let myChart = this.$echarts.init(chartDom)
myChart.clear()
myChart.setOption(this.option)
},
methods: {}
}
</script>
4.在需要使用组件位置引用
import surface from "../components/surface";
5.组件进行注册
components:{
surface
}
6.在适当位置进行使用
<surface></surface>