1.首先我们要去echarts官网进行一个下载(npm install echarts --save)
2.然后在我们使用的页面进行一个引入
3.此时的话我们想要把合并一些数据到echarts图表中的话,我们是需要下载一个命令 (npm install lodash@4.17.15)注意:这里我使用的是一个4点多的一个版本号
4.下载玩合并之后我们还是需要在页面进行一个引入的
<template>
<div>
<!-- 面包屑 -->
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>数据统计</el-breadcrumb-item>
<el-breadcrumb-item>数据报表</el-breadcrumb-item>
</el-breadcrumb>
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</template>
<script>
import *as echarts from 'echarts' //引入echarts
import _ from 'lodash' //引入合并的命令
export default {
data() {
return {
//合并的数据
options: {
title: {
text: '用户来源'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#E9EEF3'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
boundaryGap: false
}
],
yAxis: [
{
type: 'value'
}
]
}
}
},
mounted() {
this.aa()
},
methods:{
async aa(){
var myChart = echarts.init(document.getElementById('main'));
this.$axios.get('reports/type/1').then(res =>{
console.log(res)
let { data } =res
console.log(data)
var d=_.merge(data,this.options) //合并具体的操作
console.log(d);
myChart.setOption(d);
})
}
},
}
</script>
<style>
</style>