kanban-vue/src/components/zzchart/up2Chart/index.vue

<template>
    <div>
        <Echart
                :options="options"
                id="up2Chart"
                height="200px"
                width="100%"
        ></Echart>
    </div>
</template>

<script>
    import Echart from '@/common/echart'
    export default {
        data() {
            return {
                options: {},
                // 定义颜色
            }
        },
        components: {
            Echart
        },
        props: {
          bardata: {
                type: Object,
                default: () => ({})
            }
        },
        watch: {
          bardata: {
                handler(newData) {
                    this.options = {
                      tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                          type: 'shadow'
                        }
                      },
                      legend: {
                        bottom: "80%",
                        textStyle: {
                          fontSize: 20
                        }
                      },
                      grid: {
                          left: '3%',
                          right: '4%',
                          bottom: 20,
                          containLabel: true
                      },
                      xAxis: {
                          type: 'value',
                          max: newData.max
                      },
                      // 下方Y轴
                      yAxis: {
                          type:'category',
                          data:newData.yAxis,
                          axisLabel: {
                            fontSize: 25,
                           // fontWeight: "bold"
                          }
                      },
                      series: [
                          {
                              name: '计划数',
                              type: 'bar',
                              data: newData.planData,
                              label: {
                                show: true,
                                position: 'right',
                                fontSize:16,
                                fontWeight: "bold",
                                color:  "inherit"
                              },
                            barWidth: 16,
                            itemStyle: {
                              color: "#ABA5FC"
                            },
                          },
                          {
                            name: '实际数',
                            type: 'bar',
                            data: newData.actData,
                            label: {
                              show: true,
                              position: 'right',
                              fontSize:16,
                              fontWeight: "bold",
                              color:  "inherit"
                            },
                            barWidth: 16,
                            itemStyle: {
                              color: "#8CF9B8"
                            },
                          }
                      ]
                    }
                },
                immediate: true,
                deep: true
            }
        }
    }
</script>