BigScreenUI/src/components/echartsCom/barCom.vue

<template>
    <div style="width: 100%; height: 100%" :id="'BarEchartDom' + propsVal.domId"></div>
</template>
  
<script setup lang='ts'>
import * as echarts from "echarts";
let myChart: any = null
const propsVal = defineProps({
    domId: {//加个唯一标识 必须是唯一的
        type: Number,
        default: Math.random()
    },
    title: {
        type: String,
        default: '柱状图'
    },
    titleStyle: {
        type: Object,
        default: {}
    },
    legendDataList: {//图例组件的数据
        type: Array,
        default: []
    },
    legendProps: {//图例组件的基本配置
        type: Object,
        default: {
            right: 30,
            top: 30,
            itemHeight: 10,
            itemGap: 10,
            icon: "circle",//可选 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            textStyle: {//文字颜色
                color: "#333333"
            }
        }
    },
    grid: {//网格的配置
        type: Object,
        default: {
            top: "25%",//组件距离容器 上侧 的距离
            left: "3%",//组件距离容器 左侧 的距离
            right: "4%",//组件距离容器 右侧 的距离
            bottom: "8%",//组件距离容器 下侧 的距离
            containLabel: true,//组件距离容器 上侧 的距离
        }
    },
    FeatureList: {//工具配置项显示 
        type: Array,
        default: []//['saveAsImage','restore','dataView',"dataZoom",'magicType','brush']
    },
    seriseData: {
        type: Array,
        default: []
    },
    xAxisData: {//x 坐标轴数据 
        type: Array,
        default: []
        //'value' 数值轴，适用于连续数据
        // 'category'
        // time 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度
        // 'log' 对数轴。适用于对数数据。
    },
    xAxisProps: {//x 坐标轴配置
        type: Object,
        defualt: {
            type: "category",
            boundaryGap: false,
        }
    },
    yAxisProps: {//y 坐标轴配置
        type: Object,
        default: {
            type: "value",
        }
    },
    yAxisData: {//x 坐标轴数据 
        type: Array,
        default: []
        //'value' 数值轴，适用于连续数据
        // 'category'
        // time 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度
        // 'log' 对数轴。适用于对数数据。
    },
    itemStyle: {//柱状图的默认颜色 渐变
        type: Object,
        default: {

        }
    },
    emphasisItemStyle: {//柱状图的高亮颜色 渐变
        type: Object,
        default: {

        }
    },
    stackFlag: {//是否显示柱状图的 柱条顶部数据
        type: Boolean,
        default: false
    },
    stackLabel: {// 柱条顶部数据 样式
        type: Object,
        default: {

        }
    },
    borderRadius: {//显示圆角
        type: Number,
        default: 0
    },
    barWidth: {
        type: Number,
        default: 0
    },
    itemBackgroundStyle: {
        type: String,
        default: ""
    },
    tooltipProps: {
        type: Object,
        default: {

        }
    },
    formatCallBack: {//提示数据格式化
        type: Function,
        default: () => { }
    }
})
onMounted(() => {
    const BarEchartDomEl = document.getElementById("BarEchartDom" + propsVal.domId);
    myChart = echarts.init(BarEchartDomEl);
    console.log("mychart-bar-003", propsVal)
    myChart.setOption(option);

})
const handleSeriesData = () => {

    let seriesData = []

    let resultItemColor = Array.isArray(propsVal.itemStyle) ? new echarts.graphic.LinearGradient(0, 0, 1, 1, propsVal.itemStyle) : propsVal.itemStyle
    let resultEmphasisColor = Array.isArray(propsVal.emphasisItemStyle) ? new echarts.graphic.LinearGradient(0, 0, 1, 1, propsVal.emphasisItemStyle) : propsVal.emphasisItemStyle
    // LinearGradient(0, 0, 1, 1, 控制渐变方向
    const item: any = {
        type: 'bar',
        showBackground: false,
        stack: 'Total',
        // label: {
        //     show: true,
        //     position: 'top'
        // },
        itemStyle: {
            borderRadius: propsVal.borderRadius,
            color: resultItemColor
        },
        emphasis: {
            itemStyle: {
                color: resultEmphasisColor
            }
        },
        backgroundStyle: {},
        data: propsVal.seriseData
    }
    item.label = propsVal.stackLabel
    if (propsVal.barWidth) {
        item.barWidth = propsVal.barWidth
    }
    if (propsVal.itemBackgroundStyle) {
        item.showBackground = true
        item.backgroundStyle.color = propsVal.itemBackgroundStyle
    }
    seriesData.push(item)
    return seriesData
}
const option = {
    tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(255,255,255,0)",
        borderColor: 'rgba(255,255,255,0)',
        shadowBlur: 0,
        shadowColor: 'rgba(0, 0, 0, 0)'
    },
    title: {
        text: propsVal.title,
        textStyle: propsVal.titleStyle,
        padding: [20, 10, 0, 43]
    },
    grid: propsVal.grid,
    xAxis: {
        data: propsVal.xAxisData,
        ...propsVal.xAxisProps
    },
    yAxis: {
        ...propsVal.yAxisProps,
        data: propsVal.yAxisData
    },
    series: handleSeriesData(),
    formatter: function (params: any) {
        console.log("parmas", params)
        return propsVal.formatCallBack(params)
    }
};
</script>
  
<style></style>