vue-echarts封装组件

Posted 2022-11-02 Harris-H

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-echarts封装组件相关的知识，希望对你有一定的参考价值。

vue-echarts封装组件

1.安装&使用

npm install echarts vue-echarts

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>