{"id":22451450,"url":"https://github.com/jxav22/echartsoptions","last_synced_at":"2026-04-17T01:31:49.446Z","repository":{"id":65621864,"uuid":"595808692","full_name":"jxav22/EchartsOptions","owner":"jxav22","description":"A simple library for creating the options object for an \"echarts-for-react\" component.","archived":false,"fork":false,"pushed_at":"2023-01-31T21:56:26.000Z","size":10,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-23T22:38:31.368Z","etag":null,"topics":["echarts","echarts-for-react","javascript","options","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jxav22.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2023-01-31T21:13:11.000Z","updated_at":"2023-02-23T20:32:07.000Z","dependencies_parsed_at":"2023-02-16T23:31:22.511Z","dependency_job_id":null,"html_url":"https://github.com/jxav22/EchartsOptions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxav22%2FEchartsOptions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxav22%2FEchartsOptions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxav22%2FEchartsOptions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxav22%2FEchartsOptions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jxav22","download_url":"https://codeload.github.com/jxav22/EchartsOptions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245843553,"owners_count":20681533,"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":["echarts","echarts-for-react","javascript","options","react"],"created_at":"2024-12-06T06:08:00.883Z","updated_at":"2026-04-17T01:31:49.432Z","avatar_url":"https://github.com/jxav22.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Echarts Options\n\n\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/@jxav22/echarts-options\"\u003e\nA simple library for creating the options object for an `echarts-for-react` (https://www.npmjs.com/package/echarts-for-react) component.\n\n### Features:\n\n- Enables autocomplete/checking with IntelliSense\\*, eradicating typo related errors.\n- Extremely lightweight. Only 254 lines of code, zero dependancies.\n- Fast and flexible. Removing it from a graph is simple, just replace it with the exported options object.\n- Can build the options object in a modular and reusable way.\n\n_\\*IntelliSense is only available for key fields, this excludes most of the fields used for styling._\n\n## Install\n\n```\n$ npm install @jxav22/echarts-options\n```\n\n## Usage\n\n### Creating the options object\n\n```\nimport EchartsOptions from \"@jxav22/echarts-options\";\n\nconst g = new EchartsOptions();\n```\n\n### Editing fields\n\nUse dot notation to edit fields\n\n```\ng.title.text = \"Hello world!\";\ng.title.subtext = \";)\";\n```\n\nCurrently supported fields\n\n```\ntitle\ngrid\nlegend\nyAxis\nxAxis\naxisPointer\nseries\n```\n\nUse the add method to add fields that are not supported\n\n```\ng.add({\n  dataset : {\n     dimensions: [\"headers\", \"for\", \"each\", \"column\"],\n     source: [1, 2, 3, 4],\n  }\n});\n\n// can be used at different levels\ng.yAxis.add({\n  axisTick: {\n    show: false,\n  },\n});\n```\n\nYou can additionally use dot notation to add fields, but the field type must be in `ALLOWED_DATA_TYPES`\n\n```\nconst ALLOWED_DATA_TYPES = [\"string\", \"number\", \"boolean\"];\n```\n\n```\n// allowed\ng.title.field = true;\n\n// not allowed, arrays are not supported\ng.title.field = [\"array\", \"of\", \"strings\"]\n\n// instead use add\ng.title.add({\n    field: [\"array\", \"of\", \"strings\"]\n})\n```\n\n### Global defaults\n\nYou can set global defaults in any of the classes that extend `Options`\n\n```\nclass AxisPointerOptions extends Options {\n  show = true;\n  ...\n}\n```\n\n### Custom methods\n\nYou can add custom methods to any of the classes that extend `Options`\n\n```\nclass TitleOptions extends Options {\n  text;\n  ...\n  /**\n   * Extend the title text horizontally, by applying padding to each side\n   * @param {number} amountOfPadding The amount of padding to apply, to each side,\n   *  where each unit is one space \" \".\n   */\n  extendHorizontally(amountOfPadding) {\n    let padding = \"\";\n    for (var i = 0; i \u003c amountOfPadding; i++) {\n      padding = padding.concat(\" \");\n    }\n    this.text = `${padding}${this.text}${padding}`;\n  }\n}\n```\n\nUsage\n\n```\ng.title.extendHorizontally(20);\n```\n\n### Adding graphs to the series field\n\n```\nimport { GraphOptions } from \"@jxav22/echarts-options\";\n```\n\n```\nconst barGraph = new GraphOptions(\"bar\", \"A Bar Graph\");\nbarGraph.add({\n   // edit fields here\n});\n\nconst pieGraph = new GraphOptions(\"pie\", \"A Pie Graph\");\npieGraph.add({\n  // edit fields here\n});\n\ng.series.setData([barGraph, pieGraph]);\n```\n\n### Exporting the options object\n\n```\n\u003cReactEcharts option={g.export()}/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxav22%2Fechartsoptions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjxav22%2Fechartsoptions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxav22%2Fechartsoptions/lists"}