优化3d图表

whycwx

2021-03-04 be139ef4e8c2e8062912d737e1d645ffecf5aa31

 src/components/charts/histogramAlternating.vue

@@ -1,7 +1,11 @@
<template>
  <div class="echarts-wrapper">
  <div class="echarts-wrapper echartsAlternating">
    <div class="echarts-content" ref="alternating">

    </div>
    <div class="titleShow">
        <p><i></i><span class="textTitle">告警机房总数:</span><span class="textValue">150</span></p>
        <p><i></i><span class="textTitle">告警机房数比例:</span><span class="textValue">50</span></p>
    </div>
  </div>
</template>
@@ -53,7 +57,7 @@
        }
        */ 
        
        const sideData = data.dataList.map(item => item + 1.5);//右边的面稍高一点
    const sideData = data.dataList.map(item => item + 1);//右边的面稍高一点

    let option = {
            // backgroundColor: "#ffffff",
@@ -69,27 +73,30 @@
                //坐标轴
                axisLine: {
                    lineStyle: {
                        color: '#000000'
                        color: '#ccc'
                    }
                },
                //坐标值标注
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#000',
                        color: '#fff',
                    }
                }
            },
            yAxis: {
                //坐标轴
                axisLine: {
                    show: true
                    show: true,
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                //坐标值标注
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#000',
                        color: '#fff',
                    }
                },
                //分格线
@@ -200,5 +207,38 @@
</script>

<style scoped>
    .echartsAlternating{
        position:relative;
    }
    .titleShow{
        width: 100%;
        height: 100px;
        position: absolute;
        top: 3%;
        right: 10%;
        text-align: right;

    }
    .titleShow i{
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgb(246,127,33);
        margin-right: 5px;
        margin-bottom: 3px;
    }
    .titleShow .textTitle{
        display: inline-block;
        width: 120px;
        text-align: right;
        color: rgb(0,178,224);
    }
    .titleShow .textValue{
        display: inline-block;
        width: 80px;
        /* text-align: left; */
        text-align: left;
        color: rgb(246,127,33);
    }
</style>