Vue-ECharts:Apache ECharts 的Vue.js组件,兼容Vue2.x/3.x版本

Vue-ECharts 基于 Apache ECharts 5 进行开发封装,同时支持 Vue.js 2/3。

若您准备从 vue-echarts ≤ 5 的版本迁移到新版本,请在升级 v6 前阅读 迁移到 v6 部分文档。

没准备好的话,可以继续阅读老版本的文档。前往 →

Github:https://github.com/ecomfe/vue-echarts

官方文档:https://vue-echarts.vercel.app/

使用方法

安装

npm install echarts vue-echarts

要在 Vue 2 下使用 vue-echarts,需要确保 @vue/composition-api 已经安装

npm i -D @vue/composition-api
Vue3Vue2
import { createApp } from 'vue'
import ECharts from 'vue-echarts'
import { use } from "echarts/core";

// 手动引入 ECharts 各模块来减小打包体积
import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);

const app = createApp(...)

// 全局注册组件(也可以使用局部注册)
app.component('v-chart', ECharts)

app.mount(...)
import Vue from 'vue'
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'
// 手动引入 ECharts 各模块来减小打包体积

import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);

// 全局注册组件(也可以使用局部注册)
Vue.component('v-chart', ECharts)

new Vue(...)

为了更小的打包体积,我们建议手动从 ECharts 引入单个图表和组件。请参考所有支持的渲染器/图表/组件。前往 →

但如果你实在需要全量引入 ECharts 从而无需手动引入模块,只需要在代码中添加:

import "echarts";

单文件组件示例

Vue3Vue2
<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";
import { ref, defineComponent } from "vue";

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

export default defineComponent({
  name: "HelloWorld",
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: "dark"
  },
  setup: () => {
    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)"
            }
          }
        }
      ]
    });

    return { option };
  }
});
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>
<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>

CDN & 全局变量

用如下方式在 HTML 中插入 <script> 标签,并且通过 window.VueECharts 来访问组件接口:

Vue3Vue2
<script src="https:[email protected]"></script>
<script src="https:[email protected]"></script>
<script src="https:[email protected]"></script>
const app = Vue.createApp(...)

// 全局注册组件(也可以使用局部注册)
app.component('v-chart', VueECharts)

Demo →

<script src="https:[email protected]"></script>
<script src="https:[email protected][email protected]"></script>
<script src="https:[email protected]"></script>
<script src="https:[email protected]"></script>
// 全局注册组件(也可以使用局部注册)
Vue.component("v-chart", VueECharts);

Demo →

可以在这里查看更多例子。

更多资料可以查看中文文档:https://github.com/ecomfe/vue-echarts/blob/main/README.zh-Hans.md

给TA买糖
共{{data.count}}人
人已赞赏
前端库/框架

Yarn入门教程 - 使用方法

2020-11-12 10:22:18

其它

安装NPM包时报错“ run `npm audit fix` to fix them, or `npm audit` for details”

2020-10-27 22:46:43

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索