carterli/vue3-echarts

Echarts binding for Vue 3

vue3-echarts's Issues

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 TO Render Toggle SVG or Canvas

HOW TO Render Toggle SVG or Canvas E-charts

how do u do resize for instance

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

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>

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?

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 版本有问题 导致编译错误

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);

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>