vue+eacharts+springboot柱状图展示

1.methods获取后台传回来的数据

 prepareChartDataSq(sqs) {

      const sqauskers = sqs.map(sq => sq.ausker); 

      const sqoverdates = sqs.map(sq => sq.overdate); 

      const sqtotalCount = sqs.map(sq => sq.totalCount); 

      //console.log(sqtotalCount)

      return {

       xData: sqauskers,

       yData: sqtotalCount,

       sqOverData: sqoverdates,

      };

    },

2.template

 <div class="chart-container">

        <div ref="chart1" style="width: 100%; height: 600px;"></div>

        </div>

3.data

 data() {

    return {

      sqs: [],

      chartData1: [], 

    };

  },

4.mounted

 mounted() {

    this.getListSq(); 

  },

5.methods

 async getListSq() {

      const self = this;

      let overdate = ''; // 将overdate变量提前定义

      this.loading = true;

      try {

        const response = await listSqtoecharts(this.queryParams); 

        this.sqs = response.data; 

        this.chartData1 = this.prepareChartDataSq(this.sqs); 

      } catch (error) {

        console.error('Error fetching sqs list:', error);

      } finally {

        this.loading = false;

      }

      const chart1 = echarts.init(this.$refs.chart1); // 初始化ECharts实例

   //根据校验结果显示不同颜色

      this.sqOverData = this.chartData1.sqOverData;

      const colors = this.sqOverData.map(date => {

        var year = parseInt(date.substr(0, 4));

        var month = parseInt(date.substr(4, 2)) - 1;

        var day = parseInt(date.substr(6, 2));

        var dateValue = new Date(year, month, day);

        // 计算日期与今天相差的天数

        var today = new Date();

        const diffDays = Math.ceil((dateValue - today) / (1000 * 60 * 60 * 24));

        // 如果在今天日期之前，显示为蓝色

        if (today > dateValue) {

            return 'blue';

        // 如果在8天内，显示为绿色

        } else if (diffDays <= 8 && diffDays >= 0) {

            return 'green';

        //如果date大于20000或者date=2025，显示紫色

        } else if (diffDays >20000 || date==2025){

          return 'Fuchsia';

        //其余显示红色

        }else {

            return 'red';

        }

      });

      const option = {

        color: ['red'], // 柱状图颜色

        tooltip: {

          trigger: 'axis',

          backgroundColor: 'rgba(0,122,280,0.6)', // 文本标签的背景颜色

          textStyle: {

              color: '#000', // 设置字体颜色为黑色

              fontSize: 12 // 设置文字大小为14px

          },

          axisPointer: {

            type: 'cross'

          },

          formatter: function(params){

            const overdate = self.chartData1.sqOverData[params[0].dataIndex];

            return `${params[0].name}<br>

                    数量: ${params[0].data}<br>

                    结束日期: ${overdate}`;

          }

        },

        xAxis: {

          type: 'category',

          data: this.chartData1.xData, // x轴数据

          axisLabel: {

            interval: 1,

            rotate: 75,

          },

          axisLine: {

              lineStyle: {

                color: 'black' // 设置x轴颜色为黄色

              }

          },

        },

        yAxis: {

          type: 'value',

          axisLabel: {

            interval: 0,// 强制显示所有标签

            rotate: 45,// 旋转 45 度，防止文字重叠

          },

          axisLine: {

              lineStyle: {

                color: 'red', // 设置y轴颜色为黄色

                type: 'solid', // 设置为实线

                width: 1,  // 设置线的粗细

              }

          },

          splitLine: {

            lineStyle: {

                color: 'gray' // 调整网格线颜色为灰色

            }

         }

        },

        dataZoom: [{

            type: 'inside', // 内置的 dataZoom 组件支持缩放

            start: 0,

            end: 100

        },{

          type: 'slider', // 滑动条数据缩放组件

          show: true,    // 显示外置的 dataZoom 组件

          xAxisIndex: [0],

          start: 0,

          end: 100,

          handleSize: 150,// 滑块的大小

        }],

        series: [

          {

            name: 'User Count', // 系列名称

            type: 'bar', // 系列类型为柱状图  line折线图

            data: this.chartData1.yData, // y轴数据

            label: {

            show: true,

            position: 'top', // 可以根据需要设置数值显示的位置

            },

            itemStyle:{

                 color: function(params) {

                    return colors[params.dataIndex];

                }

            }

          },

        ],

      };

      chart1.setOption(option); // 设置ECharts选项

    },