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

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

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

export default {
    components: {},
    data() {
        return {};
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        init_echart(legendData, xdata, result) {
            const _this = this;
            _this.chart = echarts.init(this.$refs.ThreeStackedBarAndLine);

            let y1Data = [110, 90, 120, 70, 60]
            let option = {
                backgroundColor: 'rgba(0, 0, 0, 0)',
                // tooltip: {
                //     trigger: 'axis',
                //     extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
                //     backgroundColor: '#3A4667', // 背景
                //     borderColor: '#3A4667',
                //     textStyle: {
                //         color: '#fff'
                //     },
                // },
                tooltip: {
                    backgroundColor: 'RGBA(20, 106, 178, 0.4)',
                    trigger: "axis",
                    textStyle: { fontSize: '100%' },
                    formatter: params => {
                        let rander = params.map(item =>
                            `
                        
                    <div style='
                        border:none;
                        border-radius:3px;
                        color:#FFF;
                        font-size:12px
                        '>
                            ${item.seriesName}: ${item.value}
                    </div>`).join('')
                        return rander
                    }
                },
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '3%',
                    bottom: '5%',
                    containLabel: true,
                },
                color: ['#efc943', '#4ee1ac', '#186bb8'],

                legend: {
                    data: ['临时用地面积', '正常使用', '剩余1个月', '已到期',],

                    top: '1%',
                    // textStyle: {
                    //     color: "#666666"
                    // },
                    textStyle: {
                        fontSize: 12,
                        color: '#fff',
                        padding: [0, 0, 0, 0],
                        rich: {
                            a: {
                                verticalAlign: 'middle',
                            },
                        },
                    },
                    itemWidth: 15,
                    itemHeight: 10,

                    itemGap: 10
                },
                xAxis: [{
                    type: 'category',
                    data: ['崖州区', '育才区', '天涯区', '吉阳区', '海棠区'],
                    axisLabel: {
                        show: true,
                        fontSize: 12,
                        color: '#fff',
                        align: 'center',
                        verticalAlign: 'top',
                    },
                    axisLine: {
                        show: true,

                        lineStyle: {
                            width: 1,
                            color: 'rgba(239, 247, 253, .7)'
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                }
                ],
                yAxis: [{
                    name: '',
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 12,
                        padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        fontSize: 10,
                        color: '#fff',
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(239, 247, 253, .1)'
                        }
                    },
                }, {
                    name: '',
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 12,
                        padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        fontSize: 10,
                        color: '#fff',
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(239, 247, 253, .1)'
                        }
                    },
                }],
                series: [
                
                    {

                        name: "临时用地面积",
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: '#FFCC64'  // 折线的颜色
                            }
                        },
                        yAxisIndex: 1, // 指定使用第二个Y轴  
                        data: y1Data,
                    }
                    , {
                        name: '剩余1个月',
                        type: 'bar',
                        stack: '渠道1',
                        barWidth: 14,

                        data: [12, 12, 12, 12, 1, 2],
                    },
                    {
                        name: '已到期',
                        type: 'bar',
                        stack: '渠道1',
                        barWidth: 14,

                        data: [24, 12, 12, 0, 1, 2],
                    },
                    {
                        name: '正常使用',
                        barWidth: 14,

                        type: 'bar',
                        barWidth: 8,
                        stack: '渠道1',
                        data: [12, 0, 0, 24, 21],
                    },
                ],
            }

            this.chart.setOption(option);

        },
        setOptions(legendData, xdata, result) {
            this.init_echart(legendData, xdata, result);
        }
    },
    beforeCreate() { }, //生命周期 - 创建之前
    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
    beforeMount() { }, //生命周期 - 挂载之前
    mounted() {
        const that = this;
        this.$nextTick((res) => {
            this.init_echart();

        })
    }, //生命周期 - 挂在完成
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroy() { },//生命周期 - 销毁完成
    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
};
</script>
<style  scoped>
#ThreeStackedBarAndLine {
    left: 0rem;
    top: 0.1rem;
    width: 21rem;
    height: 12rem;
}
</style>