Vue3 setup+echarts使用教程附上[免费模板]vue3 setup+echarts使用教程实现按需引

vue3 setup+echarts使用教程

vue-echarts

优点

实现按需引入
语法轻量、高效、简洁
vue-echarts是封装后的vue插件，基于 ECharts v4.0.1+ 开发，依赖 Vue.js v2.2.6+，功能一样的只是把它封装成vue插件这样更方便以vue的方式去使用它。

传送门: ecomfe/vue-echarts: Apache ECharts component for Vue.js. (github.com)

模板效果图

引入实现

安装 npm install echarts vue-echarts
copy

官网代码分析

<template>
  <v-chart class="chart" :option="option" />
</template>

<script setup>
import { use } from "echarts/core";//导入use函数 用于注册ecahts所需的渲染器和图标组件
import { CanvasRenderer } from "echarts/renderers";//渲染器 用于绘制图表
import { PieChart } from "echarts/charts";//导入饼图
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";//导入一些组件 用于显示图标的标题 提示框 不同系列的标识和名称
import VChart, { THEME_KEY } from "vue-echarts"; //引入vchart组件和主题 主题可以自定义图标的样式
import { ref, provide } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);//通过use来注册所需要的渲染器和图表组件可以确保在渲染的时候使用这些组件

provide(THEME_KEY, "dark");//提供主题 dark暗色主题 light亮色

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)"
        }
      }
    }
  ]
});
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>

options配置

传送门:Examples - Apache ECharts

点进去一个例子都会有options,我们只需要复制下来，然后在vue中引入对应的模板与图形组件，用vchart绑定options 然后根据对应的参数更改我们想要的即可，如果是请求api，那么请求之后再更改数据

模板

这个模板的实现效果就是标题2的图片如果你的代码分析看懂了，相信你理解下面的代码也不是问题所以大家学会了嘛，别忘了点个赞再走哦,我是tinananana，感谢你的阅读，我也会继续更新好的文章。bye!

<template>
    <div class="head">
        <div class="card" v-for="nav in headNav">
            <el-icon>
                <component :is="icon[nav.id]" />
            </el-icon>
            <div class="desc">
                <div>{{ nav.name }}</div>
                <div>{{ nav.num }}</div>
            </div>
        </div>
    </div>

    <div class="echart">
        <v-chart class="chart" :option="option" autoresize />
        <v-chart class="chart" :option="lineOption" autoresize />
    </div>
</template>

<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart, LineChart, } from 'echarts/charts';
import { SettingOutlined, ToTopOutlined, SendOutlined, UserOutlined } from '@ant-design/icons-vue'
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide, reactive } from 'vue';

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

provide(THEME_KEY, 'light');

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)',
                },
            },
        },
    ],
});

const lineOption = ref({
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        }
    ]
})


const paramLine = reactive({
    totalUser: 100,
    totalWish: 200,
    todayMatch: 23,
    totalMatch: 100,
})
const icon = {
    145: ToTopOutlined,
    101: SendOutlined,
    125: UserOutlined,
    103: SettingOutlined,
}
const headNav = reactive([
    {
        id: 125,
        name: '总用户',
        num: paramLine.totalUser,
    },
    {
        id: 101,
        name: '总愿望',
        num: paramLine.totalWish,
    },
    {
        id: 145,
        name: '今日匹配',
        num: paramLine.todayMatch,
    },
    {
        id: 103,
        name: '总匹配',
        num: paramLine.totalMatch,
    }
])
</script>

<style scoped lang="scss">
.echart {
    display: flex;
}

.chart {
    height: 100vh;
}

.head {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    height: 150px;
}

.card {
    display: flex;
    background-color: rgba(236, 237, 238, 0.212);
    width: 98%;
    box-sizing: border-box;
    padding: 10px;
    align-items: center;
    justify-content: center;

    .desc {
        margin-left: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
</style>

Vue3 setup+echarts使用教程 附上[免费模板]