@hsmy/vue-echarts-container v3.0.0

echarts-container

安装

  npm i @hsmy/echarts-container
  
  # vue2 版本请安装
  npm i @hsmy/echarts-container@2

简介

基于vue的echarts容器组件，根据容器的大小自动适应，屏幕尺寸发生变化后，图表自动刷新

props

option

echarts配置对象

theme?

echarts主题

例子

1、固定尺寸

<script setup lang="ts">
  import EchartsContainer from "@hsmy/echarts-container";
  import {onMounted, ref} from "vue";

  const option = ref({})


  onMounted(() => {
    option.value = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    }
  })

</script>

<template>
  <div class="app-container">
    <!--固定尺寸-->
    <div style="width: 500px;height: 400px;">
      <EchartsContainer :option="option"/>
    </div>
  </div>
</template>

2、flex布局

<script setup lang="ts">
  import EchartsContainer from "@hsmy/echarts-container";
  import {onMounted, ref} from "vue";

  const option = ref({})


  onMounted(() => {
    option.value = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    }
  })

</script>

<template>
  <div class="app-container">
    <!--flex:1,自动填充后的尺寸-->
    <div style="flex:1">
      <EchartsContainer :option="option"/>
    </div>
  </div>
</template>