A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/ecomfe/vue-echarts/tree/6.x below:

GitHub - ecomfe/vue-echarts at 6.x

Vue.js (v2/v3) component for Apache EChartsβ„’ (v5).

View Demo β†’

πŸ’‘ Heads up πŸ’‘

If you are migrating from vue-echarts ≀ 5, you should read the Migration to v6 section before you update to v6.

Not ready yet? Read documentation for older versions here β†’

npm i echarts vue-echarts

To make vue-echarts work for Vue 2 (<2.7.0), you need to have @vue/composition-api installed (@vue/runtime-core for TypeScript support):

npm i @vue/composition-api
npm i @vue/runtime-core # for TypeScript support

If you are using NuxtJS on top of Vue 2, you'll need @nuxtjs/composition-api:

npm i @nuxtjs/composition-api

And then add '@nuxtjs/composition-api/module' in the buildModules option in your nuxt.config.js.

Vue 3 Demo β†’ 
<template>
  <v-chart class="chart" :option="option" />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, provide } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

provide(THEME_KEY, "dark");

const option = ref({
  title: {
    text: "Traffic Sources",
    left: "center"
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    orient: "vertical",
    left: "left",
    data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
  },
  series: [
    {
      name: "Traffic Sources",
      type: "pie",
      radius: "55%",
      center: ["50%", "60%"],
      data: [
        { value: 335, name: "Direct" },
        { value: 310, name: "Email" },
        { value: 234, name: "Ad Networks" },
        { value: 135, name: "Video Ads" },
        { value: 1548, name: "Search Engines" }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
});
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>
Vue 2 Demo β†’ 
<template>
  <v-chart class="chart" :option="option" />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  name: "HelloWorld",
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: "dark"
  },
  data() {
    return {
      option: {
        title: {
          text: "Traffic Sources",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "Direct",
            "Email",
            "Ad Networks",
            "Video Ads",
            "Search Engines"
          ]
        },
        series: [
          {
            name: "Traffic Sources",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "Direct" },
              { value: 310, name: "Email" },
              { value: 234, name: "Ad Networks" },
              { value: 135, name: "Video Ads" },
              { value: 1548, name: "Search Engines" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  }
};
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>

Important

We encourage manually importing components and charts from ECharts for smaller bundle size. We've built an import code generator to help you with that. You can just paste in your option code and we'll generate the precise import code for you.

Try it β†’

But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:

Drop <script> inside your HTML file and access the component via window.VueECharts.

Vue 3 Demo β†’ 
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.23"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.3"></script>
const app = Vue.createApp(...)

// register globally (or you can do it locally)
app.component('v-chart', VueECharts)
Vue 2 Demo β†’ 
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.3"></script>
// register globally (or you can do it locally)
Vue.component("v-chart", VueECharts);

See more examples here.

You can bind events with Vue's v-on directive.

<template>
  <v-chart :option="option" @highlight="handleHighlight" />
</template>

Note

Only the .once event modifier is supported as other modifiers are tightly coupled with the DOM event system.

Vue-ECharts support the following events:

See supported events here β†’

As Vue-ECharts binds events to the ECharts instance by default, there is some caveat when using native DOM events. You need to prefix the event name with native: to bind native DOM events (or you can use the .native modifier in Vue 2, which is dropped in Vue 3).

<template>
  <v-chart @native:click="handleClick" />
</template>

Vue-ECharts provides provide/inject API for theme, init-options, update-options and loading-options to help configuring contextual options. eg. for init-options you can use the provide API like this:

Vue 3 
import { THEME_KEY } from 'vue-echarts'
import { provide } from 'vue'

// composition API
provide(THEME_KEY, 'dark')

// options API
{
  provide: {
    [THEME_KEY]: 'dark'
  }
}
Vue 2 
import { THEME_KEY } from 'vue-echarts'

// in component options
{
  provide: {
    [THEME_KEY]: 'dark'
  }
}

Note

You need to provide an object for Vue 2 if you want to change it dynamically.

// in component options
{
  data () {
    return {
      theme: { value: 'dark' }
    }
  },
  provide () {
    return {
      [THEME_KEY]: this.theme
    }
  }
}

Static methods can be accessed from echarts itself.

CSP: style-src or style-src-elem

If you are applying a CSP to prevent inline <style> injection, you need to use files from dist/csp directory and include dist/csp/style.css into your app manually.

πŸ’‘ Please make sure to read the migration guide for ECharts 5 as well.

The following breaking changes are introduced in vue-echarts@6:

Open http://localhost:8080 to see the demo.

The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4