Vue.js echarts-将具有相同值的轴标签分组
我试图用echarts构建一个条形图，其中每个条形图都有一个小时和日期。如何对日期进行分组，使其不会重复？如果图形被相应地放大/平移，则也应该更新。谢谢你的帮助 我所拥有的： 我想要的是： 以及我目前拥有的代码：Vue.js echarts-将具有相同值的轴标签分组,vue.js,bootstrap-vue,echarts,Vue.js,Bootstrap Vue,Echarts,我试图用echarts构建一个条形图，其中每个条形图都有一个小时和日期。如何对日期进行分组，使其不会重复？如果图形被相应地放大/平移，则也应该更新。谢谢你的帮助 我所拥有的： 我想要的是： 以及我目前拥有的代码： <template> <div class="bar-chart"> <v-chart :options="chartOptionsBar" theme="dark" :a
<template>
<div class="bar-chart">
<v-chart :options="chartOptionsBar" theme="dark" :autoresize="true" ref="chart"></v-chart>
</div>
</template>
<style lang="sass">
.echarts
height: 100%
width: 100%
</style>
<style lang="sass" scoped>
.bar-chart
width: 100%
height: 250px
</style>
<script>
import ECharts from 'vue-echarts'
import {RejectionHistoryRequest} from "@/pb/isotronic/hosted/central/gatekeeper/productionapi/rpc/proto/AnalyticsService_pb";
import {customerId, grpcApiUrl} from "@/helper";
import {AnalyticsClient} from "@/pb/isotronic/hosted/central/gatekeeper/productionapi/rpc/proto/AnalyticsService_grpc_web_pb";
export default {
components: {
'v-chart': ECharts
},
created() {
this.analytics = new AnalyticsClient(grpcApiUrl(), null, null);
},
props: {
machineName: String,
},
computed: {
chartOptionsBar() {
let that = this;
let option = {
grid: {
bottom: 110
},
xAxis: [
{
type: 'category',
data: that.graphData.categoryData,
},
{
type: 'category',
data: that.graphData.categoryDates
}
],
yAxis: [{
name: "Rejected Vials [ % ]",
nameLocation: "middle",
nameGap: 40,
}],
series: [
{
type: 'bar',
data: that.graphData.valueData,
}
],
title: {
text: 'Test Chart',
left: 'center'
},
tooltip: {
trigger: 'axis',
formatter: function (param) {
return 'Rejected Vials:<br />' + param[0].axisValue.substring(0, param[0].axisValue.length - 1) + '-' +
(+param[0].axisValue.substring(0, param[0].axisValue.length - 1) + 1 ) + 'h<br />' + param[0].data + ' %';
},
axisPointer: {
type: 'shadow',
label: {
show: false
}
}
},
dataZoom: [{
type: 'inside',
startValue: that.dataZoomStart,
}, {
type: 'slider',
startValue: that.dataZoomStart
}],
}
return option
}
},
data() {
return {
graphData: {
categoryData: [],
valueData: [],
categoryDates: []
},
dataZoomStart: 0
}
},
methods: {
generateData: function () {
this.graphData.categoryData = []
this.graphData.valueData = []
let startDate = new Date(2020, 10, 25, 0);
let endDate = new Date(2020, 10, 30, 0);
for (let d = startDate; d <= endDate; d.setTime(d.getTime() + (60 * 60 * 1000))) {
this.graphData.categoryData.push(startDate.getHours() + '-' + (startDate.getHours() + 1) + 'h' + ' | ' + this.$moment(startDate).format("MM/DD"))
this.graphData.valueData.push(Math.random().toFixed(2) / 2);
}
this.dataZoomStart = this.graphData.categoryData.length - 24
},
loadRejectionHistory: function () {
let rejectionHistoryRequest = new RejectionHistoryRequest();
rejectionHistoryRequest.setCustomer(customerId());
rejectionHistoryRequest.setMachineName(this.machineName);
const categories = [];
const reject = [];
const dates = [];
let stream = this.analytics.getRejectionHistory(rejectionHistoryRequest, null);
stream.on('data', (rejectionHistoryRow) => {
categories.push(rejectionHistoryRow.getBegin().toDate().getHours() + "h");
dates.push(rejectionHistoryRow.getBegin().toDate().getDate() + '.' +
(rejectionHistoryRow.getBegin().toDate().getMonth() + 1))
reject.push((rejectionHistoryRow.getRejectionRate() * 100).toFixed(2));
});
stream.on('end', (end) => {
this.graphData.categoryData = categories
this.graphData.valueData = reject
this.graphData.categoryDates = dates
this.dataZoomStart = this.graphData.categoryData.length - 12
});
},
},
mounted() {
this.loadRejectionHistory()
}
}
埃查特先生
身高：100%
宽度：100%
.条形图
宽度：100%
高度：250像素
从“vue ECharts”导入ECharts
从“@/pb/Istronic/hosted/central/gatekeeper/productionapi/rpc/proto/AnalyticsService_pb”导入{RejectionHistoryRequest}”；
从“@/helper”导入{customerId，grpcapirl}；
从“@/pb/Istronic/hosted/central/gatekeeper/productionapi/rpc/proto/AnalyticsService_grpc_web_pb”导入{AnalyticsClient}”；
导出默认值{
组成部分：{
“v形图”：ECharts
},
创建（）{
this.analytics=新的分析客户端（grpcApiUrl（），null，null）；
},
道具：{
machineName:String，
},
计算：{
图表选项栏（）{
让那=这；
让选项={
网格：{
底数：110
},
xAxis：[
{
类型：'类别'，
数据：that.graphData.categoryData，
},
{
类型：'类别'，
数据：that.graphData.categoryDates
}
],
亚克斯：[{
名称：“不合格小瓶[%]”，
名称位置：“中间”，
姓名差距：40，
}],
系列：[
{
类型：'bar'，
数据：that.graphData.valueData，
}
],
标题：{
文本：“测试图表”，
左：“中间”
},
工具提示：{
触发器：“轴”，
格式化程序：函数（参数）{
返回“拒绝的小瓶：
”+参数[0]。axisValue.substring（0，参数[0]。axisValue.length-1）+'-'+
（+param[0].axisValue.substring（0，param[0].axisValue.length-1）+1）+'h
'+param[0].data+'%；
},
轴指针：{
键入：“阴影”，
标签：{
节目：假
}
}
},
数据缩放：[{
键入：“内部”，
startValue:that.dataZoomStart，
}, {
键入：“滑块”，
startValue:that.dataZoomStart
}],
}
返回选项
}
},
数据（）{
返回{
图数据：{
类别数据：[]，
valueData:[]，
类别化合物：[]
},
dataZoomStart:0
}
},
方法：{
generateData:函数（）{
this.graphData.categoryData=[]
this.graphData.valueData=[]
让startDate=新日期（2020年10月25日0）；
设endDate=新日期（2020年10月30日0日）；
对于（设d=起始日期；d{
categories.push（rejectionHistoryRow.getBegin（）.toDate（）.getHours（）+“h”）；
dates.push（rejectionHistoryRow.getBegin（）.toDate（）.getDate（）+）。'+
（rejectionHistoryRow.getBegin（）.toDate（）.getMonth（）+1））
拒绝.推送（（rejectionHistoryRow.getRejectionRate（）*100）.toFixed（2））；
});
stream.on（'end'，（end）=>{
this.graphData.categoryData=类别
this.graphData.valueData=拒绝
this.graphData.categoryDates=日期
this.dataZoomStart=this.graphData.categoryData.length-12
});
},
},
安装的（）{
此.loadRejectionHistory（）
}
}