?

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>

最終實現效果如下：

總結

以上是生活随笔為你收集整理的前端学习（2734）：重读vue电商网站44之使用 echarts的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。