newcpms/ui/src/views/monitor/elec/echart/analysisChart/analysisChartBottomLeft1.vue

<template>
    <div>
        <div id="analysisChartBottomLeft1" style="width:3.4rem;height:2.2rem;"></div>
    </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
    data() {
        return {
            chart: null
        }
    },
    mixins: [echartMixins],
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft1"), 'dark');
            let option = {
                backgroundColor: 'transparent',
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        color: '#808080'
                    },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color: 'rgba(255,255,255,.7)'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Waste Water', 'Rain Water',],
                    axisLabel: {
                        color: '#808080'
                    },
                },
                series: [
                    {
                        name: '实时 PH',
                        type: 'bar',
                        data: [6,9],
                        itemStyle: {
                            normal: {
                                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: "rgba(255, 189, 91, 0.8)" },
                                    { offset: 1, color: "rgba(255, 189, 91, 0.3)" }
                                ])
                            }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                fontSize: 25,
                                fontWeight: 'bold',
                                color: '#fff'
                            }
                        }
                    },
                    {
                        name: '7 天平均 PH',
                        type: 'bar',
                        data: [11, 7],
                        color: '#A8CBFF',
                        itemStyle: {
                            normal: {
                                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: "rgba(100, 100, 100, 0.8)" },
                                    { offset: 1, color: "rgba(100, 100, 100, 0.3)" }
                                ])
                            }
                        }
                    },
                ]
            };
            this.chart.setOption(option);
        }
    },
    destroyed() {
        window.onresize = null;
    }
}
</script>

<style>

</style>