- <template>
- <div :id="id" style="width: 100%; height: 100%"></div>
- </template>
- <script setup>
- import { guid } from "@/utils/ruoyi";
- const { proxy } = getCurrentInstance();
- const id = guid();
- const myChart = shallowRef("");
- const props = defineProps({
- //刷新标志
- refresh: {
- type: [String, Number],
- default: 1,
- },
- //数据
- echartData: {
- type: Object,
- default: {},
- },
- //标题
- title: {
- type: String,
- default: "",
- },
- //X轴type
- xAxisType: {
- type: String,
- default: "category",
- },
- //Y轴type
- yAxisType: {
- type: String,
- default: "value",
- },
- //是否堆叠
- stack: {
- type: String,
- default: "",
- },
- //图列的排列方式
- legend: {
- type: Object,
- default: {
- top: "2%",
- orient: "horizontal", //horizontal
- left: "center", //left ,center
- },
- },
- //Y轴标题名称
- yAxisName: {
- type: String,
- default: "",
- },
- //X轴标题
- xAxisName: {
- type: String,
- default: "",
- },
- });
-
- watch(
- () => props.refresh,
- (value) => {
- //先销毁实例
- myChart.value && myChart.value.dispose();
- intChart();
- }
- );
-
- //自适应
- function resizeTheChart() {
- if (myChart.value) {
- myChart.value.resize();
- }
- }
- //初始化
- function intChart() {
- myChart.value = proxy.echarts.init(document.getElementById(id));
- // 绘制图表
- myChart.value.setOption({
- title: { text: props.title },
- tooltip: {
- trigger: "axis",
- showDelay: 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
- },
- },
- grid: {
- left: "3%",
- right: "7%",
- top: "25%",
- bottom: "3%",
- containLabel: true,
- },
- legend: props.legend,
- xAxis: {
- type: props.xAxisType,
- boundaryGap: [0, 0.01],
- data: props.echartData.xAxisData,
- name: props.xAxisName,
- axisLabel: {
- textStyle: {
- color: "#222",
- },
- },
- },
- yAxis: {
- type: props.yAxisType,
- data: props.echartData.yAxisData,
- name: props.yAxisName,
- minInterval: 1,
- nameTextStyle: {
- color: "#222",
- fontSize: 12,
- },
- axisLabel: {
- textStyle: {
- color: "#222", //字体颜色
- fontSize: 12, //字体大小
- },
- },
- },
- series: props.echartData.seriesData,
- });
- }
- onMounted(() => {
- intChart();
- window.addEventListener("resize", resizeTheChart);
- });
- </script>