vue echarts hooks 封装
vue中echarts hooks的封装，监听主体的变化，监听窗口大小的变化。监听元素大小的变化
- hooks
import echarts from '@/echart/themeInit'
import { debounce } from '@/utils/dehounce'
import { useAppStore } from '@/pinia'
const useEchartHooks = (id, groupId) => {
const appStore = useAppStore()
appStore.$subscribe(e => {
if (e.storeId === 'app') {
changeChartTheme()
}
})
let chart = null
let options = null
const renderChart = val => {
options = val
if (!chart) {
chart = echarts.init(document.getElementById(id), appStore.theme)
chart.group = groupId
}
// nextTick防止样式未组装完成就开始渲染页面
nextTick(() => {
chart.setOption(options, true)
})
}
const getEchart = () => {
return chart
}
const changeChartTheme = () => {
chart.dispose()
chart = echarts.init(document.getElementById(id), appStore.theme)
chart.setOption(options, true)
}
const state = reactive({
sidebarEle: null,
mySider: null,
resize: null,
tabEle: null,
tabObserver: null
})
const sidebarResize = e => {
if (e.propertyName === 'width') {
state.resize()
}
}
const tabsResize = () => {
nextTick(() => {
chart.resize()
})
}
const initListener = () => {
state.resize = debounce(() => {
resize()
}, 100)
window.addEventListener('resize', state.resize)
// 监听侧边菜单栏
state.sidebarEle = document.querySelector('.g-sider-container')
state.sidebarEle && state.sidebarEle.addEventListener('transitionend', sidebarResize)
// 监听自定义侧边栏
state.mySider = document.querySelector('.sider-resize-echart')
state.mySider && state.mySider.addEventListener('transitionend', sidebarResize)
// 监听tabs
state.tabEle = document.querySelector('.el-tab-pane')
if (state.tabEle) {
state.tabObserver = new MutationObserver(tabsResize)
state.tabObserver.observe(state.tabEle, { attributes: true })
}
}
const destroyListener = () => {
window.removeEventListener('resize', state.resize)
state.resize = null
state.sidebarEle && state.sidebarEle.removeEventListener('transitionend', sidebarResize)
state.mySider && state.mySider.removeEventListener('transitionend', sidebarResize)
state.tabEle && state.tabObserver.disconnect()
}
const resize = () => {
chart && chart.resize()
}
onMounted(() => {
initListener()
})
onActivated(() => {
if (!state.resize) {
initListener()
}
resize()
})
onBeforeUnmount(() => {
destroyListener()
chart && chart.dispose()
chart = null
})
onDeactivated(() => {
destroyListener()
})
return { renderChart, getEchart, resize }
}
export default useEchartHooks
- themeInit.js
// project.json为配置文件，.json文件为主题数据 **浪费我一天时间，shit**
import * as echarts from 'echarts'
import lightTheme from './theme/light.json'
import darkTheme from './theme/dark.json'
echarts.registerTheme('light', lightTheme)
echarts.registerTheme('dark', darkTheme)
export default echarts
- 暗色主体 dark.json
{
"color": [
"#1890ff",
"#dcb727",
"#2fc25b",
"#eb7a1e",
"#5558f1",
"#24b0e8",
"#921eb2",
"#176dbc",
"#c59f5c",
"#1cb0af",
"#6859c5",
"#a6c51a"
],
"backgroundColor": "transparent",
"textStyle": {},
"title": {
"textStyle": {
"color": "#3185DC",
"fontSize": 16,
"fontWeight": "bold"
},
"subtextStyle": {
"color": "#3185DC"
}
},
"line": {
"itemStyle": {
"borderWidth": 1
},
"lineStyle": {
"width": 2
},
"areaStyle": {
"opacity": 0.1
},
"symbolSize": 6,
"symbol": "emptyCircle",
"smooth": false
},
"radar": {
"axisLine": {
"lineStyle": {
"color": "rgba(255,255,255,0.2)",
"width": 0.5
}
},
"splitLine": {
"lineStyle": {
"color": [
"rgba(255,255,255,0.2)"
],
"width": 0.5
}
},
"splitArea": {
"show": true,
"areaStyle": {
"color": [
"rgba(0,0,0,0.1)", "#161E35"
]
}
},
"itemStyle": {
"opacity": 0
},
"axisName": {
"color": "#fff"
}
},
"bar": {
"barMaxWidth": "25",
"itemStyle": {
"barBorderWidth": "0",
"barBorderColor": "#cccccc"
}
},
"pie": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"scatter": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"boxplot": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"parallel": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"sankey": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"funnel": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"gauge": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"candlestick": {
"itemStyle": {
"color": "#eb7a1e",
"color0": "#2fc25b",
"borderColor": "#eb7a1e",
"borderColor0": "#2fc25b",
"borderWidth": 1
}
},
"graph": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
},
"lineStyle": {
"width": 1,
"color": "#aaaaaa"
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": false,
"color": [
"#1890ff",
"#dcb727",
"#2fc25b",
"#eb7a1e",
"#5558f1",
"#24b0e8",
"#921eb2",
"#176dbc",
"#c59f5c",
"#1cb0af",
"#6859c5",
"#a6c51a"
],
"label": {
"color": "#ffffff"
}
},
"map": {
"itemStyle": {
"areaColor": "#eeeeee",
"borderColor": "#444444",
"borderWidth": 0.5
},
"label": {
"color": "#000000"
},
"emphasis": {
"itemStyle": {
"areaColor": "rgba(255,215,0,0.8)",
"borderColor": "#444444",
"borderWidth": 1
},
"label": {
"color": "rgb(100,0,0)"
}
}
},
"geo": {
"itemStyle": {
"areaColor": "#eeeeee",
"borderColor": "#444444",
"borderWidth": 0.5
},
"label": {
"color": "#000000"
},
"emphasis": {
"itemStyle": {
"areaColor": "rgba(255,215,0,0.8)",
"borderColor": "#444444",
"borderWidth": 1
},
"label": {
"color": "rgb(100,0,0)"
}
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#454b5d"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "rgba(255,255,255,0)"
}
},
"axisLabel": {
"show": true,
"color": "#c0c4cc"
},
"splitLine": {
"show": true,
"lineStyle": {
"type": "dashed",
"color": [
"rgba(255,255,255,0.2)"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
}
},
"valueAxis": {
"axisLine": {
"show": false,
"lineStyle": {
"color": "rgba(255,255,255,0)"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "rgba(255,255,255,0)"
}
},
"axisLabel": {
"show": true,
"color": "#c0c4cc"
},
"splitLine": {
"show": true,
"lineStyle": {
"type": "dashed",
"color": [
"rgba(255,255,255,0.2)"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
},
"nameTextStyle": {
"color": "#c0c4cc"
},
"nameGap": 10
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "rgba(255,255,255,0.4)"
}
},
"axisTick": {
"show": true,
"lineStyle": {
"color": "rgba(255,255,255,0)"
}
},
"axisLabel": {
"show": true,
"color": "#c0c4cc"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"rgba(255,255,255,0.2)"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "rgba(255,255,255,0.4)"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "rgba(255,255,255,0)"
}
},
"axisLabel": {
"show": true,
"color": "#c0c4cc"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"rgba(255,255,255,0.2)"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
}
},
"toolbox": {
"iconStyle": {
"borderColor": "#c0c4cc"
},
"emphasis": {
"iconStyle": {
"borderColor": "#c0c4cc"
}
}
},
"legend": {
"itemWidth": 16,
"itemHeight": 6,
"textStyle": {
"color": "#c0c4cc"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#b1b3b8",
"width": 1
},
"crossStyle": {
"color": "#b1b3b8",
"width": 1
}
},
"backgroundColor": "#343D56",
"borderColor": "transparent",
"textStyle": {
"fontWeight": "lighter",
"fontSize": 12,
"color": "#C0C4CC"
},
"extraCssText": "box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.23)"
},
"timeline": {
"lineStyle": {
"color": "#293c55",
"width": 1
},
"itemStyle": {
"color": "#ff0000",
"borderWidth": 1
},
"controlStyle": {
"color": "#293c55",
"borderColor": "#293c55",
"borderWidth": 0.5
},
"checkpointStyle": {
"color": "#e43c59",
"borderColor": "#c23531"
},
"label": {
"color": "#293c55"
},
"emphasis": {
"itemStyle": {
"color": "#a9334c"
},
"controlStyle": {
"color": "#293c55",
"borderColor": "#293c55",
"borderWidth": 0.5
},
"label": {
"color": "#293c55"
}
}
},
"visualMap": {
"color": [
"#ff0000",
"#d88273",
"#f6efa6"
]
},
"dataZoom": {
"height": 20,
"type": "slider",
"backgroundColor": "rgba(100,176,255,0.1)",
"borderColor": "rgba(64,158,255,0.2)",
"dataBackground": {
"lineStyle": {
"color": "transparent"
},
"areaStyle": {
"color": "rgba(127,190,253,1)"
}
},
"selectedDataBackground": {
"lineStyle": {
"color": "transparent"
},
"areaStyle": {
"color": "rgba(127,190,253,1)"
}
},
"fillerColor": "rgba(156,201,247,0.2)",
"handleIcon": "path://M4.19,6V0H3.14V6H0V18H3.14v6H4.19V18H7.33V6Zm1.92,7.94H1.22v-1H6.11Zm0-2.84H1.22v-1H6.11Z",
"handleSize": "100%",
"handleStyle": {
"color": "#5FA5ED",
"borderColor": "transparent"
},
"brushSelect": false,
"emphasis": {
"handleStyle": {
"borderColor": "transparent"
}
},
"textStyle": {
"color": "#fff"
}
},
"markPoint": {
"label": {
"color": "#ffffff"
},
"emphasis": {
"label": {
"color": "#ffffff"
}
}
}
}
- 浅色主体 light.json
{
"color": [
"#1890ff",
"#dcb727",
"#2fc25b",
"#eb7a1e",
"#5558f1",
"#24b0e8",
"#921eb2",
"#176dbc",
"#c59f5c",
"#1cb0af",
"#6859c5",
"#a6c51a"
],
"backgroundColor": "transparent",
"textStyle": {},
"title": {
"textStyle": {
"color": "#3185DC",
"fontSize": 16,
"fontWeight": "bold"
},
"subtextStyle": {
"color": "#3185DC"
}
},
"line": {
"itemStyle": {
"borderWidth": 1
},
"lineStyle": {
"width": 2
},
"areaStyle": {
"opacity": 0.1
},
"symbolSize": 6,
"symbol": "emptyCircle",
"smooth": false
},
"radar": {
"axisLine": {
"lineStyle": {
"color": "rgba(0,0,0,0.2)",
"width": 0.5
}
},
"splitLine": {
"lineStyle": {
"color": [
"rgba(0,0,0,0.2)"
],
"width": 0.5
}
},
"splitArea": {
"show": true,
"areaStyle": {
"color": [
"rgba(0,0,0,0.05)", "#fff"
]
}
},
"itemStyle": {
"opacity": 0
},
"axisName": {
"color": "#606266"
}
},
"bar": {
"barMaxWidth": "25",
"itemStyle": {
"barBorderWidth": "0",
"barBorderColor": "#cccccc"
}
},
"pie": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"scatter": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"boxplot": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"parallel": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"sankey": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"funnel": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"gauge": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
}
},
"candlestick": {
"itemStyle": {
"color": "#eb7a1e",
"color0": "#2fc25b",
"borderColor": "#eb7a1e",
"borderColor0": "#2fc25b",
"borderWidth": 1
}
},
"graph": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#cccccc"
},
"lineStyle": {
"width": 1,
"color": "#aaaaaa"
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": false,
"color": [
"#1890ff",
"#dcb727",
"#2fc25b",
"#eb7a1e",
"#5558f1",
"#24b0e8",
"#921eb2",
"#176dbc",
"#c59f5c",
"#1cb0af",
"#6859c5",
"#a6c51a"
],
"label": {
"color": "#ffffff"
}
},
"map": {
"itemStyle": {
"areaColor": "#eeeeee",
"borderColor": "#444444",
"borderWidth": 0.5
},
"label": {
"color": "#000000"
},
"emphasis": {
"itemStyle": {
"areaColor": "rgba(255,215,0,0.8)",
"borderColor": "#444444",
"borderWidth": 1
},
"label": {
"color": "rgb(100,0,0)"
}
}
},
"geo": {
"itemStyle": {
"areaColor": "#eeeeee",
"borderColor": "#444444",
"borderWidth": 0.5
},
"label": {
"color": "#000000"
},
"emphasis": {
"itemStyle": {
"areaColor": "rgba(255,215,0,0.8)",
"borderColor": "#444444",
"borderWidth": 1
},
"label": {
"color": "rgb(100,0,0)"
}
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "rgba(255,255,255,0)"
}
},
"axisLabel": {
"show": true,
"color": "#606266"
},
"splitLine": {
"show": true,
"lineStyle": {
"type": "dashed",
"color": [
"rgba(0,0,0,0.2)"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
}
},
"valueAxis": {
"axisLine": {
"show": false,
"lineStyle": {
"color": "rgba(255,255,255,0)"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "rgba(255,255,255,0)"
}
},
"axisLabel": {
"show": true,
"color": "#606266"
},
"splitLine": {
"show": true,
"lineStyle": {
"type": "dashed",
"color": [
"rgba(0,0,0,0.2)"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
},
"nameTextStyle": {
"color": "#606266"
},
"nameGap": 10
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "rgba(0,0,0,0.4)"
}
},
"axisTick": {
"show": true,
"lineStyle": {
"color": "rgba(0,0,0,0)"
}
},
"axisLabel": {
"show": true,
"color": "#606266"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"rgba(0,0,0,0.2)"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "rgba(0,0,0,0.4)"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "rgba(255,255,255,0)"
}
},
"axisLabel": {
"show": true,
"color": "#606266"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"rgba(0,0,0,0.2)"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
}
},
"toolbox": {
"iconStyle": {
"borderColor": "#606266"
},
"emphasis": {
"iconStyle": {
"borderColor": "#606266"
}
}
},
"legend": {
"itemWidth": 16,
"itemHeight": 6,
"textStyle": {
"color": "#606266"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#b1b3b8",
"width": 1
},
"crossStyle": {
"color": "#b1b3b8",
"width": 1
}
},
"backgroundColor": "#ffffff",
"borderColor": "transparent",
"textStyle": {
"fontWeight": "lighter",
"fontSize": 12,
"color": "#606266"
},
"extraCssText": "box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.23)"
},
"timeline": {
"lineStyle": {
"color": "#293c55",
"width": 1
},
"itemStyle": {
"color": "#ff0000",
"borderWidth": 1
},
"controlStyle": {
"color": "#293c55",
"borderColor": "#293c55",
"borderWidth": 0.5
},
"checkpointStyle": {
"color": "#e43c59",
"borderColor": "#c23531"
},
"label": {
"color": "#293c55"
},
"emphasis": {
"itemStyle": {
"color": "#a9334c"
},
"controlStyle": {
"color": "#293c55",
"borderColor": "#293c55",
"borderWidth": 0.5
},
"label": {
"color": "#293c55"
}
}
},
"visualMap": {
"color": [
"#ff0000",
"#d88273",
"#f6efa6"
]
},
"dataZoom": {
"height": 20,
"type": "slider",
"backgroundColor": "rgba(64,158,255,0.1)",
"borderColor": "rgba(64,158,255,0.2)",
"dataBackground": {
"lineStyle": {
"color": "transparent"
},
"areaStyle": {
"color": "rgba(57,136,216,1)"
}
},
"selectedDataBackground": {
"lineStyle": {
"color": "transparent"
},
"areaStyle": {
"color": "rgba(57,136,216,1)"
}
},
"fillerColor": "rgba(65,129,194,0.2)",
"handleIcon": "path://M4.19,6V0H3.14V6H0V18H3.14v6H4.19V18H7.33V6Zm1.92,7.94H1.22v-1H6.11Zm0-2.84H1.22v-1H6.11Z",
"handleSize": "100%",
"handleStyle": {
"color": "#4181C2",
"borderColor": "transparent"
},
"brushSelect": false,
"emphasis": {
"handleStyle": {
"borderColor": "transparent"
}
},
"textStyle": {
"color": "#606266"
}
},
"markPoint": {
"label": {
"color": "#ffffff"
},
"emphasis": {
"label": {
"color": "#ffffff"
}
}
}
}
- app store
import { defineStore } from 'pinia'
import { setSiderCollapse, getSiderCollapse } from '@/utils/auth'
export const useAppStore = defineStore('app', {
state: () => {
return {
theme: localStorage.getItem('theme') || 'dark',
collapse: getSiderCollapse(),
hasLoadRoute: false
}
},
getters: {},
actions: {
selectTheme(name, themes) {
this.theme = name
localStorage.setItem('theme', name)
const activeTheme = themes[name]
const el = document.querySelector(':root')
el.className = name
Object.keys(activeTheme).forEach(key => {
el.style.setProperty(key, activeTheme[key])
})
},
toggleSiderBar() {
this.collapse = !this.collapse
setSiderCollapse(this.collapse)
}
}
})
