yudao-dev/src/views/OperationalOverview/components/LineChart.vue

<!--
 * @Author: zwq
 * @Date: 2022-01-21 14:43:06
 * @LastEditors: zwq
 * @LastEditTime: 2022-01-24 13:27:41
 * @Description:
-->
<template>
  <div>
    <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
    <div :id="id" :class="className" :style="{ paddingTop: '1.25em', height: height + 'px', width:width}" />
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'

export default {
  name: 'OverviewBar',
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'OverviewLine'
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    beilv: {
      type: Number,
      default: 1
    },
    height: {
      type: String,
      default: '300px'
    },
    legendPosition: {
      type: String,
      default: 'center'
    },
    showLegend: {
      type: Boolean,
      default: false
    },
    legendData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0',
          containLabel: true
        },
        legend: {
          itemHeight: 10,
          itemWidth: 10,
          x: this.legendPosition, // 可设定图例在左、右、居中
          y: 'top', // 可设定图例在上、下、居中
          show: this.showLegend,
          data: this.legendData,
          top: 28,
          right: '1%',
          textStyle: {
            fontSize: 12,
            color: '#ced1d5'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: { show: false }, // 去除网格线
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#123341', // 左边线的颜色
              width: '1'// 坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: '#666a74' // 坐标值得具体的颜色

            }
          },
          data: ['1', '5', '15', '20', '25', '30']
        },
        yAxis: {
          type: 'value',
          splitLine: { show: false }, // 去除网格线
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#123341', // 左边线的颜色
              width: '1'// 坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: '#666a74' // 坐标值得具体的颜色

            }
          }
        },
        series: [
          {
            name: this.showLegend ? this.legendData[0].name : '',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3574a8',
                lineStyle: {
                  color: '#3574a8'
                }
              }
            },
            data: [120, 32, 101, 134, 90, 230, 210]
          },
          {
            name: this.showLegend ? this.legendData[1].name : '',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#9f3476',
                lineStyle: {
                  color: '#9f3476'
                }
              }
            },
            data: [270, 182, 191, 234, 290, 230, 210]
          },
          {
            name: this.showLegend ? this.legendData[2].name : '',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#30959d',
                lineStyle: {
                  color: '#30959d'
                }
              }
            },
            data: [160, 32, 301, 154, 190, 330, 210]
          },
          {
            name: this.showLegend ? this.legendData[3].name : '',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#5255be',
                lineStyle: {
                  color: '#5255be'
                }
              }
            },
            data: [150, 132, 21, 234, 190, 130, 320]
          },
          {
            name: this.showLegend ? this.legendData[4].name : '',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#8b4449',
                lineStyle: {
                  color: '#8b4449'
                }
              }
            },
            data: [210, 332, 201, 34, 290, 230, 320]
          },
          {
            name: this.showLegend ? this.legendData[5].name : '',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#a29848',
                lineStyle: {
                  color: '#a29848'
                }
              }
            },
            data: [20, 62, 101, 34, 190, 30, 120]
          },
          {
            name: this.showLegend && this.legendData[6] ? this.legendData[6].name : '',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#a29848',
                lineStyle: {
                  color: '#a29848'
                }
              }
            },
            data: [20, 62, 101, 34, 190, 30, 120]
          },
          {
            name: this.showLegend && this.legendData[7] ? this.legendData[7].name : '',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#a29848',
                lineStyle: {
                  color: '#a29848'
                }
              }
            },
            data: [20, 62, 101, 34, 190, 30, 120]
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.chart{
  margin-top: -3em
}
</style>