MQTTvue/mqtt-vue-dashboard/node_modules/echarts-for-vue

简体中文 | English

ECharts For Vue  

📊📈 ECharts wrapper component for Vue 3, 2 and TypeScript

Features

1. Support for Vue 3 and 2;
2. Support auto resize;
3. Conform to the habits of Vue and ECharts users;
4. Provide pure function API, no side effects;
5. Lightweight encapsulation, easy to use;

Install

npm i -S echarts-for-vue

Usage

1. Vue 3

   import { createApp, h } from 'vue';
   import { plugin } from 'echarts-for-vue';
   import * as echarts from 'echarts';
   
   const app = createApp({ /*...*/ });
   app.use(plugin, { echarts, h });                        // use as a plugin
   

   <template>
   <ECharts ref="chart" :option="option" />
   </template>
   
   <script>
   import { createComponent } from 'echarts-for-vue';
   import * as echarts from 'echarts';
   import { h } from 'vue';
   
   export default {
       components: {
           ECharts: createComponent({ echarts, h }),   // use as a component
       },
       data: () => ({
           option: { /*...*/ },
       }),
       methods: {
           doSomething() {
               this.$refs.chart.inst.getWidth();       // call the method of ECharts instance
           },
       },
   }
   </script>
   

2. Vue 2

   import Vue from 'vue';
   import { plugin } from 'echarts-for-vue';
   import * as echarts from 'echarts';
   
   Vue.use(plugin, { echarts });                           // use as a plugin
   

   <template>
   <ECharts ref="chart" :option="option" />
   </template>
   
   <script>
   import { createComponent } from 'echarts-for-vue';
   import * as echarts from 'echarts';
   
   export default {
       components: {
           ECharts: createComponent({ echarts }),      // use as a component
       },
       data: () => ({
           option: { /*...*/ },
       }),
       methods: {
           doSomething() {
               this.$refs.chart.inst.getWidth();       // call the method of ECharts instance
           },
       },
   }
   </script>
   

3. More examples

4. Online demo

Global API

|Definition|Return|Description| |-|-|-| |createComponent(options: Options): object|Component definition object|Create a component| |plugin(app: Vue, options: Options): void||The installation method of plugin|

Options

|Property|Type|Default|Optional|Description| |-|-|-|-|-| |echarts|typeof echarts|||The global object of ECharts library| |h|Function||✔|The method createElement of Vue (Required for Vue 3)| |ResizeObserver|typeof ResizeObserver|window.ResizeObserver|✔|When the global ResizeObserver doesn't exist, the polyfill provides support| |name|string|"ECharts"|✔|The registered name of the component| |deepWatchOption|boolean|true|✔|deep watch prop "option"|

Instance Properties

|Name|Type|ReadOnly|Description| |-|-|-|-| |inst|ECharts|✔|ECharts instance|

props

|Name|Type|Default|Reactive|Description| |-|-|-|-|-| |initTheme|object | string||✔|The parameter theme of echarts.init method, see| |initOpts|object||✔|The parameter opts of echarts.init method, see| |loading|boolean|false|✔|Shows loading animation| |loadingType|string|"default"||The parameter type of ECharts instance method showLoading, see| |loadingOpts|EChartsLoadingOption|||The parameter opts of ECharts instance method showLoading, see| |option|EChartOption||✔|The parameter option of ECharts instance method setOption, see| |optionOpts|EChartsOptionConfig|||The parameter opts of ECharts instance method setOption, see| |events|Arguments[]|||An array element is the arguments of ECharts instance method on, see| |autoResize|boolean|true|✔|Auto resize|

Beyond the props above, the remaining properties are passed to the root element of the component, such as style, class or onclick

Events

|Name|Description| |-|-| |resize|Trigger when chart is resized|

methods

|Definition|Description| |-|-| |setOption(option: EChartOption, opts?: EChartsOptionConfig): void|Call the method setOption of ECharts instance, see| |resize(): void|Resize chart (Based on the size of root element)| |addResizeListener(): void|Add "resize" listener| |removeResizeListener(): void|Remove "resize" listener|

Contact

1. WeChat: cai_fanwei
2. QQ: 854521460
3. QQ Group: 663286147
4. E-mail: ambit_tsai@qq.com