vue-echarts封装组件

原创

Herio 2022-10-08 07:10:30 ©著作权

文章标签 echarts vue.js javascript ide 构造函数 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者Herio的原创作品，请联系作者获取转载授权，否则将追究法律责任

vue-echarts封装组件

1.安装&使用

npm install

2.配置项说明

这里用饼状图pie演示。

myChart01.vue

<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: "myChart01",
  components: {
    //使用到的图表组件
    VChart,
  },
  provide: {
    [THEME_KEY]: "dark", //设置主题
  },
  setup() {
    //启动函数
    //配置option
    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: [
        //系列选择pie,进行相关数据配置
        {
          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 {
  /* 100vh 表示高度为屏幕可见的100% */
  height: 300px;
}</style>

App.vue

<script setup>// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from "./components/HelloWorld.vue";
import myChart01 from "./components/myChart01.vue";</script>

<template>
  <div class="mybox">
    <myChart01 />
  </div>
  <!-- <HelloWorld msg="Vite + Vue" /> -->
</template>

<style scoped>.mybox {
  width: 500px;
  height: 500px;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}</style>