首頁 > web前端 > Vue.js > 聊聊vue3中echarts用什麼形式封裝最好? (代碼詳解)

聊聊vue3中echarts用什麼形式封裝最好? (代碼詳解)

藏色散人
發布: 2023-02-16 19:20:04
轉載
2673 人瀏覽過
##@charset "UTF-8";.markdown-body{position:relative;word-break:break-word;line-height:1.75;font-weight:400;font-size: 15px ;顏色:#282d36}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin - top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{字體大小:30px;margin-bottom:5px;顏色:#2f845e}.markdown-body h2{字體大小: 22px;顯示:內聯塊;字體粗細:700;背景:#2f845e;顏色:#fff;填充:6px 8px 0 0;邊框右上半徑:6px;右邊距:2px;框陰影:6px 3px 0 0 rgba(47,132,194,. 2)}.markdown-body h2:before{內容:" ";display:inline-block;width:8px}.markdown-body h2:after{內容:" ";位置:absolute;display:block;width:calc (100% - 32px);border-bottom:3pxsolid #2f845e}.markdown-body h3{font-size:18px;padding-bottom:0}.markdown-body h4{ font-size:16px}.markdown-body h5 {font-size:15px}.markdown-body h6{margin-top:5px}.markdown-body p{line-height:inherit;margin-top:22px;margin-底部:22px}.markdown-body img{最大寬度:100%;box-shadow:6px 6px 6px #888}.markdown-body hr{邊框:無;邊框頂部:1px實心rgba(66,185,131,.15) ;margin-top:32px;margin-xbottom:32px-xbottom) .markdown-body程式碼{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:#f6ffed;color:#52c41a ;font-size:.87em;padding:.065em . 4em}.markdown-body 程式碼,.markdown-body pre{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{位置:相對;行高:1.75}.markdown-body pre> code{font-size:12px;padding:16px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:# 262626;邊框:1px實心#2f845e;邊框頂部:8px實心頂部:8px實心頂部#2f845e;背景:線性漸變(180deg,rgba(66,185,131,.1),透明)!重要}.markdown-body pre>code.hljs[lang ]:之前{top:8px!important;color:#2f845e!important ]:之前{top:8px!important;color:#2f845e!important ]:之前{top:8px!important;color:#2f845e!important }.markdown-body pre>code.language-awesome_error{border:1pxsolid #ff4d4f!important;border-left-width:8px;字體大小: 14px;字體粗細:700;填充:15px 12px 15px 16px;邊距:0px ;斷字:正常;空白:break-spaces;顯示:塊;溢出-x:自動;顏色:#ff4d4f!重要;背景:#fff2f0!important}.markdown-body pre>code.language-awesome_error:before{ content:"!"!important;position:absolute!important;top:50%!important;left:-9px!important;transform :translateY(-14px)!important;背景:#ff4d4f!important;顏色:#fff! important;邊框:2px 實心#fff!important;顯示:flex;對齊項目:中心;對齊內容:中心;寬度: 22px;高度:22px;邊框半徑:100%;字體粗細:700;字體系列:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;字體大小:16px}.markdown-body pre> code.language-awesome_warn{邊框:1px實體#ffc46f!重要;邊框左寬度:8px;字體大小:14px;粗細:700;填充:15px 12px 15px 16px;邊距:0;斷字:正常;空白:中斷空間;顯示:塊;溢出-x:自動;顏色:#ffc46f!重要;背景:#fffbe6!重要} .markdown-body pre>code.language-awesome_warn:before{內容: “☂”!重要;位置:絕對;頂部:50%!重要;左:-9px!重要;變換:translateY(-14px)!重要;背景:#ffc46f!重要;顏色:#fff!重要;邊框: 2px 實心 #fff!important;顯示:flex;對齊項目:中心;對齊內容:中心;寬度:22 像素;高度:22 像素;邊框半徑: 100%;字型粗細:700;字型系列:Dosis,來源Sans Pro、Helvetica Neue、Arial、sans-serif;font-size:16px}.markdown-body pre>code.language-awesome_success{border:1pxsolid #52c41a! important;border-left-width:8px;font-大小:14px;字體粗細:700;填充:15px 12px 15px 16px;邊距:0;斷字:正常;空白:中斷空格;顯示:塊;-x : 自動;顏色:#52c41a!important;background:#f6ffed!important}.markdown-body pre>code.language-awesome_success:before{content:"✓"!important;position:absolute!important;top:50%! important;left:-9px!important ;變換:translateY(-14px)!重要;背景:#52c41a!重要;顏色:#fff!重要;邊框:2px實心#fff!重要;顯示:flex;對齊項目:中心;調整內容:中心;寬度:22px;高度:22px;邊框半徑:100%;字體粗細:700;字體系列:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;字體大小:16px}.markdown -body pre>code.language-awesome_info{邊框:1px 實心#1890ff!重要;邊框左寬度:8px;字體大小:14px;字體粗細:700;填充:15px 12px 15px 16px;邊距:0;word-中斷:0;word-中斷:0;word-中斷:0;word-中斷:0;word-中斷:0;word-中斷:0;詞:正常;空白:中斷空格;顯示:塊;溢出-x:自動;顏色:#1890ff!重要;背景:#e6f7ff!重要}.markdown-body pre>code.language-awesome_info:之前{內容:「i 「!重要;位置:絕對!重要;頂部:50%!重要;左:-9px!重要;變換:translateY(-14px)!重要;背景:#1890ff!重要;顏色:#fff!重要;邊框: 2px實心#fff!重要;顯示:flex;對齊項目:中心;對齊內容:中心;寬度:22px;高度:22px;邊框半徑:100%;字體粗細:700;字體-家族:Dosis,Source Sans Pro, Helvetica Neue,Arial,sans-serif;font-size:16px}.markdown-body Strong{背景顏色:inherit;color:#2f845e}.markdown-body em{background-color:inherit;color:#949415}.markdown-body a{text-decoration:none;color:#2f8e54;border-bottom:1px Solid #3f9e64}.markdown-body a:active ,.markdown-body a:hover{color:#3f9e64}.markdown-body a[class^=footnote]{margin-left:4px}.markdown-body a:before{content:"➤"}.markdown-body表{字體大小:12px;寬度:100%;最大寬度:100%;溢出:自動;邊框:2px實體#2f8e54}.markdown-body thead{背景:#2f8e54;顏色:#fff;文字對齊:left; font-weight:700}.markdown-body tr:nth-child(2n){背景顏色:rgba(153,255,188,.1)}.markdown-body td,.markdown-body th{padding:12px 7px ;line-height :22px}.markdown-body td{min-width:120px}.markdown-body blockquote{padding:1px 22px;margin:22px 0;border-left:6pxsolid #2f845e;background-color:rgba( 63,181) ;border-radius:2px}.markdown-body blockquote:after{display:block;content:""}.markdown-body blockquote>p{margin:10px 0}.markdown-body ol,.markdown -body ul{padding -left:28px}.markdown-body ol li,.markdown-body ul li{margin-bottom:0;list-style:inherit}.markdown-body ol li::marker,.markdown-body ul li::marker {color:#2f845e}.markdown-body ol li .task-list-item,.markdown-body ul li .task-list-item{list-style:none}.markdown-body ol li .任務清單項目ol, .markdown-body ol li .任務清單項目ul,.markdown-body ul li .任務清單項目ol,.markdown-body ul li .任務清單項目ul{margin -top:0}.markdown-body ol ol,. markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:3px}.markdown-body ol li{padding-left: 6px;color:#282d36}.markdown-body del{ color:#2f845e}.markdown-body input[type=checkbox]:checked:before{content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA/klEQVQ4T72 q5AC5EixBU4A55BNrEVHAcSBTHlaubt37 /zxZKlcn7n6mDPXJvz8IJ89HzWu8t7C8D2dfsY52ae4apHnLx0ktsCsHXZjiUuFgG40x2eJ/HMnLx0ktsCsHXZjiUuFgG40x2eJ/HD0x2eJ/Ak iKQjmb ZuAdW80tmelCHODoNgSfP7AFpr TTaRTzsJN1GEyuIZ7uW6TEEHwCtyV/6EVBKJHhfzgC0Xv/ iXwEFBF4FG0378bd7sPQq5xK/hSnk6sdlX3mZrKkwLZKBeu8n9XuWEUE7X YAAAAASUVORK5CYII=);位置:相對;頂部:-1px;左側:-1px}.markdown-body .math 相對;頂部:-1px;左側:-1px}.m字;邊框半徑:2px;溢出-x:自動;背景顏色:#f6ffed;顏色:#52c41a;字體大小:.87em;填充:.065em 。4em}@media (最大寬度:720px){.markdown-body h1{font-size:22px}.markdown-body h2{font-size:20px}.markdown-body h3{font-size:18px}}

#專案中常用到echarts,不做封裝直接拿來使用也行,但首先要寫很多重複的配置代碼,封裝稍不注意還會過度封裝,丟失了擴展性和確實性。始終沒有找到一個好的偶然實踐,看到一篇文章,給了靈感。找到了一個目前認為用起來很舒服的封裝。

#思路

  1. 結合項目需求,針對不同類型的圖表,配置基礎的預設通用配置,例如x/y,label,圖例等的樣式
  2. 建立圖表實例元件(不要使用id,容易重複,還需要操作dom ,直接用ref取得目前的元件el來建立圖表),提供type (圖表類型),和options(圖表配置)兩個必要屬性
  3. 根據設定type,載入預設的圖表配置
  4. 深度監聽形成的選項,變更時更新覆寫預設配置,更新圖表
  5. 提供事件支持,支持echart事件互動綁定互動
##注意要確保所有報表元件的選項備份都是

shallowReactive類型,避免備份量過大,深度響應式導致效能問題

##目錄結構
#
├─v-charts
│  │  index.ts     // 导出类型定义以及图表组件方便使用
│  │  type.d.ts    // 各种图表的类型定义
│  │  useCharts.ts // 图表hooks
│  │  v-charts.vue // echarts图表组件
│  │
│  └─options // 图表配置文件
│          bar.ts
│          gauge.ts
│          pie.ts
登入後複製

元件程式碼

v-charts.vue

<template>
  <div></div>
</template>
<script>
import { PropType } from "vue";
import * as echarts from "echarts/core";
import { useCharts, ChartType, ChartsEvents } from "./useCharts";

/**
 * echarts事件类型
 * 截至目前,vue3类型声明参数必须是以下内容之一,暂不支持外部引入类型参数
 * 1. 类型字面量
 * 2. 在同一文件中的接口或类型字面量的引用
 * // 文档中有说明:https://cn.vuejs.org/api/sfc-script-setup.html#typescript-only-features
 */
interface EventEmitsType {
  <T extends ChartsEvents.EventType>(e: `${T}`, event: ChartsEvents.Events[Uncapitalize<T>]): void;
}

defineOptions({
  name: "VCharts"
});

const props = defineProps({
  type: {
    type: String as PropType<ChartType>,
    default: "bar"
  },
  options: {
    type: Object as PropType<echarts.EChartsCoreOption>,
    default: () => ({})
  }
});

// 定义事件,提供ts支持,在组件使用时可获得友好提示
defineEmits<EventEmitsType>();

const { type, options } = toRefs(props);
const chartRef = shallowRef();
const { charts, setOptions, initChart } = useCharts({ type, el: chartRef });

onMounted(async () => {
  await initChart();
  setOptions(options.value);
});
watch(
  options,
  () => {
    setOptions(options.value);
  },
  {
    deep: true
  }
);
defineExpose({
  $charts: charts
});
</script>
<style>
.v-charts {
  width: 100%;
  height: 100%;
  min-height: 200px;
}
</style>
登入後複製

useCharts.ts

import { ChartType } from "./type";
import * as echarts from "echarts/core";
import { ShallowRef, Ref } from "vue";

import {
  TitleComponent,
  LegendComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from "echarts/components";

import { BarChart, LineChart, PieChart, GaugeChart } from "echarts/charts";

import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

const optionsModules = import.meta.glob("./options/**.ts");

interface ChartHookOption {
  type?: Ref<charttype>;
  el: ShallowRef<htmlelement>;
}

/**
 *  视口变化时echart图表自适应调整
 */
class ChartsResize {
  #charts = new Set<echarts.echarts>(); // 缓存已经创建的图表实例
  #timeId = null;
  constructor() {
    window.addEventListener("resize", this.handleResize.bind(this)); // 视口变化时调整图表
  }
  getCharts() {
    return [...this.#charts];
  }
  handleResize() {
    clearTimeout(this.#timeId);
    this.#timeId = setTimeout(() => {
      this.#charts.forEach(chart => {
        chart.resize();
      });
    }, 500);
  }
  add(chart: echarts.ECharts) {
    this.#charts.add(chart);
  }
  remove(chart: echarts.ECharts) {
    this.#charts.delete(chart);
  }
  removeListener() {
    window.removeEventListener("resize", this.handleResize);
  }
}

export const chartsResize = new ChartsResize();

export const useCharts = ({ type, el }: ChartHookOption) => {
  echarts.use([
    BarChart,
    LineChart,
    BarChart,
    PieChart,
    GaugeChart,
    TitleComponent,
    LegendComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
  ]);
  const charts = shallowRef<echarts.echarts>();
  let options!: echarts.EChartsCoreOption;
  const getOptions = async () => {
    const moduleKey = `./options/${type.value}.ts`;
    const { default: defaultOption } = await optionsModules[moduleKey]();
    return defaultOption;
  };

  const setOptions = (opt: echarts.EChartsCoreOption) => {
    charts.value.setOption(opt);
  };
  const initChart = async () => {
    charts.value = echarts.init(el.value);
    options = await getOptions();
    charts.value.setOption(options);
    chartsResize.add(charts.value); // 将图表实例添加到缓存中
    initEvent(); // 添加事件支持
  };

  /**
   * 初始化事件,按需绑定事件
   */
  const attrs = useAttrs();
  const initEvent = () => {
    Object.keys(attrs).forEach(attrKey => {
      if (/^on/.test(attrKey)) {
        const cb = attrs[attrKey];
        attrKey = attrKey.replace(/^on(Chart)?/, "");
        attrKey = `${attrKey[0]}${attrKey.substring(1)}`;
        typeof cb === "function" && charts.value?.on(attrKey, cb as () => void);
      }
    });
  };

  onBeforeUnmount(() => {
    chartsResize.remove(charts.value); // 移除缓存
  });

  return {
    charts,
    setOptions,
    initChart,
    initEvent
  };
};

export const chartsOptions = <t>(option: T) => shallowReactive<t>(option);

export * from "./type.d";</t></t></echarts.echarts></echarts.echarts></htmlelement></charttype>
登入後複製

type. d.ts

/*
 * @Description:
 * @Version: 2.0
 * @Autor: GC
 * @Date: 2022-03-02 10:21:33
 * @LastEditors: GC
 * @LastEditTime: 2022-06-02 17:45:48
 */
// import * as echarts from 'echarts/core';
import * as echarts from 'echarts'
import { XAXisComponentOption, YAXisComponentOption } from 'echarts';

import { ECElementEvent, SelectChangedPayload, HighlightPayload,  } from 'echarts/types/src/util/types'

import {
  TitleComponentOption,
  TooltipComponentOption,
  GridComponentOption,
  DatasetComponentOption,
  AriaComponentOption,
  AxisPointerComponentOption,
  LegendComponentOption,
} from 'echarts/components';// 组件
import {
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineSeriesOption,
  PieSeriesOption,
  FunnelSeriesOption,
  GaugeSeriesOption
} from 'echarts/charts';

type Options = LineECOption | BarECOption | PieECOption | FunnelOption

type BaseOptionType = XAXisComponentOption | YAXisComponentOption | TitleComponentOption | TooltipComponentOption | LegendComponentOption | GridComponentOption

type BaseOption = echarts.ComposeOption<baseoptiontype>

type LineECOption = echarts.ComposeOption<lineseriesoption>

type BarECOption = echarts.ComposeOption<barseriesoption>

type PieECOption = echarts.ComposeOption<pieseriesoption>

type FunnelOption = echarts.ComposeOption<funnelseriesoption>

type GaugeECOption = echarts.ComposeOption<gaugeseriesoption>

type EChartsOption = echarts.EChartsOption;

type ChartType = 'bar' | 'line' | 'pie' | 'gauge'

// echarts事件
namespace ChartsEvents {
  // 鼠标事件类型
  type MouseEventType = 'click' | 'dblclick' | 'mousedown' | 'mousemove' | 'mouseup' | 'mouseover' | 'mouseout' | 'globalout' | 'contextmenu' // 鼠标事件类型
  type MouseEvents = {
    [key in Exclude<mouseeventtype> as `chart${Capitalize<key>}`] :ECElementEvent
  }
  // 其他的事件类型极参数
  interface Events extends MouseEvents {
    globalout:ECElementEvent,
    contextmenu:ECElementEvent,
    selectchanged: SelectChangedPayload;
    highlight: HighlightPayload;
    legendselected: { // 图例选中后的事件
      type: 'legendselected',
      // 选中的图例名称
      name: string
      // 所有图例的选中状态表
      selected: {
        [name: string]: boolean
      }
    };
    // ... 其他类型的事件在这里定义
  }


  // echarts所有的事件类型
  type EventType = keyof Events
}

export {
  BaseOption,
  ChartType,
  LineECOption,
  BarECOption,
  Options,
  PieECOption,
  FunnelOption,
  GaugeECOption,
  EChartsOption,
  ChartsEvents
}</key></mouseeventtype></gaugeseriesoption></funnelseriesoption></pieseriesoption></barseriesoption></lineseriesoption></baseoptiontype>
登入後複製

options/bar.ts

import { BarECOption } from "../type";
const options: BarECOption = {
  legend: {},
  tooltip: {},
  xAxis: {
    type: "category",
    axisLine: {
      lineStyle: {
        // type: "dashed",
        color: "#C8D0D7"
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: "#7D8292"
    }
  },
  yAxis: {
    type: "value",
    alignTicks: true,
    splitLine: {
      show: true,
      lineStyle: {
        color: "#C8D0D7",
        type: "dashed"
      }
    },
    axisLine: {
      lineStyle: {
        color: "#7D8292"
      }
    }
  },
  grid: {
    left: 60,
    bottom: "8%",
    top: "20%"
  },
  series: [
    {
      type: "bar",
      barWidth: 20,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          x2: 0,
          y: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#62A5FF" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#3365FF" // 100% 处的颜色
            }
          ]
        }
      }
      // label: {
      //   show: true,
      //   position: "top"
      // }
    }
  ]
};
export default options;
登入後複製

專案中使用

index.vue

<template>
  <div>
    <section>
      <div>
        <div>累计设备接入统计</div>
        <v-charts></v-charts>
      </div>
      <div>
        <div>坐标数据接入统计</div>
        <v-charts></v-charts>
      </div>
    </section>
  </div>
</template>
<script>
import {
  useStatisDeviceByUserObject,
} from "./hooks";
// 设备分类统计
const { options: statisDeviceByUserObjectOpts,selectchanged,handleChartClick } = useStatisDeviceByUserObject();
</script>
登入後複製

/hooks/useStatisDeviceByUserObject.ts

export const useStatisDeviceByUserObject = () => {
  // 使用chartsOptions确保所有传入v-charts组件的options数据都是## shallowReactive浅层作用形式,避免大量数据导致性能问题
  const options = chartsOptions<barecoption>({
    yAxis: {},
    xAxis: {},
    series: []
  });
  const init = async () => {
    const xData = [];
    const sData = [];
    const dicts = useHashMapDics(["dev_user_object"]);
    const data = await statisDeviceByUserObject();
    dicts.dictionaryMap.dev_user_object.forEach(({ label, value }) => {
      if (value === "6") return; // 排除其他
      xData.push(label);
      const temp = data.find(({ name }) => name === value);
      sData.push(temp?.qty || 0);
      
      // 给options赋值时要注意options是浅层响应式
      options.xAxis = { data: xData }; 
      options.series = [{ ...options.series[0], data: sData }];
    });
  };
  
  // 事件
  const selectchanged = (params: ChartsEvents.Events["selectchanged"]) => {
    console.log(params, "选中图例了");
  };

  const handleChartClick = (params: ChartsEvents.Events["chartClick"]) => {
    console.log(params, "点击了图表");
  };
  
  onMounted(() => {
    init();
  });
  return {
    options,
    selectchanged,
    handleChartClick
  };
};</barecoption>
登入後複製

使用時輸入@可以看到元件支援的所有事件:

聊聊vue3中echarts用什麼形式封裝最好? (代碼詳解)

    推薦學習:《
  • vue.js影片教學

以上是聊聊vue3中echarts用什麼形式封裝最好? (代碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.im
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板