根据官方文档示例,我们先展示测试数据。
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>
最终实现效果如下: