echarts#EChartsOption TypeScript Examples

The following examples show how to use echarts#EChartsOption. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: app.component.ts    From blog2020 with MIT License 6 votes vote down vote up 
private tempOptions: EChartsOption = {
    series: [{
      name: 'Temperature',
      type: 'gauge',
      min: -20,
      max: 50,
      splitNumber: 7,
      detail: {
        formatter: '{value} °C'
      },
      axisLine: {
        lineStyle: {
          color: [[0.29, 'blue'], [0.72, 'green'], [1, 'red']]
        }
      },
      data: []
    }]
  };
Example #2
Source File: app.component.ts    From blog2020 with MIT License 6 votes vote down vote up 
private humOptions: EChartsOption = {
    series: [{
      name: 'Humidity',
      type: 'gauge',
      min: 0,
      max: 100,
      splitNumber: 10,
      detail: {
        formatter: '{value} %'
      },
      axisLine: {
        lineStyle: {
          color: [[0.2, 'lightblue'], [0.5, 'blue'], [1, 'darkblue']]
        }
      },
      data: []
    }]
  };
Example #3
Source File: index.d.ts    From vue3-echarts with MIT License 5 votes vote down vote up 
readonly option: EChartsOption;
Example #4
Source File: index.ts    From vue3-echarts with MIT License 5 votes vote down vote up 
@Prop() readonly option: EChartsOption;
Example #5
Source File: app.component.ts    From blog2020 with MIT License 5 votes vote down vote up 
options: EChartsOption;
Example #6
Source File: app.component.ts    From blog2020 with MIT License 5 votes vote down vote up 
mergeOptions: EChartsOption;
Example #7
Source File: useECharts.ts    From vite-vue3-ts with MIT License 4 votes vote down vote up 
export function useECharts(
  elRef: Ref<HTMLDivElement>,
  theme: 'light' | 'dark' | 'default' = 'default',
) {
  const getDarkMode = computed(() => {
    return theme;
  });
  let chartInstance: echarts.ECharts | null = null;
  let resizeFn: Fn = resize;
  const cacheOptions = ref({}) as Ref<EChartsOption>;
  let removeResizeFn: Fn = () => {};

  resizeFn = useDebounceFn(resize, 200);

  const getOptions = computed(() => {
    return {
      backgroundColor: 'transparent',
      ...cacheOptions.value,
    } as EChartsOption;
  });

  function initCharts() {
    const el = unref(elRef);
    if (!el || !unref(el)) {
      return;
    }

    chartInstance = echarts.init(el);
    const { removeEvent } = useEventListener({
      el: window,
      name: 'resize',
      listener: resizeFn,
    });
    removeResizeFn = removeEvent;
    if (el.offsetHeight === 0) {
      useTimeoutFn(() => {
        resizeFn();
      }, 30);
    }
  }

  function setOptions(options: EChartsOption, clear = true) {
    cacheOptions.value = options;
    if (unref(elRef)?.offsetHeight === 0) {
      useTimeoutFn(() => {
        setOptions(unref(getOptions));
      }, 30);
      return;
    }
    nextTick(() => {
      useTimeoutFn(() => {
        if (!chartInstance) {
          initCharts();

          if (!chartInstance) return;
        }
        clear && chartInstance?.clear();

        chartInstance?.setOption(unref(getOptions));
      }, 30);
    });
  }

  function resize() {
    chartInstance?.resize();
  }

  watch(
    () => getDarkMode.value,
    () => {
      if (chartInstance) {
        chartInstance.dispose();
        initCharts();
        setOptions(cacheOptions.value);
      }
    },
  );

  tryOnUnmounted(() => {
    if (!chartInstance) return;
    removeResizeFn();
    chartInstance.dispose();
    chartInstance = null;
  });

  function getInstance(): echarts.ECharts | null {
    if (!chartInstance) {
      initCharts();
    }
    return chartInstance;
  }

  return {
    setOptions,
    resize,
    echarts,
    getInstance,
  };
}