vue实现echarts甘特图

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

缘月叙文

1123人浏览 · 2024-03-27 18:50:13

缘月叙文 · 2024-03-27 18:50:13 发布

文章目录

使用场景

主要用于横坐标固定，比如一天24小时，这样就可以根据Y轴数据可正可负

速用示例版

可以直接将option 复制即可

option = {
  tooltip: {
    trigger: 'axis'
  },
   grid: {
    top: '10%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    show: true,
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    splitLine: {
      show: true
    },
    axisLabel: {
      padding: [0, 0, 0, -20]    // 四个数字分别为上右下左与原位置距离
    },
    data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00']
  },
  yAxis: {
    type: 'value',
    name: '单位(kW)',
    // scale: true,
    splitLine: {
      show: false
    },
    axisLabel: {
      formatter: '{value}',
      
    }
  },
  series: [
    {
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: false,
      lineStyle: {
        normal: {
          width: 10
        }
      },
      markPoint: {
        data: [
          {
            name: '最大值',
            type: 'max',
            valueIndex: 0
          }
        ]
      },
      data: [300, 300, 300, 300, 300, 300, 300],
    },
    {
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: false,
      lineStyle: {
        width: 10
      },
      markPoint: {
        data: [
          {
            name: '最大值',
            type: 'max',
            valueIndex: 0
          }
        ]
      },
      data: ['','','','','','', 500, 500, 500, 500, 500]
    },
    {
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: false,
      lineStyle: {
        normal: {
          width: 10
        }
      },
      markPoint: {
        data: [
          {
            name: '最大值',
            type: 'max',
            valueIndex: 0
          }
        ]
      },
      data: ['','','','','','','', '', '','',-100, -100,-100, -100,-100]
    },
    {
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: false,
      lineStyle: {
        normal: {
          width: 10
        }
      },
      markPoint: {
        data: [
          {
            name: '最大值',
            type: 'max',
            valueIndex: 0
          }
        ]
      },
      data: ['','','','','','','', '', '','','','','','','',200,200,200,200,200,200,200,200,200,200]
    }
  ]
};

在这里插入图片描述

来源：前端~初学者
业务需求比较相似，而且时间紧张，幸得此文

润雨细无声版

<div ref="strategyDomRef"
 style="width: 800px;
        height: 600px;"
>

import * as echarts from 'echarts'

data(){
	return{
		yAxis:[]
	}
},
mounted() {
 let apiData = [
      {
        startTime: '00:00',
        endTime: '05:00',
        value: 200,
      },
      {
        startTime: '05:00',
        endTime: '12:00',
        value: 400,
      },
      {
        startTime: '12:00',
        endTime: '18:00',
        value: -200,
      },
      {
        startTime: '18:00',
        endTime: '20:00',
        value: 300,
      },
      {
        startTime: '20:00',
        endTime: '24:00',
        value: 500,
      },
    ]
    this.dealArr(apiData)
	this.echartsDraw()
},
methods:{
	//数据处理
	dealArr(apiData) {
      let YAxis = []
      apiData.forEach((element) => {
      let dealArr = new Array(
        element.endTime == '24:00' ? 25 : parseInt(element.endTime) + 1
      ).fill(Number(element.value))
      let yItem = {
        name: ' ',
        type: 'line',
        showSymbol: false,
        endLabel: {
          show: true,
          formatter: '{c}',
          position: 'start',
          fontSize: 12,
        },
        lineStyle: {
          width: 10,
          color: '#36CFC9',
        },
        data: dealArr.fill('', 0, parseInt(element.startTime)),
      }
      YAxis.push(yItem)
    })
    this.yAxis = YAxis
    },
    //图表绘制
	echartsDraw(){
	 let charts = echarts.init(this.$refs.strategyDomRef)
            let option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return '<br/> 功率 ： ' + params[0].value
          },
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              //分割线
              color: '#C0C4CC',
              width: 1,
              type: 'dashed', //dotted：虚线 solid:实线
            },
          },
          axisLabel: {
            padding: [0, 0, 0, -20], // 四个数字分别为上右下左与原位置距离
          },
          data: [
            '00:00',
            '01:00',
            '02:00',
            '03:00',
            '04:00',
            '05:00',
            '06:00',
            '07:00',
            '08:00',
            '09:00',
            '10:00',
            '11:00',
            '12:00',
            '13:00',
            '14:00',
            '15:00',
            '16:00',
            '17:00',
            '18:00',
            '19:00',
            '20:00',
            '21:00',
            '22:00',
            '23:00',
            '24:00',
          ],
        },
        yAxis: {
          type: 'value',
          name: '单位(kW)',
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              //分割线
              color: '#C0C4CC',
              width: 1,
              type: 'dashed', //dotted：虚线 solid:实线
            },
          },
          axisLabel: {
            formatter: '{value}',
          },
        },
        series: this.yAxis,
      }
      charts.setOption(option, true)
      //清空画布，防止缓存
      charts.clear()
      //使用刚指定的配置项和数据显示图表。
      charts.setOption(option, true)
      window.addEventListener('resize', function () {
        charts.resize()
      })
	}
}

效果图
在这里插入图片描述

x时间轴非整点版

完成代码：

<template>
  <div ref="strategyDomRef"
       style="width: 1000px;
        height: 400px;">
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      yAxis: [],
      xAxis: [
        '00:00',
        '01:00',
        '02:00',
        '03:00',
        '04:00',
        '05:00',
        '06:00',
        '07:00',
        '08:00',
        '09:00',
        '10:00',
        '11:00',
        '12:00',
        '13:00',
        '14:00',
        '15:00',
        '16:00',
        '17:00',
        '18:00',
        '19:00',
        '20:00',
        '21:00',
        '22:00',
        '23:00',
        '24:00',
      ],
    }
  },
  mounted() {
    let apiData = [
      {
        startTime: '00:00',
        endTime: '05:52',
        value: 200,
      },
      {
        startTime: '05:52',
        endTime: '12:01',
        value: 400,
      },
      {
        startTime: '12:01',
        endTime: '18:00',
        value: -200,
      },
      {
        startTime: '18:00',
        endTime: '20:12',
        value: 300,
      },
      {
        startTime: '20:12',
        endTime: '24:00',
        value: 500,
      },
    ]
    this.dealArr(apiData)
    this.echartsDraw()
  },
  methods: {
    //数据处理
    dealArr(apiData) {
      // 将非整点数据追加到x轴数据中去
      apiData.forEach((element1, index) => {
        if (index > 0) {
          const checkIndex = this.xAxis.findIndex((element2) => {
            return parseInt(element1.startTime) === parseInt(element2)
          })
          this.xAxis.splice(checkIndex + 1, 0, element1.startTime)
        }
      })
      let oldIndex = 0
      let newIndex = 0
      apiData.forEach((item3) => {
        const checkIndex2 = this.xAxis.findIndex((element4) => {
          return item3.endTime === element4
        })
        newIndex = checkIndex2
        // 先将Y轴数据按照时间顺序添加数据
        let arr1 = new Array(newIndex + 1).fill(Number(item3.value))
        let yItem = {
          name: ' ',
          type: 'line',
          showSymbol: false,
          endLabel: {
            show: true,
            formatter: '{c}',
            position: 'start',
            fontSize: 12,
          },
          lineStyle: {
            width: 10,
            color: '#36CFC9',
          },
          // 再将startTime时间之前的数据设置成‘’
          data: arr1.fill('', 0, oldIndex),
        }
        this.yAxis.push(yItem)
        const temp = newIndex
        oldIndex = temp
      })
    },
    //图表绘制
    echartsDraw() {
      let charts = echarts.init(this.$refs.strategyDomRef)
      let option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return params[0].axisValue + '<br/> 功率 ： ' + params[0].value
          },
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              //分割线
              color: '#C0C4CC',
              width: 1,
              type: 'dashed', //dotted：虚线 solid:实线
            },
          },
          axisLabel: {
            padding: [0, 0, 0, -20], // 四个数字分别为上右下左与原位置距离
          },
          data: this.xAxis,
        },
        yAxis: {
          type: 'value',
          name: '单位(kW)',
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              //分割线
              color: '#C0C4CC',
              width: 1,
              type: 'dashed', //dotted：虚线 solid:实线
            },
          },
          axisLabel: {
            formatter: '{value}',
          },
        },
        series: this.yAxis,
      }
      charts.setOption(option, true)
      //清空画布，防止缓存
      charts.clear()
      //使用刚指定的配置项和数据显示图表。
      charts.setOption(option, true)
      window.addEventListener('resize', function () {
        charts.resize()
      })
    },
  },
}
</script>

在这里插入图片描述

GitHub 加速计划 / vu / vue

207.54 K

33.66 K

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：2 个月前 )

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前

e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m