iot-front-ui/src/utils/constant.js

import { graphic } from 'echarts';

// 常量-echarts滚动轴设置
const ECHARTS_OPTION_DATAZOOM = [
    {
        type: 'slider',
        start: 0,
        end: 100,
        height: '12px',
        showDetail:false,
        bottom: '0',
        borderRadius:'50%',
        moveHandleSize: 0,
        moveHandleStyle: {},
        handleSize: '80%',
        handleIcon:'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
        handleStyle: {
            borderWidth: 0,
            color: 'rgba(132,176,222,0.5)'
        }
    },
    {
        type: 'inside',
        start: 0,
        end: 100,
    }
]

let echartsColors = [
    '#178FE6',
    '#3CC2AC',
    '#EE8242',
]
let echartsGradientColors = [
    getEchartsGradientColor('#8BCFFF'),
    getEchartsGradientColor('#7EE6D4'),
    getEchartsGradientColor('#FFB78D'),
]

function getEchartsGradientColor(color) {
    return new graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: color // 0% 处的颜色
    }, {
        offset: 0.8,
        color: '#ffffff' // 100% 处的颜色
    }], false)
}


const ECHARTS_BAR_WIDTH = '30%'

// 常量-时间范围快捷搜索条件
const PICKER_OPTIONS = {
    shortcuts: [
        {
            text: "去年十二个月",
            onClick(picker) {
                const end = new Date(new Date().getFullYear() - 1, 11);
                const start = new Date(new Date().getFullYear() - 1, 0);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            text: "今年至今",
            onClick(picker) {
                const end = new Date();
                const start = new Date(new Date().getFullYear(), 0);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            text: "最近十二个月",
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setMonth(start.getMonth() - 11);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            text: "最近六个月",
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setMonth(start.getMonth() - 5);
                picker.$emit("pick", [start, end]);
            }
        }
    ]
}

// 核心指标中的碳配额存量中的不同等级对应的icon颜色(1：绿色、2：黄色、3：红色)
const COLOR_LEAVEL = {
    1: "#67C23A",
    2: "#E6A23C",
    3: "#F56C6C"
}

// 折线图可选颜色
const ECHART_LINE_COLOR_LIST = ["#303133", "#606266", "#909399", "#C0C4CC", "DCDFE6"];
export default {
    PICKER_OPTIONS, COLOR_LEAVEL, ECHART_LINE_COLOR_LIST, ECHARTS_OPTION_DATAZOOM, ECHARTS_BAR_WIDTH,
    echartsColors, echartsGradientColors
}