Vue3 统计图表 Apex Charts使用方式

Vue3 统计图表 Apex Charts使用方式

官方文档地址:https://apexcharts.com/docs/vue-charts/

官方示例地址:https://apexcharts.com/vue-chart-demos/

  1. 准备 手脚架

项目终端下加载:

npm install --save apexcharts 
npm install --save vue3-apexcharts
  1. 所需项目vue页面引入文件
import apexchart from 'vue3-apexcharts'
  1. 统计图完整示例
<template>
    <div class="chartsview_box" id="chart">
        <apexchart width="500" type="bar" :options="options" :series="series"></apexchart>
    </div>
</template>

<script setup>
    import {
        ref
    } from 'vue';
    import apexchart from 'vue3-apexcharts'

    //数据
    let options = {
        chart: {
            id: 'vuechart-example'
        },
        xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
        },
       colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
       labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
        
    }
    let series = [{
        name: 'series-1',
        data: [30, 40, 45, 50, 49, 60, 70, 91]
    }]
</script>

365 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注