百度开源的成熟可视化库
支持30+种图表类型
完善的文档和社区支持
与Vue3完美兼容
npm create vue@latest
# 选择TypeScript、Pinia等按需配置
npm install echarts vue-echarts @vueuse/core
# 推荐版本:
# [email protected]
# [email protected]
// src/plugins/echarts.ts
import { use } from 'echarts/core'
import { SVGRenderer } from 'echarts/renderers'
import {
LineChart,
BarChart,
PieChart,
ScatterChart
} from 'echarts/charts'
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent
} from 'echarts/components'
use([
SVGRenderer,
LineChart,
BarChart,
PieChart,
ScatterChart,
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent
])
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ECharts from 'vue-echarts'
import './plugins/echarts'
const app = createApp(App)
app.component('VChart', ECharts)
const barOption = ref({
dataset: {
source: [
['产品', '2022', '2023'],
['手机', 4321, 5932],
['电脑', 2843, 3765],
['平板', 1567, 2891]
]
},
legend: { top: 30 },
xAxis: { type: 'category' },
yAxis: {},
series: [
{ type: 'bar', seriesLayoutBy: 'row' },
{ type: 'bar', seriesLayoutBy: 'row' }
]
})
const pieOption = ref({
title: { text: '市场份额', left: 'center' },
tooltip: { trigger: 'item' },
series: [{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: { show: true, formatter: '{b}: {d}%' },
data: [
{ value: 1048, name: '阿里云' },
{ value: 735, name: '腾讯云' },
{ value: 580, name: '华为云' }
]
}]
})
const scatterOption = ref({
xAxis: { name: '广告投入(万)' },
yAxis: { name: '销售额(万)' },
dataset: {
source: [
[10, 30],
[15, 42],
[20, 55],
[25, 68],
[30, 80]
]
},
series: [
{
type: 'scatter',
symbolSize: 12
},
{
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: { type: 'dashed' }
}
]
})
const updateChart = () => {
lineOption.value.series[0].data =
Array.from({length:4}, () => Math.random()*100)
}
import { registerTheme } from 'echarts/core'
registerTheme('dark', {
backgroundColor: '#1a1a1a',
textStyle: { color: '#fff' }
})
// 使用时
Q1:图表不显示?
检查容器高度是否为0
查看控制台报错
确保正确引入组件
Q2:如何响应式布局?
使用autoresize
属性
外层容器使用响应式单位(vw/%)
配合@vueuse/core
的useResizeObserver
Q3:大数据量卡顿?
开启数据采样(sampling)
使用大数据模式(large: true)
开启渐变动画(animation: true)
项目源码:GitHub示例仓库
如果对你有帮助,请帮忙点个赞