Echarts公共样式

196 阅读2分钟
// echarts图形颜色
// echarts dark主题颜色
const darkColor = [  "#dd6b66",  "#759aa0",  "#e69d87",  "#8dc1a9",  "#ea7e53",  "#eedd78",  "#73a373",  "#73b9bc",  "#7289ab",  "#91ca8c",  "#f49f42"]
// 蓝 黄 红 紫 绿 橙 淡蓝 淡黄 淡红 淡紫 淡绿 淡橙
export const COLOR = [  '#30A9DE',  '#EFDC05',  '#E53A40',  '#A593E0',  '#5CAB7D',  '#F6B352',  ...darkColor,  ...darkColor,  ...darkColor,  ...darkColor,  ...darkColor,  ...darkColor]
// 供基线流速/实时流速使用的颜色(调换了COLOR[0]COLOR[1]的顺序):
// 解决时间轴数据阴影指定实时流速(legend[1])功能(调整了series的顺序,将legend[1]放第一位),且保证基线流速(legend[0])还是为蓝色(即原来legend颜色不变)
export const BLANDRTBPSCOLOR = [  '#EFDC05',  '#30A9DE',  '#E53A40',  '#A593E0',  '#5CAB7D',  '#F6B352',  ...darkColor,  ...darkColor,  ...darkColor,  ...darkColor,  ...darkColor,  ...darkColor,]

export function getKeyByName(obj, name){
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            if(obj[key] === name){
                return key
            }
        }
    }
}

export const legendTextStyle = {
  default: {
    textStyle: {
      color: '#606266'
    },
  },
  dark: {
    textStyle: {
      color: 'rgba(255,255,255,0.65)'
    },
  },
  oldDark: {
    textStyle: {
      color: 'rgba(255,255,255,0.65)'
    },
  }
}

export const legendPageStyle = {
  default: {
    pageIconColor: '#2f4554',
    pageIconInactiveColor: '#aaa',
    pageTextStyle: {
      color: '#606266'
    },
  },
  dark: {
    pageIconColor: '#aaa',
    pageIconInactiveColor: '#2f4554',
    pageTextStyle: {
      color: '#aaa'
    },
  },
  oldDark: {
    pageIconColor: '#aaa',
    pageIconInactiveColor: '#2f4554',
    pageTextStyle: {
      color: '#aaa'
    },
  }
}

export const axisStyle = {
  default: {
    nameTextStyle: {
      color: '#606266',
    },
    axisLabel: {
      textStyle: {
        color: '#606266',
      },
    },
    axisLine: {
      lineStyle: {
        color: '#606266',
      },
    },
    splitLine: {
      lineStyle: {
        color: '#606200',
      },
    }
  },
  dark: {
    nameTextStyle: {
      color: 'rgba(255,255,255,0.65)',
    },
    axisLabel: {
      textStyle: {
        color: 'rgba(255,255,255,0.65)',
      },
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255,255,255,0.65)',
      },
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255,255,255,0.35)',
      },
    }
  },
  oldDark: {
    nameTextStyle: {
      color: 'rgba(255,255,255,0.65)',
    },
    axisLabel: {
      textStyle: {
        color: 'rgba(255,255,255,0.65)',
      },
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255,255,255,0.65)',
      },
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255,255,255,0.35)',
      },
    }
  }
}

export const dataZoomStyle = {
  default: {},
  dark: {
    textStyle: {
      color: '#8392A5',
    },
    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
    handleSize: '80%',
    dataBackground: {
      areaStyle: {
        color: '#8392A5',
      },
      lineStyle: {
        opacity: 0.8,
        color: '#8392A5',
      },
    },
    handleStyle: {
      color: '#fff',
      shadowBlur: 3,
      shadowColor: 'rgba(0, 0, 0, 0.6)',
      shadowOffsetX: 2,
      shadowOffsetY: 2,
    },
  },
  oldDark: {
    textStyle: {
      color: '#8392A5',
    },
    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
    handleSize: '80%',
    dataBackground: {
      areaStyle: {
        color: '#8392A5',
      },
      lineStyle: {
        opacity: 0.8,
        color: '#8392A5',
      },
    },
    handleStyle: {
      color: '#fff',
      shadowBlur: 3,
      shadowColor: 'rgba(0, 0, 0, 0.6)',
      shadowOffsetX: 2,
      shadowOffsetY: 2,
    },
  }
}