Echarts实现甘特图功能（完整实现代码）

爬不动的猫

已于 2024-01-08 09:41:42 修改

阅读量2.1k

点赞数 7

分类专栏：业务功能文章标签： echarts 甘特图 javascript

于 2023-12-12 14:18:20 首次发布

本文链接：https://blog.csdn.net/weixin_49219273/article/details/134948268

版权

<template>
  <div class="pwgh-card">
    <div class="chart" ref="chart"></div>
  </div>
</template>
<script>
import {
    mapActions, mapState, mapGetters } from 'vuex'
import {
    chunk, slice } from 'lodash'

import * as echarts from 'echarts'

export default {
   
  name: 'LinesCard',
  props: ['list', 'deptType'],
  data() {
   
    return {
   }
  },
  created() {
   },
  mounted() {
   
    this.initChart()
    this.refreshChart()
  },
  watch: {
   
    list() {
   
      this.initChart()
      this.refreshChart()
    },
    theme() {
   
      this.initChart()
      this.refreshChart()
    },
  },
  computed: {
   
    ...mapState(['theme']),
  },
  methods: {
   
    initChart() {
   
      echarts.registerTheme('light', {
   
        color: ['#19D4AE', '#D9D9D9'],
        title: {
   
          textStyle: {
   
            color: '#464646',
          },
        },
        legend: {
   
          textStyle: {
   
            color: '#4D4D4D',
          },
        },
        categoryAxis: {
   
          axisLabel: {
   
            show: true,
            color: '#4D4D4D',
          },
        },
        valueAxis: {
   
          axisLabel: {
   
            show: true,
            color: '#4D4D4D',
          },
        },
        line: {
   
          itemStyle: {
   
            color: '#5AB1EF',
          },
          areaStyle: {
   
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
   
                offset: 0,
                color: 'rgba(128, 186, 231, 0)',
              },
              {
   
                offset: 1,
                color: 'rgba(90, 177, 239, 0.76)',
              },
            ]),
          },
        },
      })
      echarts.registerTheme('green', {
   
        color: ['#19D4AE', '#D9D9D9'],
        title: {
   
          textStyle: {
   
            color: '#fff',
          },
        },
        legend: {
   
          textStyle: {
   
            color: '#fff',
          },
        },
        categoryAxis: {
   
          axisLabel: {
   
            show: true,
            color: '#fff',
          },
        },
        valueAxis: {
   
          axisLabel: {
   
            show: true,
            color: '#fff',
          },
          nameTextStyle: {
   
            color: '#fff',
          },
        },
        bar: {
   
          itemStyle: {
   
            // color: 'rgba(118, 201, 85, 1)'
          },
          label:</