echarts做一个柱状图和折线图混合图表，并让echarts日期区间自动排开，拿到日期区间每天的日期

最新推荐文章于 2026-05-19 09:08:08 发布

原创最新推荐文章于 2026-05-19 09:08:08 发布 · 1.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

功能实现专栏收录该内容

157 篇文章

订阅专栏

本文展示了如何使用Echarts结合自定义的mixins文件，动态生成日期区间并在图表上自动排列。通过getAll方法计算日期区间内的每一天，并作为X轴的data参数，实现了日期在X轴上的自动分布。同时，代码中还包含了柱状图和线型图的配置示例。

先看效果图

在这里插入图片描述

上代码

数值是我瞎写了一点，不要在意，自己改改就好，总体是这么个效果

<template>
  <div>
       <!-- 图表 -->
       <div style="height:400px;margin-top:70px">
        <div ref="topechart" style="height:100%;width:100%"></div>
    </div>
  </div>
</template>

<script>
//引入mixins文件
import mymixins from "@/utils/mixins/mixins.js"
export default {
    data(){
        return{
            //开始和结束时间
            aa:"2020-09-07",
            bb:"2020-09-19"
    }
    },
    //混入mixins文件。调用getAll方法
      mixins:[mymixins],
  mounted(){
      //把起始结束日期放进去，计算出中间所有日期
      let timearr = this.getAll(this.aa,this.bb)
      //参数传给echarts图渲染出来X轴
      let box=["jul-20","Aug-20","sep-20","Oct-20","Nov-20","Dec-20","jan-21","Feb-21","Mar-21","Apr-21","May-21","Jun-21","jul-21"]
      //需要后面的动态生成，前面的数据固定，所以我把日期添加进去box数组，然后把box当参数传给图表渲染X轴刻度信息
      box.push(...timearr)
      //挂载后直接渲染图表，并传递参数。
      this.topGraph(box)
  },
    methods:{
        //柱状图
      topGraph(timearr) {
      var myChart = this.$echarts.init(this.$refs["topechart"]);
      var option = {
          //柱状图颜色三个对应颜色
          color:['#d48265', '#91c7ae','#749f83'],
          title: {
              //title
          text: "同吋口检测对比",
          //title的位置
          padding: [5,30,50,150],
        },
        //鼠标经过显示的小提示
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    //选项
    legend: {
        data: ['7#检测数量', '8#检测数量', '9#检测数量','7#Upper', '8#Upper', '9#Upper']
    },
    xAxis: [
        {
            //类目轴
            type: 'category',
            //X轴刻度信息，用的变量
            data: timearr,
            //X轴文字倾斜角度
            axisLabel: {
              interale: 0,  //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签
              rotate: -90, //设置日期显示样式（倾斜度)  90度是竖着的
            },
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {   //左边Y轴数字
            type: 'value',
            min: 0,
            max: 300,
            interval: 50,
            axisLabel: {
                formatter: '{value} '
            }
        },
        {   //右边Y轴数字
            type: 'value',
            //最小0开始，最大到300
            min: 0,
            max: 300,
            interval: 50,
            axisLabel: {
                formatter: '{value} '
            }
        }
    ],
    series: [
        {   //柱状图三个 type：bar意思是柱状图
            name: '7#检测数量',
            type: 'bar',
            //图的数据
            data: [0,0,0,0,0,0,0,0,0,127,128,122,124,216,313,134,153,161,114,22,45,62,71]
        },
        {
            name: '8#检测数量',
            type: 'bar',
            data: [0,0,0,0,0,0,0,0,0,113,224,125,126,121,122,125,126,127,128,122]
        },
        {
            name: '9#检测数量',
            type: 'bar',
            data: [0,0,0,0,0,0,0,0,0,113,224,125,126,121,122,125,126,127,128,122]
        },
        {   //线性图三个 type：line意思是线型图
            name: '7#Upper',
            type: 'line',
            yAxisIndex: 1,
            data: [113,224,25,126,21,122,125,126,27,28,12,12,216,313,134,153,11,14,22,45,62,71,84,22,42,61]
        },
        {
            name: '8#Upper',
            type: 'line',
            yAxisIndex: 1,
            data: [113,224,125,126,121,12,125,126,127,128,122,124,26,33,134,13,161,114,22,5,62,71,84,22,42,61]
        },
        {
            name: '9#Upper',
            type: 'line',
            yAxisIndex: 1,
            data: [113,224,125,126,121,122,125,16,127,128,22,124,26,3,134,153,161,114,22,145,62,1,84,22,42,61]
        }
    ]
};
      //初始化表格
      myChart.setOption(option);
      //监听，根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    }
}
</script>

<style>

</style>

那echarts如何让一个日期区间能自动排开，把每天的日期自动放到X轴上呢

我是封装成了mixins文件。混入进去的，因为很多的图表都要用到的。这样方便。
上代码：只需要创建mixins.js文件。然后看上面的代码，按照我这样引入调用就行。
调用方法简单：

let timearr = this.getAll("2020-09-07","2020-09-19")
//当然这个括号内你可以放开始和结束日期的变量。这样timearr可以log看一下，他就是日期区间的每天日期了。然后你可以用这个timearr当参数传给echarts图表，用来当作X轴的data参数用，就可以自动生成区间了。

export  const mymixins={
    //用于echarts表日期区间自动排列开每天
    methods:{
        getAll(begin, end) {
            let arr1 = begin.split("-");   //这里可以换成/  就2020/01/1 这种
            let arr2 = end.split("-");
            let arr1_ = new Date();
            let arrTime = [];
            arr1_.setUTCFullYear(arr1[0], arr1[1] - 1, arr1[2]);
            let arr2_ = new Date();
            arr2_.setUTCFullYear(arr2[0], arr2[1] - 1, arr2[2]);
            let unixDb = arr1_.getTime();
            let unixDe = arr2_.getTime();
            for (let k = unixDb; k <= unixDe;) {
                arrTime.push(this.datetimeparse(k, 'YY-MM-DD'));
                k = k + 24 * 60 * 60 * 1000;
            }
            return arrTime;
        },
        // 时间格式处理
        datetimeparse(timestamp, format, prefix) {
            if (typeof timestamp == 'string') {
                timestamp = Number(timestamp)
            };
            //转换时区
            let currentZoneTime = new Date(timestamp);
            let currentTimestamp = currentZoneTime.getTime();
            let offsetZone = currentZoneTime.getTimezoneOffset() / 60; //如果offsetZone>0是西区，西区晚
            let offset = null;
            //客户端时间与服务器时间保持一致，固定北京时间东八区。
            offset = offsetZone + 8;
            currentTimestamp = currentTimestamp + offset * 3600 * 1000
        
            let newtimestamp = null;
            if (currentTimestamp) {
                if (currentTimestamp.toString().length === 13) {
                    newtimestamp = currentTimestamp.toString()
                } else if (currentTimestamp.toString().length === 10) {
                    newtimestamp = currentTimestamp + '000'
                } else {
                    newtimestamp = null
                }
            } else {
                newtimestamp = null
            };
            let dateobj = newtimestamp ? new Date(parseInt(newtimestamp)) : new Date()
            let YYYY = dateobj.getFullYear()
            let MM = dateobj.getMonth() > 8 ? dateobj.getMonth() + 1 : '0' + (dateobj.getMonth() + 1)
            let DD = dateobj.getDate() > 9 ? dateobj.getDate() : '0' + dateobj.getDate()
            let HH = dateobj.getHours() > 9 ? dateobj.getHours() : '0' + dateobj.getHours()
            let mm = dateobj.getMinutes() > 9 ? dateobj.getMinutes() : '0' + dateobj.getMinutes()
            let ss = dateobj.getSeconds() > 9 ? dateobj.getSeconds() : '0' + dateobj.getSeconds()
            let output = '';
            let separator = '/'
            if (format) {
                separator = format.match(/-/) ? '-' : '/'
                output += format.match(/yy/i) ? YYYY : ''
                output += format.match(/MM/) ? (output.length ? separator : '') + MM : ''
                output += format.match(/dd/i) ? (output.length ? separator : '') + DD : ''
                output += format.match(/hh/i) ? (output.length ? ' ' : '') + HH : ''
                output += format.match(/mm/) ? (output.length ? ':' : '') + mm : ''
                output += format.match(/ss/i) ? (output.length ? ':' : '') + ss : ''
            } else {
                output += YYYY + separator + MM + separator + DD
            }
            output = prefix ? (prefix + output) : output
        
            return newtimestamp ? output : ''
        }
    }
}

export default mymixins