安装echarts
npm install echarts --save
引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
准备容器
<div id="PersonnelThreeNewRecruits" ></div>
javascript代码
// 初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('PersonnelThreeNewRecruits'))
// 图表的配置项和数据
var option = {
title: {
text: '近五年年新招录人数'
},
tooltip: {
trigger: 'item'
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
{
data: [],
type: 'line',
itemStyle: {
normal: {
color: 'rgb(255, 165, 0)',
lineStyle: {
color: 'rgb(255, 165, 0)'
}
}
},
smooth: true
}
]
}
var xData = []
var series_data = []
// 数据来源
this.PersonnelThreeNewRecruits.filter((item, index) => {
xData.push(item.years)
series_data.push(item.peopleNumber)
})
option.xAxis.data = xData
option.series[0].data = series_data
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
// 点击柱状图有效区域
myChart.on('click', (params) => {
var name = params.name
// var seriesName = params.seriesName
})
效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d69b25263982e32ae179dda6634a386d.png)