Vue3使用vue-echarts的案例

Vue3使用vue-echarts的案例

安装

npm install echarts vue-echarts

使用 dome Vue3 :->

main.js

import { createApp } from 'vue'
const app = createApp(App)
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
// 引入 echarts
import ECharts from 'vue-echarts'
// 导入 ECharts 核心组件和渲染器
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
// 导入需要的图例
import { LineChart } from 'echarts/charts';

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  LegendComponent
} from 'echarts/components';

// 注册必要的组件
echarts.use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  LegendComponent
]);

app.component('v-chart', ECharts)

app.use(createPinia())
app.use(router)

app.mount('#app')

组件内部

<template>
   <!-- 使用 vue-echarts 组件并绑定 option -->
   <v-chart class="chart" :option="option" />
   <button @click="updateChartData">更新数据</button>
 
 </template>
 
 <script setup>
 import { ref } from 'vue'
 // 你不需要在组件中直接引入 echarts，因为 vue-echarts 已经处理了初始化
 import * as echarts from 'echarts';
 
 // 定义图表配置作为响应式数据
 const option = ref({
   title: {
     text: 'Referer of a Website',
     subtext: 'Fake Data',
     left: 'center'
   },
   tooltip: {
     trigger: 'item'
   },
   legend: {
     orient: 'vertical',
     left: 'left'
   },
   series: [
     {
       name: 'Access From',
       type: 'pie',
       radius: '50%',
       data: [
         { value: 1048, name: 'Search Engine' },
         { value: 735, name: 'Direct' },
         { value: 580, name: 'Email' },
         { value: 484, name: 'Union Ads' },
         { value: 300, name: 'Video Ads' }
       ],
       emphasis: {
         itemStyle: {
           shadowBlur: 10,
           shadowOffsetX: 0,
           shadowColor: 'rgba(0, 0, 0, 0.5)'
         }
       }
     }
   ]
 });
 
 
 // 更新数据的方法
 function updateChartData() {
   // 这里是新的数据，可以根据实际需要来设置
   option.value.series[0].data = [
     { value: Math.random() * 1000, name: 'Search Engine' },
     { value: Math.random() * 1000, name: 'Direct' },
     { value: Math.random() * 1000, name: 'Email' },
     // 添加或更新数据
   ];
 }
 </script>
 
 <style>
 /* 定义图表的大小 */
 .chart {
   width: 600px;
   height: 400px;
 }
 </style>