数据可视化是现代Web应用的重要组成部分。本文将介绍主流的数据可视化方案及其适用场景。
1 SVG vs Canvas
// SVG适用于交互性强、元素较少的图表constSVGChart={template:`<svg width="400" height="300"> <circle v-for="(item, index) in data" :key="index" :cx="item.x" :cy="item.y" :r="item.value" :fill="getColor(item.category)" /> </svg>`,props:['data']}// Canvas适用于数据量大、动画频繁的场景exportdefault{mounted(){this.drawChart()},methods:{drawChart(){constcanvas=this.$refs.canvasconstctx=canvas.getContext('2d')this.data.forEach(point=>{ctx.beginPath()ctx.arc(point.x,point.y,point.radius,0,2*Math.PI)ctx.fillStyle=point.color ctx.fill()})}}}2 图表库选型对比
// ECharts使用示例import*asechartsfrom'echarts'exportdefault{mounted(){constchart=echarts.init(this.$refs.chart)chart.setOption({tooltip:{},xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},series:[{data:[120,200,150,80,70,110,130],type:'bar'}]})}}3 自定义可视化组件
<template> <div class="progress-bar" :style="barStyle"> <div class="progress-fill" :style="fillStyle"> <span class="progress-text">{{ percentage }}%</span> </div> </div> </template> <script setup> import { computed } from 'vue' const props = defineProps({ percentage: { type: Number, default: 0, validator: value => value >= 0 && value <= 100 }, color: { type: String, default: '#409eff' } }) const barStyle = computed(() => ({ backgroundColor: '#ebeef5' })) const fillStyle = computed(() => ({ width: `${props.percentage}%`, backgroundColor: props.color })) </script> <style scoped> .progress-bar { height: 20px; border-radius: 10px; overflow: hidden; position: relative; } .progress-fill { height: 100%; border-radius: 10px; transition: width 0.3s ease; display: flex; align-items: center; justify-content: center; } .progress-text { color: white; font-size: 12px; font-weight: bold; } </style>
