real3d-portalsite/src/views/cockpit/common/Graph3D.vue

<template>
    <div id="BarGraph3D" ref="BarGraph3D"></div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
    components: {},
    props: {
        legendData: {
            type: Array,
        },
        xdata: {
            type: Array,
        },
        result: {
            type: Array,
        }
    },
    watch: { // 监听到数据然后赋值
        legendData(oldval, newval) {
            this.ChangeData()
        },
        xdata(oldval, newval) {
            this.ChangeData()
        }, result(oldval, newval) {
            this.ChangeData()
        },
        deep: true
    },
    data() {
        return {
            chart: null,
            option: null,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        init_3DBarGraph_echart(legendData, xdata, result) {
            const _this = this;
            _this.chart = echarts.init(this.$refs.BarGraph3D);
            // Mock数据
            const mockData = {
                // xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
                xdata: xdata,

                result: result
            }

            const color = [
                [{ offset: 0, color: 'rgba(183, 117, 12, 0.8)' }, { offset: 0.5, color: 'rgba(183, 117, 12, 0.8)' }, { offset: 0.5, color: 'rgba(249, 180, 71, 0.8)' }, { offset: 1, color: 'rgba(249, 180, 71, 0.8)' }],

                [{ offset: 0, color: 'rgba(34, 129, 209, 0.8)' }, { offset: 0.5, color: 'rgba(34, 129, 209, 0.8)' }, { offset: 0.5, color: 'rgba(97, 173, 237, 0.8)' }, { offset: 1, color: 'rgba(97, 173, 237, 0.8)' }],

            ]
            const color2 = ['rgba(34, 129, 209, 0.8)', 'rgba(34, 129, 209, 0.8)',]

            const tooltip = {
                backgroundColor: 'RGBA(20, 106, 178, 0.4)',
                trigger: "axis",
                textStyle: {
                    fontSize: 14,
                    color: '#fff'
                },
                formatter: function (params) {
                    var res = `${params[0].name} <br/>`
                    for (const item of params) {
                        console.log('item: ', item);
                        if (item.value > 0) {
                           return res += `</span> ${item.seriesName} ：${item.value}<br/>`
                        }
                    }

                }
            }
            const legend = {
                data: legendData,      //图例名称

                textStyle: { fontSize: 12, color: '#fff' },
                itemWidth: 24,
                itemHeight: 15,
                itemGap: 15,
                top: '5%',
                right: '2%',
                selectedMode: false
            }
            const grid = { top: '10%', left: '5%', right: '10%', bottom: '15%' }
            // xAxis
            const xAxis = {
                axisTick: { show: false },
                axisLine: { lineStyle: { color: '#BCD3E5' } },
                axisLabel: {
                    textStyle: { fontSize: 12, color: '#BCD3E5' },
                },
                axisLabel: {
                    interval: 0,
                    formatter: function (value) {
                        // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
                        if (value.length > 4) {
                            return `${value.slice(0, 4)}...`;
                        } else {
                            return value;
                        }
                    },
                },
                data: mockData.xdata,
            }

            // yAxis
            const yAxis = [{
                axisTick: { show: false },
                axisLine: { show: false },
                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
                axisLabel: { show: false, textStyle: { fontSize: 14, color: '#fff' } }
            }, {
                show: false,
                splitLine: { show: false },
                axisLine: { show: false },
                axisTick: { show: false },
            }]
            const diamondData = mockData.result.reduce((pre, cur, index) => {
                pre[index] = cur.data.map((el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0))
                return pre
            }, [])

            let series = mockData.result.reduce((p, c, i, array) => {
                p.push({
                    z: i + 1,
                    stack: '总量',
                    type: 'bar',
                    name: c.name,
                    barGap: 18,
                    barWidth: 18,
                    data: c.data,
                    label: {
                        show: true,
                        position: "top",
                        fontSize: "10",
                        color: "#fff",
                        formatter: function (params) {
                            if (params.value === 0) {
                                return ''; // 或者 return null;  
                            }
                            // 如果不为0，则按需要返回标签内容  
                            return params.value;
                        }
                    },
                    itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
                }, {
                    z: i + 10,
                    type: 'pictorialBar',
                    symbolPosition: 'end',
                    symbol: 'diamond',
                    symbolOffset: [0, '-50%'],
                    symbolSize: [18, 12],
                    data: diamondData[i],
                    itemStyle: { color: color2[i] },
                    tooltip: { show: false },

                })

                // 是否最后一个了？
                if (p.length === (array.length) * 2) {
                    p.push({
                        z: array.length * 2,
                        type: "pictorialBar",
                        symbolPosition: "start",
                        data: mockData.result[0].data,
                        symbol: "diamond",
                        symbolOffset: ["0%", "50%"],
                        symbolSize: [18, 10],
                        itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[0] } },
                        tooltip: { show: false },

                    })
                    return p
                }

                return p
            }, [])

            const dataZoom = [{
                show: false,
                type: 'slider',
                startValue: 0,
                endValue: 7,
                moveOnMouseWheel: true,
                moveOnMouseMove: true,
                zoomOnMouseWheel: false,
            }]

            _this.option = {

                tooltip, legend, xAxis, yAxis, series, grid, dataZoom, backgroundColor: 'rgba(0, 0, 0, 0)'
            }

            this.chart.setOption(this.option);

        },
        setOptions(legendData, xdata, result) {
            this.init_3DBarGraph_echart(legendData, xdata, result);
        }
    },
    beforeCreate() { }, //生命周期 - 创建之前
    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
    beforeMount() { }, //生命周期 - 挂载之前
    mounted() {
        const _this = this;
        // this.init_3DBarGraph_echart(_this.$props.legendFlag, _this.$props.xdata, _this.$props.result);
    }, //生命周期 - 挂在完成
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroy() { },//生命周期 - 销毁完成
    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
};
</script>
<style  scoped>
#BarGraph3D {
    left: 0rem;
    top: 0.1rem;
    width: 27rem;
    height: 11rem;
}
</style>