前端学习（2734）：重读vue电商网站44之使用 echarts

echarts 官方文档传送门

根据官方文档示例，我们先展示测试数据。

Javascript

<template><div><!-- 面包屑导航区域 --><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>数据统计</el-breadcrumb-item><el-breadcrumb-item>数据报表</el-breadcrumb-item></el-breadcrumb><!-- 卡片视图 --><el-card><!-- 2.为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div></el-card></div>
</template><script>
// 1.导入echarts
import echarts from 'echarts'
export default {data() {return {}},created() {},mounted() {// 3.基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'))// 4.准备数据和配置项var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]}// 5.使用刚指定的配置项和数据显示图表。myChart.setOption(option)},computed: {},methods: {}
}
</script><style lang="less" scoped>
</style>

最终实现效果：

由于通过 $http获取得到的数据缺少鼠标跟随的效果，于是需要将 options 进行合并操作，此时使用了 lodash的 merge 函数。核心代码如下：

Javascript

// 4.准备数据和配置项(res.data)
const result = _.merge(res.data, this.options)

在此提供数据报表折线图绘制的源代码：

Javascript

<template><div><!-- 面包屑导航区域 --><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>数据统计</el-breadcrumb-item><el-breadcrumb-item>数据报表</el-breadcrumb-item></el-breadcrumb><!-- 卡片视图 --><el-card><!-- 2.为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 750px;height:400px;"></div></el-card></div>
</template><script>
// 1.导入echarts
import echarts from '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'}]}}},created() {},async mounted() {// 3.基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'))const { data: res } = await this.$http.get('reports/type/1')if (res.meta.status !== 200) {return this.$message.error('获取折线图数据失败！')}// 4.准备数据和配置项(res.data)const result = _.merge(res.data, this.options)// 5.使用刚指定的配置项和数据显示图表。myChart.setOption(result)},computed: {},methods: {}
}
</script><style lang="less" scoped>
</style>

最终实现效果如下：