carterli/vue3-echarts

Echarts binding for Vue 3

vue3-echarts

Echarts binding for Vue 3

How to use

1. Install

   pnpm i vue3-echarts

2. Register it in components of Vue options

   import { VueEcharts } from 'vue3-echarts';
   
   export default {
       data,
       methods,
       ...
       components: {
           VueEcharts,
       },
   }

3. Use the component in template

   <vue-echarts :option="option" style="height: 500px" ref="chart" />

   prop option is required

   (this.$refs.chart as InstanceType<typeof VueEcharts>).refreshOption();

   Note: vue-echarts has no height by default. You need to specify it manually. DOM size change is detected automatically using ResizeObserver, no manual resize call needed.

Props

option

Type: object

Echarts option. Documents can be found here: https://echarts.apache.org/en/option.html#title. If null, loading animation will be shown

theme

Type: string Default: default

Theme used, should be pre-registered using echarts.registerTheme

groupId

Type: number

Group name to be used in chart connection

loadingOption

Config used by showLoading.

Loading animation will be shown automatically when option is null or an empty object.

initCfg

Other configuration used by echarts.init

Methods

refreshOption

Refresh option using setOption. If option is null or an empty object, loading animation will be shown. See loadingOption

refreshChart

Recreate echarts instance

setOption

Alias of echartsInstance.setOption

dispatchAction

Alias of echartsInstance.dispatchAction

Events

Supported events

All echarts events are supported. Doc can be found here: https://echarts.apache.org/en/api.html#events

Bind events

<vue-echarts @click="chartClicked" />

LICENSE

MIT

vue3-echarts's Issues

vite项目用了这个插件页面HMR怎么失效了？

<template>
  <div class="home-center-right">
    <div class="title">
      <p>用印统计</p>
      <div>
        <span>全部</span>
        <span>一个月</span>
        <span>六个月</span>
        <span>一年</span>
      </div>
    </div>
    <vue-echarts :option="props.echartslineoption" style="height: 350px" />
  </div>
</template>

<script setup>
import { VueEcharts } from "vue3-echarts";

import { defineProps } from 'vue'
const props = defineProps({
  echartslineoption: {
    type: Object,
    default: () => {
      return {
        tooltip: {},
        legend: {
          data: ['智能用印', '普通用印']
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            rotate: 45,
          },
          data: [
            "2022-01",
            "2022-02",
            "2022-03",
            "2022-04",
            "2022-05",
            "2022-06",
            "2022-07",
            "2022-08",
            "2022-09",
            "2022-10",
            "2022-11",
            "2022-10",
          ],
        },
        yAxis: {},
        series: [{
          name: "智能用印",
          type: "line",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148, 35, 34, 78],
        },
        {
          name: "普通用印",
          color: "#00bd9d",
          type: "line",
          data: [40, 120, 83, 45, 31, 74, 35, 34, 78, 35, 34, 78],
        },
        ],
      }
    },
  }
})
</script>

Can't get DOM width or height

Hi @CarterLi ,thanks for creating this Echarts binding for Vue3!
In the point 3 where shall I place the line with (this.$refs.chart as VueEcharts).refreshOption();?

I pass my option to the option props. However, I got this error:
Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.
How can I fix the error?
My template code of my component is like this:

<template>
  <div class="col-auto row">
    <template v-if="checkValues()">
      <vue-echarts :option="line" style="height: 500px" ref="chart" />
    </template>
  </div>
</template>

<script>
import { VueEcharts } from 'vue3-echarts';
export default {
data: () => ({
    loading: true,
    line: {....}
}),
};
</script>

HOW TO Render Toggle SVG or Canvas

HOW TO Render Toggle SVG or Canvas E-charts

for those who don't know how to bind events

<vue-echarts :option="options" class="w-full h-full" @click="chartClicked" />
should mentioned in readme

TS 版本有问题 导致编译错误

TS 版本有问题 导致编译错误

i need refresh data from api like this How can i

https://echarts.apache.org/en/api.html#echartsInstance

function greetings() {

  mychart.setOption({
    option.color = ['#1319CCs'];
   option.xAxis = {
   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    type: 'category',
   };
  option.series = [
    {
      data: ['150', '230', '224', '218', '135', '147', '260'],
     name: 'Line1',
      type: 'line',
     },
     {
     data: ['130', '230', '424', '618', '125', '117', '620'],
    name: 'Line2',
     type: 'line',
     },
   ];
  });

}

    setInterval(greetings, 2000);

how do u do resize for instance

what can i do with multiple instance ? how do we resize it

Question: Property 'chart' does not exist on type 'CreateComponentPublicInstance

Hi,
I added the vue3 echarts component globally in main.ts as shown below:

main.ts

import Notifications from '@kyvg/vue3-notification';
import { VueEcharts } from 'vue3-echarts';

import App from './App.vue';
import router from './router';

import './styles/main.css';
import Iam from './common/iam';

const app = createApp(App);

app.use(Notifications);
app.use(createPinia());
app.use(VueAxios, axios);
app.use(router);

app.component('vue-echarts', VueEcharts)

Iam.init();

app.mount('#app');

page vue:

<template>
...
                <vue-echarts :option="option" style="height: 500px" ref="chart" />
...
</template>

<script setup lang="ts">
-----snipped---

const option = reactive({
  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'
    }
  ]
});
-----snipped---
</script>

It works in dev mode, but when trying to check type using vue-tsc. I get the error below.

npx vue-tsc --noEmit -p tsconfig.vitest.json 

node_modules/vue3-echarts/index.ts:148:14 - error TS2339: Property 'chart' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{ option: { type: PropType<EChartsOption>; }; theme: { type: StringConstructor; default: string; }; groupId: { type: StringConstructor; default: null; }; loadingOption: { ...; }; initCfg: PropType<...>; }>> & { ...; }, ... 17 more ..., { ...; }>'.

148         this.chart.hideLoading();

Package versions:

     "vue": "^3.2.41"
    "vue3-echarts": "^1.1.0",
    "typescript": "~4.7.4",
    "vite": "^3.1.8",
    "vitest": "^0.24.5",
    "vue-tsc": "^1.0.8"

Are there any option that I should enable?

How to SetOption

vue3-echarts
function greetings() {
VueEcharts.setOption({
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
type: 'category',
},
series: [
{
data: ['150', '230', '224', '218', '135', '147', '260'],
name: 'Line1',
type: 'line',
},
],
});
}
setInterval(greetings, 2000);