//安装脚手架:
1、npm install vue
2、npm install echarts
//引入脚手架:
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
//具体代码如下:
<template>
<div id="app">
<div id="chart"></div>
</div>
</template>
<script>
export default {
data() {
return {
chartData: [] // 存放图表数据的数组
}
},
mounted() {
this.generateChart()
},
methods: {
generateChart() {
this.chartData = [10, 20, 30, 40, 50] // 示例数据
this.renderChart()
},
renderChart() {
// 使用vue-echarts插件来绘制图表
let myChart = this.$echarts.init(document.getElementById('chart'))
let option = {
title: {
text: '报告统计图表'
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [{
data: this.chartData,
type: 'bar'
}]
}
myChart.setOption(option)
}
}
}
</script>