1<template>
2  <v-chart class="chart" :option="option" />
3</template>
4
5<script setup>
6import { use } from "echarts/core";
7import { CanvasRenderer } from "echarts/renderers";
8import { PieChart } from "echarts/charts";
9import {
10  TitleComponent,
11  TooltipComponent,
12  LegendComponent
13} from "echarts/components";
14import VChart, { THEME_KEY } from "vue-echarts";
15import { ref, provide } from "vue";
16
17use([
18  CanvasRenderer,
19  PieChart,
20  TitleComponent,
21  TooltipComponent,
22  LegendComponent
23]);
24
25provide(THEME_KEY, "dark");
26
27const option = ref({
28  title: {
29    text: "Traffic Sources",
30    left: "center"
31  },
32  tooltip: {
33    trigger: "item",
34    formatter: "{a} <br/>{b} : {c} ({d}%)"
35  },
36  legend: {
37    orient: "vertical",
38    left: "left",
39    data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
40  },
41  series: [
42    {
43      name: "Traffic Sources",
44      type: "pie",
45      radius: "55%",
46      center: ["50%", "60%"],
47      data: [
48        { value: 335, name: "Direct" },
49        { value: 310, name: "Email" },
50        { value: 234, name: "Ad Networks" },
51        { value: 135, name: "Video Ads" },
52        { value: 1548, name: "Search Engines" }
53      ],
54      emphasis: {
55        itemStyle: {
56          shadowBlur: 10,
57          shadowOffsetX: 0,
58          shadowColor: "rgba(0, 0, 0, 0.5)"
59        }
60      }
61    }
62  ]
63});
64</script>
65
66<style scoped>
67.chart {
68  height: 400px;
69}
70</style>

1<template>
2  <v-chart class="chart" :option="option" />
3</template>
4
5<script>
6import { use } from "echarts/core";
7import { CanvasRenderer } from "echarts/renderers";
8import { PieChart } from "echarts/charts";
9import {
10  TitleComponent,
11  TooltipComponent,
12  LegendComponent
13} from "echarts/components";
14import VChart, { THEME_KEY } from "vue-echarts";
15
16use([
17  CanvasRenderer,
18  PieChart,
19  TitleComponent,
20  TooltipComponent,
21  LegendComponent
22]);
23
24export default {
25  name: "HelloWorld",
26  components: {
27    VChart
28  },
29  provide: {
30    [THEME_KEY]: "dark"
31  },
32  data() {
33    return {
34      option: {
35        title: {
36          text: "Traffic Sources",
37          left: "center"
38        },
39        tooltip: {
40          trigger: "item",
41          formatter: "{a} <br/>{b} : {c} ({d}%)"
42        },
43        legend: {
44          orient: "vertical",
45          left: "left",
46          data: [
47            "Direct",
48            "Email",
49            "Ad Networks",
50            "Video Ads",
51            "Search Engines"
52          ]
53        },
54        series: [
55          {
56            name: "Traffic Sources",
57            type: "pie",
58            radius: "55%",
59            center: ["50%", "60%"],
60            data: [
61              { value: 335, name: "Direct" },
62              { value: 310, name: "Email" },
63              { value: 234, name: "Ad Networks" },
64              { value: 135, name: "Video Ads" },
65              { value: 1548, name: "Search Engines" }
66            ],
67            emphasis: {
68              itemStyle: {
69                shadowBlur: 10,
70                shadowOffsetX: 0,
71                shadowColor: "rgba(0, 0, 0, 0.5)"
72              }
73            }
74          }
75        ]
76      }
77    };
78  }
79};
80</script>
81
82<style scoped>
83.chart {
84  height: 400px;
85}
86</style>

1<script src="https://cdn.jsdelivr.net/npm/vue@3.4.33"></script>
2<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
3<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>

1const app = Vue.createApp(...)
2
3// 全局注册组件（也可以使用局部注册）
4app.component('v-chart', VueECharts)

1<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
2<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
3<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>

1// 全局注册组件（也可以使用局部注册）
2Vue.component("v-chart", VueECharts);

1import { THEME_KEY } from 'vue-echarts'
2import { provide } from 'vue'
3
4// 组合式 API
5provide(THEME_KEY, 'dark')
6
7// 选项式 API
8{
9  provide: {
10    [THEME_KEY]: 'dark'
11  }
12}

1import { THEME_KEY } from 'vue-echarts'
2
3// 组件选项中
4{
5  provide: {
6    [THEME_KEY]: 'dark'
7  }
8}

Note

在 Vue 2 中，如果你想动态地改变这些选项，那么你需要提供一个对象。

1// 组件选项中
2{
3  data () {
4    return {
5      theme: { value: 'dark' }
6    }
7  },
8  provide () {
9    return {
10      [THEME_KEY]: this.theme
11    }
12  }
13}