vue-devui
Version:
DevUI components based on Vite and Vue3
381 lines (380 loc) • 8.14 kB
JavaScript
import { defineComponent, ref, onMounted, onUnmounted, createVNode } from "vue";
import * as echarts from "echarts";
import { toRefs } from "@vueuse/core";
const devuiChartProps = {
option: {
type: Object,
default: {}
}
};
const DARK_LINE_COLOR = "#4E5057";
const DARK_TITLE_COLOR = "#CED1DB";
const DARK_TEXT_COLOR = "#696C75";
const DARK_LEGEND_COLOR = "#868A99";
const DARK_AXIS_COLOR = "#4E5057";
const LIGHT_LINE_COLOR = "#D7D8DA";
const LIGHT_TITLE_COLOR = "#252B3A";
const LIGHT_TEXT_COLOR = "#9B9FA8";
const LIGHT_LEGEND_COLOR = "#71757F";
const LIGHT_AXIS_COLOR = "#D7D8DA";
const DEFAULT_BASIC_COLOR_PALETTE = [
"#5C8DFF",
"#BC94FF",
"#54D2EB",
"#A6DD82",
"#FCDA6B",
"#CA7ED6",
"#7298F1",
"#73CEA6",
"#EDD249",
"#CAABFF",
"#85CAFF",
"#93D99A",
"#96ADFA",
"#F4AF8F",
"#A282E9",
"#FFBB6B",
"#69DBB9",
"#76DBEF",
"#B1CE4F",
"#5DA4DC"
];
function axisCommon(type) {
if (type === "dark") {
return {
axisLine: {
lineStyle: {
color: DARK_AXIS_COLOR
}
},
axisTick: {
lineStyle: {
color: DARK_AXIS_COLOR
}
},
axisLabel: {
textStyle: {
color: DARK_TEXT_COLOR
}
},
splitLine: {
lineStyle: {
type: [3, 3],
color: DARK_LINE_COLOR
}
}
};
} else {
return {
axisLine: {
lineStyle: {
color: LIGHT_AXIS_COLOR
}
},
axisTick: {
lineStyle: {
color: LIGHT_AXIS_COLOR
}
},
axisLabel: {
textStyle: {
color: LIGHT_TEXT_COLOR
}
},
splitLine: {
lineStyle: {
type: [3, 3],
color: LIGHT_LINE_COLOR
}
}
};
}
}
const DEVUI_ECHART_THEME = {
defaultColorPalette: DEFAULT_BASIC_COLOR_PALETTE,
defaultDarkTheme: {
color: DEFAULT_BASIC_COLOR_PALETTE,
tooltip: {
axisPointer: {
label: {
show: false
},
lineStyle: {
color: DARK_LINE_COLOR,
width: 2,
type: [2, 3]
},
crossStyle: {
color: DARK_LINE_COLOR,
width: 2,
type: [2, 3]
}
},
backgroundColor: "rgba(36,37,38,0.96)",
extraCssText: "border-radius: 8px;box-shadow: 0 1px 4px 0 rgba(37,43,58,0.1)",
borderWidth: 0,
padding: [8, 8],
textStyle: {
color: DARK_LEGEND_COLOR,
fontSize: 12
}
},
virtualMap: {
textStyle: {
color: DARK_TEXT_COLOR
}
},
legend: {
height: "80%",
width: "80%",
textStyle: {
color: DARK_LEGEND_COLOR
}
},
textStyle: {
color: DARK_TEXT_COLOR
},
title: {
textStyle: {
color: DARK_TITLE_COLOR
}
},
toolbox: {
iconStyle: {
borderColor: DARK_LINE_COLOR
}
},
dataZoom: {
textStyle: {
color: DARK_TEXT_COLOR
}
},
timeline: {
lineStyle: {
color: DARK_LINE_COLOR
},
label: {
textStyle: {
color: DARK_TEXT_COLOR
}
}
},
timeAxis: axisCommon("dark"),
logAxis: axisCommon("dark"),
valueAxis: {
...axisCommon("dark"),
axisLine: {
show: false,
lineStyle: {
color: DARK_AXIS_COLOR
}
},
axisTick: {
show: false
}
},
categoryAxis: {
...axisCommon("dark"),
axisLine: {
show: true,
lineStyle: {
color: DARK_AXIS_COLOR
}
},
axisTick: {
show: false
}
},
line: {
symbol: "circle"
},
graph: {
color: DEFAULT_BASIC_COLOR_PALETTE
},
geo: {
itemStyle: {
borderColor: "#fff",
areaColor: "#37383A"
}
}
},
defaultLightTheme: {
color: DEFAULT_BASIC_COLOR_PALETTE,
tooltip: {
axisPointer: {
label: {
show: false
},
lineStyle: {
color: LIGHT_LINE_COLOR,
width: 2,
type: [2, 3]
},
crossStyle: {
color: LIGHT_LINE_COLOR,
width: 2,
type: [2, 3]
}
},
backgroundColor: "rgba(255,255,255,0.96)",
extraCssText: "border-radius: 8px;box-shadow: 0 1px 4px 0 rgba(37,43,58,0.1)",
borderWidth: 0,
padding: [8, 8],
textStyle: {
color: LIGHT_LEGEND_COLOR,
fontSize: 12
}
},
virtualMap: {
textStyle: {
color: LIGHT_TEXT_COLOR
}
},
legend: {
height: "80%",
width: "80%",
align: "left",
textStyle: {
color: LIGHT_LEGEND_COLOR
}
},
textStyle: {
color: LIGHT_TEXT_COLOR
},
title: {
textStyle: {
color: LIGHT_TITLE_COLOR
}
},
toolbox: {
iconStyle: {
borderColor: LIGHT_LINE_COLOR
}
},
dataZoom: {
textStyle: {
color: LIGHT_TEXT_COLOR
}
},
timeline: {
lineStyle: {
color: LIGHT_LINE_COLOR
},
label: {
textStyle: {
color: LIGHT_TEXT_COLOR
}
}
},
timeAxis: axisCommon("light"),
logAxis: axisCommon("light"),
valueAxis: {
...axisCommon("light"),
axisLine: {
show: false,
lineStyle: {
color: LIGHT_AXIS_COLOR
}
},
axisTick: {
show: false
}
},
categoryAxis: {
...axisCommon("light"),
axisLine: {
show: true,
lineStyle: {
color: LIGHT_AXIS_COLOR
}
},
axisTick: {
show: false
}
},
line: {
symbol: "emptyCircle",
markPoint: {
label: {
show: true,
color: LIGHT_TEXT_COLOR
}
}
},
graph: {
color: DEFAULT_BASIC_COLOR_PALETTE
},
geo: {
itemStyle: {
borderColor: "#fff",
areaColor: "#eaebed"
}
}
}
};
var DChart = defineComponent({
name: "DChart",
props: devuiChartProps,
emits: ["chartReady"],
setup(props, {
emit
}) {
const {
option
} = toRefs(props);
let theme;
let themeService;
let isDark = false;
let echartInstacne;
let timer;
const chartRef = ref();
const themeChange = () => {
var _a;
isDark = !!((_a = themeService == null ? void 0 : themeService.currentTheme) == null ? void 0 : _a.isDark);
theme = isDark ? DEVUI_ECHART_THEME.defaultDarkTheme : DEVUI_ECHART_THEME.defaultLightTheme;
echartInstacne.dispose();
echartInstacne = echarts.init(chartRef.value, theme);
echartInstacne.setOption(option.value, true);
console.log(option.value);
emit("chartReady", echartInstacne);
};
const onresize = () => {
clearTimeout(timer);
timer = setTimeout(() => {
echartInstacne.resize();
}, 100);
};
onMounted(() => {
var _a;
themeService = window["devuiThemeService"];
isDark = !!((_a = themeService == null ? void 0 : themeService.currentTheme) == null ? void 0 : _a.isDark);
theme = isDark ? DEVUI_ECHART_THEME.defaultDarkTheme : DEVUI_ECHART_THEME.defaultLightTheme;
echartInstacne = echarts.init(chartRef.value, theme);
if (themeService) {
themeService.eventBus.add("themeChanged", themeChange);
}
echartInstacne.setOption(option.value, true);
emit("chartReady", echartInstacne);
window.addEventListener("resize", onresize);
});
onUnmounted(() => {
echartInstacne == null ? void 0 : echartInstacne.dispatchAction({
type: "hideTip"
});
themeService.eventBus.remove("themeChanged", themeChange);
});
return () => createVNode("div", {
"ref": chartRef,
"class": "devui-charts"
}, null);
}
});
var index = {
title: "Echarts \u56FE\u8868",
category: "\u6F14\u8FDB\u4E2D",
status: "100%",
install(app) {
app.component(DChart.name, DChart);
}
};
export { DChart, index as default, devuiChartProps };