{"id":13531747,"url":"https://github.com/lloydzhou/vuecharts","last_synced_at":"2025-04-11T12:42:07.613Z","repository":{"id":37687734,"uuid":"506106306","full_name":"lloydzhou/vuecharts","owner":"lloydzhou","description":"the vue toolkit based on echarts","archived":false,"fork":false,"pushed_at":"2023-02-22T09:52:24.000Z","size":952,"stargazers_count":27,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T04:00:45.737Z","etag":null,"topics":["chart","charts","echarts","echarts-gl","svg","typescript","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lloydzhou.png","metadata":{"files":{"readme":"README.en-us.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-06-22T05:14:56.000Z","updated_at":"2025-03-29T14:13:41.000Z","dependencies_parsed_at":"2024-01-13T23:51:10.040Z","dependency_job_id":"d33b13b9-4999-47ba-a846-b4ea5617f13c","html_url":"https://github.com/lloydzhou/vuecharts","commit_stats":{"total_commits":58,"total_committers":1,"mean_commits":58.0,"dds":0.0,"last_synced_commit":"7ffd7fc5b5387598886b41e781ec7b63a6e2f3b7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydzhou%2Fvuecharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydzhou%2Fvuecharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydzhou%2Fvuecharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydzhou%2Fvuecharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lloydzhou","download_url":"https://codeload.github.com/lloydzhou/vuecharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248402524,"owners_count":21097330,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","charts","echarts","echarts-gl","svg","typescript","vue"],"created_at":"2024-08-01T07:01:05.316Z","updated_at":"2025-04-11T12:42:07.273Z","avatar_url":"https://github.com/lloydzhou.png","language":"TypeScript","funding_links":[],"categories":["Frameworks"],"sub_categories":["Vue Component"],"readme":"# vuecharts\n\n[简体中文](./README.md) | English\n\n\u003ca href=\"https://www.npmjs.com/package/vuecharts3\"\u003e\u003cimg alt=\"NPM Package\" src=\"https://img.shields.io/npm/v/vuecharts3.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vuecharts3\"\u003e\u003cimg alt=\"NPM Size\" src=\"https://img.shields.io/bundlephobia/minzip/vuecharts3\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vuecharts3\"\u003e\u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/vuecharts3?logo=npm\u0026style=flat-square\"\u003e\u003c/a\u003e\n\u003ca href=\"/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/lloydzhou/vuecharts?style=flat-square\" alt=\"MIT License\"\u003e\u003c/a\u003e\n\n## design\n1. [Baidu EFE team](https://github.com/ecomfe) have one vue component wrapper for echarts which named [vue-echarts](https://github.com/ecomfe/vue-echarts)\n2. this project write vue3 component wrapper echarts, API like [BizCharts](https://github.com/alibaba/BizCharts), using this project **draw** charts, not **configure** charts!\n3. typescript support\n\n\n## install\n```\nyarn add vuecharts3\n```\n\n## Components\n\n||export components|\n|---|---|\n|series|`Line`, `Bar`, `Pie`, `Scatter`, `EffectScatter`, `Radar`, `Tree`, `Treemap`, `Sunburst`, `Boxplot`, `Candlestick`, `Heatmap`, `Map`, `Parallel`, `Lines`, `Graph`, `Sankey`, `Funnel`, `Gauge`, `PictorialBar`, `ThemeRiver`, `Custom`|\n|axis|`XAxis`, `YAxis`, `Polar`, `RadiusAxis`, `AngleAxis`, `RadarAxis`, `ParallelCoordinates`(`parallel`), `ParallelAxis`, `SingleAxis`, `Calendar`|\n|dataZoom|`DataZoom`, `Inside`, `Slider`|\n|visualMap|`VisualMap`, `Continuous`, `Piecewise`|\n|graphic|`Graphic`, `Group`, `Image`, `Text`, `Rect`, `Circle`, `Ring`, `Sector`, `Arc`, `Polygon`, `Polyline`, `GraphicLine`(`graphic.elements-line`), `BezierCurve`|\n|other|`Title`, `Legend`, `Grid`, `Tooltip`, `AxisPointer`, `Toolbox`, `Brush`, `Geo`, `Timeline`, `Dataset`, `Aria`|\n\n\n## DEMO\n```\nimport 'echarts'\nimport Echarts from 'vuecharts3'\n\nconst { Chart, Title, Tooltip, Line, Bar, Legend, Grid, XAxis, YAxis } = Echarts\n\nexport default defineComponent({\n\n  components: {\n    Chart,\n    Title, Tooltip, Bar, Line, Legend, Grid, XAxis, YAxis,\n  },\n\n  setup() {\n    return {}\n  }\n})\n\n\n// template\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"container\"\u003e\n    \u003cChart\u003e\n      \u003cGrid :top=\"100\" /\u003e\n      \u003cLegend :data=\"['data1', 'data2']\" :top=\"65\" /\u003e\n      \u003cTitle text=\"Top Title\" subtext=\"sub title\" left=\"center\" :top=\"10\" /\u003e\n      \u003cTitle text=\"Bottom Title\" top=\"bottom\" left=\"center\" /\u003e\n      \u003cBar name=\"data1\" :data=\"[0.32, 0.45, 0.2]\" /\u003e\n      \u003cBar name=\"data2\" :data=\"[0.2, 0.5, 0.3]\" /\u003e\n      \u003cLine name=\"data2\" :data=\"[0.2, 0.5, 0.3]\" /\u003e\n      \u003cYAxis /\u003e\n      \u003cXAxis :data=\"['x1', 'x2', 'x3']\" /\u003e\n      \u003cTooltip trigger=\"axis\" /\u003e\n    \u003c/Chart\u003e\n    \u003ch2\u003eHeatmap work with VisualMap\u003c/h2\u003e\n    \u003cChart\u003e\n      \u003cTooltip position=\"top\" /\u003e\n      \u003cGrid top=\"10%\" height=\"50%\" /\u003e\n      \u003cXAxis :data=\"hours\" /\u003e\n      \u003cYAxis :data=\"days\" type=\"category\" /\u003e\n      \u003cVisualMap :calculable=\"true\" orient='horizontal' left='center' bottom=\"15%\" :min=\"0\" max=\"10\" /\u003e\n      \u003cHeatmap name=\"Punch Card\" :data=\"data\" :label=\"{show: true}\" :emphasis=\"{itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)'}}\" /\u003e\n    \u003c/Chart\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\n```\n\n![image](https://user-images.githubusercontent.com/1826685/202209638-88b179f2-1207-4e45-aa74-fc9e1b8d2e45.png)\n\n\n## custom component\n\n1. echarts [example](https://echarts.apache.org/examples/zh/editor.html?c=treemap-sunburst-transition) by using **vuecharts3**\n\n```\nimport { contextSymbol } from 'vuecharts3'\n\nconst TreemapSunburstTransition = defineComponent({\n  name: 'TreemapSunburstTransition',\n  inject: [contextSymbol],\n  setup() {\n    const { chart } = inject(contextSymbol)\n    const interval = ref()\n    const state = reactive({\n      data: null,\n      type: '',\n    })\n\n    const url = \"https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/echarts-package-size.json\"\n    fetch(url).then(res =\u003e res.json()).then(data =\u003e {\n      state.data = data.children\n      console.log('data.value', data.children)\n      interval.value = setInterval(function () {\n        state.type = state.type == 'treemap' ? 'sunburst' : 'treemap'\n        console.log('state.type', state.type)\n      }, 3000);\n    })\n    onUnmounted(() =\u003e clearInterval(interval.value))\n    return () =\u003e state.type == 'treemap' ?\n      h(Treemap, {\n        id: 'echarts-package-size',\n        animationDurationUpdate: 1000,\n        roam: false,\n        nodeClick: undefined,\n        data: state.data,\n        universalTransition: true,\n        label: {\n          show: true\n        },\n        breadcrumb: {\n          show: false\n        }\n      }) : h(Sunburst, {\n        id: 'echarts-package-size',\n        radius: ['20%', '90%'],\n        animationDurationUpdate: 1000,\n        nodeClick: undefined,\n        data: state.data,\n        universalTransition: true,\n        itemStyle: {\n          borderWidth: 1,\n          borderColor: 'rgba(255,255,255,.5)'\n        },\n        label: {\n          show: false\n        }\n      })\n  }\n})\n\n// template\n\u003cChart\u003e\n  \u003cTreemapSunburstTransition /\u003e\n\u003c/Chart\u003e\n\n```\n\n![](https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/thumb/treemap-sunburst-transition.webp?_v_=1655181358610)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flloydzhou%2Fvuecharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flloydzhou%2Fvuecharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flloydzhou%2Fvuecharts/lists"}