简体中文 | English
- 官方团队Baidu EFE team有出一个vue封装的echarts库vue-echarts 。但是这个库和自己在vue里面封装没有啥太大区别。仍旧摆脱不了针对一个图表写一个巨大的配置文件。
- 参考BizCharts对G2这个库的封装方式，对echarts进行了封装。相对而言API更方便使用
使用ts-transformer-keys，从echarts导出的XXOption自动生成vue组件props
yarn add vuecharts3
- 定义一个
Chart组件作为画布 - 将echarts官方配置项每一个配置项使用统一的工厂函数构造成
Vue Component - 项目导出组件列表（新增支持echarts-gl）
| 导出组件 | |
|---|---|
| series | Line, Bar, Pie, Scatter, EffectScatter, Radar, Tree, Treemap, Sunburst, Boxplot, Candlestick, Heatmap, Map, Parallel, Lines, Graph, Sankey, Funnel, Gauge, PictorialBar, ThemeRiver, Custom |
| axis | XAxis, YAxis, Polar, RadiusAxis, AngleAxis, RadarAxis, ParallelCoordinates(parallel), ParallelAxis, SingleAxis, Calendar |
| dataZoom | DataZoom, Inside, Slider |
| visualMap | VisualMap, Continuous, Piecewise |
| graphic | Graphic, Group, Image, Text, Rect, Circle, Ring, Sector, Arc, Polygon, Polyline, GraphicLine(graphic.elements-line), BezierCurve |
| other | Title, Legend, Grid, Tooltip, AxisPointer, Toolbox, Brush, Geo, Timeline, Dataset, Aria |
| gl | Globe, Geo3d, Mapbox3d, Grid3D, XAxis3D, YAxis3D, ZAxis3D, Scatter3D, Bar3D, Line3D, Lines3D, Map3D, Surface, Polygons3D, ScatterGL, GraphGL, FlowGL |
import 'echarts'
import Echarts from 'vuecharts3'
const { Chart, Title, Tooltip, Line, Bar, Legend, Grid, XAxis, YAxis } = Echarts
export default defineComponent({
components: {
Chart,
Title, Tooltip, Bar, Line, Legend, Grid, XAxis, YAxis,
},
setup() {
return {}
}
})
// template
<template>
<div class="container">
<Chart>
<Grid :top="100" />
<Legend :data="['data1', 'data2']" :top="65" />
<Title text="顶部标题" subtext="顶部小标题" left="center" :top="10" />
<Title text="底部标题" top="bottom" left="center" />
<Bar name="data1" :data="[0.32, 0.45, 0.2]" />
<Bar name="data2" :data="[0.2, 0.5, 0.3]" />
<Line name="data2" :data="[0.2, 0.5, 0.3]" />
<YAxis />
<XAxis :data="['x1', 'x2', 'x3']" />
<Tooltip trigger="axis" />
</Chart>
<h2>Heatmap必须搭配VisualMap</h2>
<Chart>
<Tooltip position="top" />
<Grid top="10%" height="50%" />
<XAxis :data="hours" />
<YAxis :data="days" type="category" />
<VisualMap :calculable="true" orient='horizontal' left='center' bottom="15%" :min="0" max="10" />
<Heatmap name="Punch Card" :data="data" :label="{show: true}" :emphasis="{itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)'}}" />
</Chart>
</div>
</template>
- 通过自定义组件实现官方切换图像的example
import { contextSymbol } from 'vuecharts3'
const TreemapSunburstTransition = defineComponent({
name: 'TreemapSunburstTransition',
inject: [contextSymbol],
setup() {
const { chart } = inject(contextSymbol)
const interval = ref()
const state = reactive({
data: null,
type: '',
})
const url = "https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/echarts-package-size.json"
fetch(url).then(res => res.json()).then(data => {
state.data = data.children
console.log('data.value', data.children)
interval.value = setInterval(function () {
state.type = state.type == 'treemap' ? 'sunburst' : 'treemap'
console.log('state.type', state.type)
}, 3000);
})
onUnmounted(() => clearInterval(interval.value))
return () => state.type == 'treemap' ?
h(Treemap, {
id: 'echarts-package-size',
animationDurationUpdate: 1000,
roam: false,
nodeClick: undefined,
data: state.data,
universalTransition: true,
label: {
show: true
},
breadcrumb: {
show: false
}
}) : h(Sunburst, {
id: 'echarts-package-size',
radius: ['20%', '90%'],
animationDurationUpdate: 1000,
nodeClick: undefined,
data: state.data,
universalTransition: true,
itemStyle: {
borderWidth: 1,
borderColor: 'rgba(255,255,255,.5)'
},
label: {
show: false
}
})
}
})
// template
<Chart>
<TreemapSunburstTransition />
</Chart>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent