Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lloydzhou/vuecharts
the vue toolkit based on echarts
https://github.com/lloydzhou/vuecharts
chart charts echarts echarts-gl svg typescript vue
Last synced: 1 day ago
JSON representation
the vue toolkit based on echarts
- Host: GitHub
- URL: https://github.com/lloydzhou/vuecharts
- Owner: lloydzhou
- License: mit
- Created: 2022-06-22T05:14:56.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-02-22T09:52:24.000Z (over 1 year ago)
- Last Synced: 2024-10-11T01:32:19.430Z (24 days ago)
- Topics: chart, charts, echarts, echarts-gl, svg, typescript, vue
- Language: TypeScript
- Homepage:
- Size: 930 KB
- Stars: 27
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.en-us.md
- License: LICENSE
Awesome Lists containing this project
- awesome-echarts - vuecharts3 - 以组件方式调用echarts绘制图表（API参考BizCharts） (Frameworks / Vue Component)
README
# vuecharts
[简体中文](./README.md) | English
## design
1. [Baidu EFE team](https://github.com/ecomfe) have one vue component wrapper for echarts which named [vue-echarts](https://github.com/ecomfe/vue-echarts)
2. this project write vue3 component wrapper echarts, API like [BizCharts](https://github.com/alibaba/BizCharts), using this project **draw** charts, not **configure** charts!
3. typescript support
## install
```
yarn add vuecharts3
```
## Components
||export components|
|---|---|
|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`|
## DEMO
```
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
Heatmap work with VisualMap
```
## custom component
1. echarts [example](https://echarts.apache.org/examples/zh/editor.html?c=treemap-sunburst-transition) by using **vuecharts3**
```
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
```
