一遍文章教你快速入门vue3+ts+Echarts

最新推荐文章于 2024-06-21 16:34:48 发布

前端搬砖达人

最新推荐文章于 2024-06-21 16:34:48 发布

阅读量642

点赞数 8

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/wyq12138/article/details/135749278

版权

本文介绍了在Vue3项目中如何下载并按需引入ECharts库，以及如何在组件中配置和使用环形饼图作为示例，同时提到了参考官方文档的重要性。

摘要由CSDN通过智能技术生成

之前做得项目有vue2和vue3,使用echarts的方式大同小异，这篇文章就先介绍vue3的用法

下载echart

可以看官方文档，其实说得很清楚echart官方

npm install echarts --save

按需引入echart

由于我得项目中使用到得echart不多，所以这里我引入几个组件即可，缩小项目体积

创建util/echart.ts

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";

/** 引入柱状图 + 折线图 + 饼图，图表后缀都为 Chart，一般常用的就这三个，如果还需要其他的，就自行添加  */
import { BarChart, LineChart, PieChart } from "echarts/charts";

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";

// 标签自动布局
import { LabelLayout, UniversalTransition } from "echarts/features";

// 引入 Canvas 渲染器
import { CanvasRenderer } from "echarts/renderers";

// 注册
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
]);
export default echarts;

引入main.ts

// 引入echarts
import echarts from "./utils/echarts";
//全局注册
app.config.globalProperties.$echarts = echarts

使用

这里我举例环形

<div class="fl" style="width: calc(100% - 130px)">
    <div class="canvas source-canvas" ref="source" style="width: 100%"></div>
  </div>

let source = ref(null);
let sourceOption = reactive({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
  },
  legend: {
    top: '5%',
    left: 'center',
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' },
      ],
    },
  ],
});
//引入全局注册的proxy
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
let myChart = proxy.$echarts.init(source.value);
myChart.setOption(sourceOption);

在这里插入图片描述