1. 前言
现今，数据分析、可视化成为许多领域的重要任务，展示数据的趋势是其中之一。而Vue和ECharts4Taro3就是两个非常不错的工具，在展示时间序列数据趋势时也有很好的表现。本文将介绍如何使用Vue和ECharts4Taro3展示并分析时间序列数据的趋势。
2. 准备工作
2.1 安装vue-cli及新建项目
Vue-CLI 是一个脚手架工具，用于快速搭建 Vue 项目。运行以下命令安装Vue CLI。
npm install -g @vue/cli安装完成后，创建新的Vue项目并进入项目目录。
vue create vue-echarts-taro3然后选择你需要的项目配置，本文选择默认配置Default (Vue 3 Preview) ([Vue 3] babel, eslint)。等待依赖包下载完成后，运行以下命令启动项目。
cd vue-echarts-taro3
npm run serve
此时，在浏览器上输入 http://localhost:8080 将看到新建的Vue项目界面。
2.2 安装ECharts4Taro3
ECharts4Taro3是基于Taro3和ECharts封装的跨端图表库，我们可以使用npm安装ECharts4Taro3。
npm install --save echarts-for-taro32.3 编写数据及引入样式
在Vue项目中，定义一个时间序列数据列表。
const timeList = [
'2020-1', '2020-2', '2020-3', '2020-4',
'2020-5', '2020-6', '2020-7', '2020-8',
'2020-9', '2020-10', '2020-11', '2020-12'
]
引入ECharts4Taro3组件及ECharts样式文件，可放在项目入口文件main.js中引入。
import { initECharts } from 'echarts-for-taro3'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/title'
接着，在组件中定义初始的option对象，用于渲染图表，样式可自行选择。
data() {
return {
option: {
title: {
text: '时间序列数据趋势图'
},
xAxis: {
type: 'category',
data: timeList
},
yAxis: {
type: 'value',
name: '数据'
},
series: [{
data: [],
type: 'line'
}]
}
}
}
3. 绘制图表
通过在template中引入组件，并在script中使用ref绑定组件，我们可以使用组件提供的setOption方法将数据展示在图表中。
template: <ec-canvas id="mychart-dom"></ec-canvas>,
mounted() {
const ecComponent = this.$refs['mychart-dom'];
ecComponent.init((canvas, width, height) => {
const chart = initECharts(canvas, null, {
width: width,
height: height
});
chart.setOption(this.option);
return chart;
});
}
现在我们就可以在浏览器中看到初始的展示结果，如下图所示。
4. 加载数据
4.1 异步加载数据
这里我们假设我们的数据为在每个月的第10天的时候的数据，将数据当做异步请求进行处理。
async created() {
const seriesData = await this.getData()
this.option.series[0].data = seriesData
},
methods: {
async getData() {
const seriesData = []
for (let i = 0; i < timeList.length; i++) {
const data = await this.fetchData(i)
seriesData.push(data)
}
return seriesData
},
async fetchData(month) {
return await Promise.resolve((Math.random() * 1000 * month).toFixed(2))
}
}
4.2 渲染结果
此时，再次刷新页面将展示数组data中的数据在图表中呈现出来。
5. 数据分析与操作
5.1 数据操作
在Vue中可以通过v-model绑定，为图表添加用户可交互的操作，例如下面的自定义月份值。
template: <div>
<ec-canvas id="mychart-dom" ref="mychartDOM"></ec-canvas>
<br>
<label for="month">自定义月份：</label>
<input type="text" v-model="selectedMonth">
</div>
…
methods: {
updateData() {
const { selectedMonth } = this
if (!selectedMonth) {
return
}
const index = timeList.indexOf(selectedMonth)
if (index === -1) {
return
}
data[index] = (Math.random() * 1000 * (index + 1)).toFixed(2)
const ecComponent = this.$refs['mychartDOM']
ecComponent.chart.setOption({
series: [{
data: data
}]
})
}
}
5.2 数据分析
ECharts提供了丰富的数据过滤和分析API，例如我们可以通过tooltip的触发事件来展示指定数据的变化趋势。
mounted() {
const ecComponent = this.$refs['mychart-dom']
ecComponent.init((canvas, width, height) => {
const chart = initECharts(canvas, null, {
width: width,
height: height
})
chart.setOption(this.option)
chart.on('updateAxisPointer', (event) => {
const xAxisInfo = event.axesInfo[0]
if (xAxisInfo) {
const { value: month } = xAxisInfo.value
this.selectedMonth = month
}
})
return chart
})
}
…
methods: {
…
snapshot() {
const ecComponent = this.$refs['mychartDOM']
const imgBase64 = ecComponent.chart.getDataURL({
type: 'png',
pixelRatio: 2
})
window.open(imgBase64, '_blank')
},
},
},
这里展示了一个截图的例子。
snapshot() {
const ecComponent = this.$refs['mychartDOM']
const imgBase64 = ecComponent.chart.getDataURL({
type: 'png',
pixelRatio: 2
})
window.open(imgBase64, '_blank')
}
6. 总结
本文介绍了如何使用Vue和ECharts4Taro3展示并分析时间序列数据的趋势。我们了解了如何初始化图表，并加载数据，即数据中分析及操作。在实践中，你可以根据实际需求对代码进行适当的修改和优化，感受到ECharts4Taro3带来的快速开发和高灵活性。