場景

SpringBoot+Vue+Echarts實現選擇時間范圍內數據加載顯示柱狀圖：

SpringBoot+Vue+Echarts實現選擇時間范圍內數據加載顯示柱狀圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基礎上實現X周顯示時間，但是顯示一周7個時間太長顯示不開，所以對X軸的label做傾斜處理。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi?
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、設置axisLable的rotate屬性

??????? xAxis: [{type: "category",axisPointer: {type: "shadow",},axisLabel: {interval: 0,rotate: 40,},},],

2、完整示例代碼

? <template><div :style="{ height: '300px', width: '300px' }" /> </template><script> import echarts from "echarts"; require("echarts/theme/macarons"); // echarts theme import request from '@/utils/request' import { formatDate } from "@/utils/index";export default {name: "BarChartDateRange",data() {return {chart: null,typeData: [{ product: "2021.11.23", 博客數: 20 },{ product: "2021.11.24", 博客數: 30 },{ product: "2021.11.25", 博客數: 35 },{ product: "2021.11.26", 博客數: 43 },],yAxisMax: 0,queryParam: {beginDate: null,endDate: null,},};},created() {//默認開始時間為一周前this.queryParam.beginDate = formatDate(new Date().getTime() - 60 * 1000 * 60 * 24 * 6);//默認結束時間時間當前時間this.queryParam.endDate = formatDate(new Date().getTime());this.getList().then((response) => {var res = response.data;if (res) {//清空柱狀圖的數據源this.typeData = [];//遍歷后臺響應數據，構造柱狀圖數據源for (var key in res) {this.typeData.push({ product: key, 博客數: res[key] });}}this.initChart(this.typeData);});},mounted() {},methods: {//調用后臺接口查詢數據getList() {return request({url: "/system/blog/list",method: "get",params: this.queryParam,});},//父組件調用子組件的該方法進行重新渲染柱狀圖getSelectedRangeList(range) {var startDate = range[0];var endDate = range[1];this.queryParam.beginDate = startDate;this.queryParam.endDate = endDate;this.getList().then((response) => {var res = response.data;if (res) {this.typeData = [];for (var key in res) {this.typeData.push({ product: key, 博客數: res[key] });}}this.initChart(this.typeData);});},initChart(typeData) {this.chart = echarts.init(this.$el, "macarons");this.chart.setOption({tooltip: {trigger: "axis",axisPointer: {// 坐標軸指示器，坐標軸觸發有效type: "shadow", // 默認為直線，可選為：'line' | 'shadow'},},grid: {top: 10,left: "2%",right: "2%",bottom: "3%",containLabel: true,},legend: {//圖例data: ["博客數"],},xAxis: [{type: "category",axisPointer: {type: "shadow",},axisLabel: {interval: 0,rotate: 40,},},],yAxis: [{type: "value",name: "單位：(條)",min: 0,max: 30,interval: 10,axisLabel: {formatter: "{value}",},},],dataset: {source: typeData,},series: [{name: "博客數",type: "bar",barWidth: "40%",},],});},}, }; </script>?

總結

以上是生活随笔為你收集整理的Echarts中柱状图X轴显示时间显示不开倾斜显示的属性的全部內容，希望文章能夠幫你解決所遇到的問題。

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