Vue3 使用ApexCharts图表

小半 • 2024年3月2日下午6:00 • 前端开发 • 阅读 478

ApexCharts是我们常用的图表， Vue-ApexCharts 是 ApexCharts 的包装器组件。我们如何在Vue项目中使用呢？

安装

npm install --save apexcharts //标签
npm install --save vue3-apexcharts

配置

在main.js 中导入插件

import VueApexCharts from "vue3-apexcharts";

const app = createApp(App);
app.use(VueApexCharts);
// The app.use(VueApexCharts) will make <apexchart> component available everywhere.

使用

条形图

<template>
 <apexchart width="500" type="bar" :options="barOptions" :series="barOptions.series"></apexchart>
 </template>
 
 <script setup>
  // 图标配置,更多配置可以看文档
  const barOptions = ref(null)
  const  barOptions = {
    //图标配置
    chart: {
      id: 'bar1',
    },
    //绘图选项
    plotOptions: {
      bar: {
        horizontal: true, //横向，默认竖直
      }
    },
    //数据标签
    dataLabels: {
      enabled: false
    },
    // x轴
    xaxis: {
      categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany']
    },
     //颜色
    colors : ["#534686"],
    series: [{
      data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
    }]
  }
 // 更新数据
 const updateChart = () => {
    const max = 90;
    const min = 20;
    const newData = barOptions.value.series[0].data.map(() => {
      return Math.floor(Math.random() * (max - min + 1)) + min
    })
    // In the same way, update the series option
    barOptions.value.series = [{
      data: newData
    }]

    console.log('barOptions.series',barOptions.value.series)
  }

</script>

柱形图

<template>
 <apexchart width="500" type="bar" :options="columnOption" :series="columnOption.series"></apexchart>
 </template>
 <script setup>
 const columnOption = {
    chart: {
      id:'bar2',
      toolbar:{
        show: false //不显示工具条
      }
    },
    plotOptions: {
      bar: {
        horizontal: false,
        endingShape: 'rounded',
        columnWidth: '55%',
      },
    },
    stroke: {
      show: true,
      width: 2,
      colors: ['transparent']
    },
    //数据标签
    dataLabels: {
      enabled: false
    },
    xaxis: {
      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
    },
    series: [{
      name: 'Net Profit',
      data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
    }, {
      name: 'Revenue',
      data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
    }, {
      name: 'Free Cash Flow',
      data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
    }],

    yaxis: {
      title: {
        text: '$ (thousands)'
      }
    },
    fill: {
      opacity: 1

    },
    tooltip: {
      y: {
        formatter: function (val) {
          return "$ " + val + " thousands"
        }
      }
    },
    colors:[ '#534686' , '#f8d62b' , '#51bb25']
  }
  </script>