場(chǎng)景

SpringBoot+Vue+Echarts實(shí)現(xiàn)選擇時(shí)間范圍內(nèi)數(shù)據(jù)加載顯示柱狀圖：

SpringBoot+Vue+Echarts實(shí)現(xiàn)選擇時(shí)間范圍內(nèi)數(shù)據(jù)加載顯示柱狀圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基礎(chǔ)上實(shí)現(xiàn)X周顯示時(shí)間，但是顯示一周7個(gè)時(shí)間太長(zhǎng)顯示不開，所以對(duì)X軸的label做傾斜處理。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi?
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

1、設(shè)置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", 博客數(shù): 20 },{ product: "2021.11.24", 博客數(shù): 30 },{ product: "2021.11.25", 博客數(shù): 35 },{ product: "2021.11.26", 博客數(shù): 43 },],yAxisMax: 0,queryParam: {beginDate: null,endDate: null,},};},created() {//默認(rèn)開始時(shí)間為一周前this.queryParam.beginDate = formatDate(new Date().getTime() - 60 * 1000 * 60 * 24 * 6);//默認(rèn)結(jié)束時(shí)間時(shí)間當(dāng)前時(shí)間this.queryParam.endDate = formatDate(new Date().getTime());this.getList().then((response) => {var res = response.data;if (res) {//清空柱狀圖的數(shù)據(jù)源this.typeData = [];//遍歷后臺(tái)響應(yīng)數(shù)據(jù)，構(gòu)造柱狀圖數(shù)據(jù)源for (var key in res) {this.typeData.push({ product: key, 博客數(shù): res[key] });}}this.initChart(this.typeData);});},mounted() {},methods: {//調(diào)用后臺(tái)接口查詢數(shù)據(jù)getList() {return request({url: "/system/blog/list",method: "get",params: this.queryParam,});},//父組件調(diào)用子組件的該方法進(jìn)行重新渲染柱狀圖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, 博客數(shù): res[key] });}}this.initChart(this.typeData);});},initChart(typeData) {this.chart = echarts.init(this.$el, "macarons");this.chart.setOption({tooltip: {trigger: "axis",axisPointer: {// 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效type: "shadow", // 默認(rèn)為直線，可選為：'line' | 'shadow'},},grid: {top: 10,left: "2%",right: "2%",bottom: "3%",containLabel: true,},legend: {//圖例data: ["博客數(shù)"],},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: "博客數(shù)",type: "bar",barWidth: "40%",},],});},}, }; </script>?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。