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(obj) {
            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: 14,
                        color: '#fff'
                    }
                },
                grid: {
                    top: '30%',
                    left: '6%',
                    right: '6%',
                    bottom: '5%',
                    containLabel: true,
                },
                color: ['#186bb8', '#4ee1ac', '#efc943'],

                legend: {
                    data: obj.legend_data,
                    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: obj.x_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: obj.yAxis?obj.yAxis[0].name:'项目个数/个',
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 12,
                        padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
                    },
                    minInterval:obj.yAxis?undefined: 1, // 设置y轴的最小间隔为1
                    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: obj.yAxis?obj.yAxis[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: [],
            }
            if(!obj.result)
              obj.result = [[],[],[],[] ];
              if(!obj.legend_data)
              obj.legend_data = ['','','','' ];
            if(!obj.legendmap)
            obj.legendmap = [
                { type: "line", data: obj.line_data },
                { type: "bar",  data: obj.result[0] },
                { type: "bar",  data: obj.result[1] },
                { type: "bar",  data: obj.result[2] },
            ];
            obj.legendmap.forEach( (mapele,i) => {
        if (mapele.type=='line') {
          option.series.push({
            name: obj.legend_data[i],
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: mapele.color||'#FFCC64'  // 折线的颜色
              }
            },
            yAxisIndex: 1, // 指定使用第二个Y轴
            data: mapele.data||obj.result[i],
          });
        }else{
            option.series.push({
                        name: obj.legend_data[i],
                        type: 'bar',
                        stack: '渠道'+i,//stack相同上下显示
                        barWidth: 14,
                        data: mapele.data||obj.result[i],
        });
    }   
});
            this.chart.setOption(option);
    //         this.chart.on("legendselectchanged", function (params) {
    //     let iseyes = params.selected[params.name];
    //     _this.$emit("echartClick", params.name, { iseyes });
    //   });
      this.chart.on("click", function (params) {
        _this.$emit("echartClick", params.name, { color: params.color,sIndex:params.seriesIndex });
      });

        },
        setOptions(obj) {
            this.init_echart(obj);
        }
    },
    beforeCreate() { }, //生命周期 - 创建之前
    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
    beforeMount() { }, //生命周期 - 挂载之前
    mounted() {
        const that = this;
        this.$nextTick((res) => {
            // let obj = {
            //     legend_data: ['临时用地面积', '正常使用', '剩余1个月', '已到期'],
            //     x_data: ['崖州区', '天涯区', '吉阳区', '海棠区'],
            //     line_data: [110, 90, 120, 70, 60],
            //     result: [[12, 12, 12, 12, 1, 2], [24, 12, 12, 0, 1, 2], [12, 0, 0, 24, 21]]
            // }
            // this.setOptions(obj);


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