{"id":21703042,"url":"https://github.com/taojunnan/uniapp_plugin_echarts_weixin","last_synced_at":"2026-02-27T13:09:13.192Z","repository":{"id":262218554,"uuid":"797065913","full_name":"taojunnan/uniapp_plugin_echarts_weixin","owner":"taojunnan","description":"uniapp插件 vue3 echarts 微信小程序 兼容Skyline","archived":false,"fork":false,"pushed_at":"2024-11-11T08:03:13.000Z","size":196,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-20T16:40:02.607Z","etag":null,"topics":["echarts","skyline","uniapp","weixin-miniprogram"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/taojunnan.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-07T06:13:03.000Z","updated_at":"2025-03-03T06:18:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"b21f76a3-9b81-414e-9577-5b2847370117","html_url":"https://github.com/taojunnan/uniapp_plugin_echarts_weixin","commit_stats":null,"previous_names":["taojunnan/uniapp_plugin_echarts_weixin"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/taojunnan/uniapp_plugin_echarts_weixin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taojunnan%2Funiapp_plugin_echarts_weixin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taojunnan%2Funiapp_plugin_echarts_weixin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taojunnan%2Funiapp_plugin_echarts_weixin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taojunnan%2Funiapp_plugin_echarts_weixin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taojunnan","download_url":"https://codeload.github.com/taojunnan/uniapp_plugin_echarts_weixin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taojunnan%2Funiapp_plugin_echarts_weixin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267802304,"owners_count":24146481,"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","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","skyline","uniapp","weixin-miniprogram"],"created_at":"2024-11-25T21:24:09.956Z","updated_at":"2026-02-27T13:09:08.139Z","avatar_url":"https://github.com/taojunnan.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# uniapp vue3 echarts 微信小程序 兼容Skyline\n\n\u003e uniapp 插件，由大名鼎鼎的 [echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) 改造而来，适用于vue3 微信小程序（其他小程序没试过，可以自行尝试）\n\n[github地址](https://github.com/taojunnan/uniapp_plugin_echarts_weixin)  \n[插件地址](https://ext.dcloud.net.cn/plugin?id=15140)  \n\n请仔细阅读文档哦\n\n## 如何使用\n\n1、引入组件（路径改成实际组件路径）\n\n```js\nimport JnChart from '@/components/jn-chart/index.vue'\n```\n\n2、使用组件\n\n```html\n\u003cJnChart :option=\"echartsOption\" /\u003e\n```\n\n## 组件配置项\n\n| 参数     | 类型     | 必须 | 说明                                                         |\n| -------- | -------- | ---- | ------------------------------------------------------------ |\n| option   | Object   | 是   | 我们熟悉的`echarts option`配置项                             |\n| lazyLoad | Boolean  | 否   | 是否懒加载，默认`false`，如果`true`，第一次不会触发绘制，监听`option`变化后才触发绘制 |\n| canvasId | String   | 否   | canvas 组件的唯一标识符，默认jn-canvas                       |\n| @init    | Function | 否   | `v1.0.1` 初始化完成后的回调，返回`echarts`实例对象           |\n\n## 组件方法\n\n| 方法名               | 说明                   | 参数                                                         |\n| -------------------- | ---------------------- | ------------------------------------------------------------ |\n| canvasToTempFilePath | `V1.3.0`图表保存成图片 | opt，同[uni.canvasToTempFilePath](https://uniapp.dcloud.net.cn/api/canvas/canvasToTempFilePath.html#canvastotempfilepath)的第一个参数 |\n\n## 如何保存至图片\n\n```html\n\u003cJnChart ref=\"chartRef\" :option=\"option\" /\u003e\n```\n\n```js\nconst chartRef = ref(null)\n\nfunction saveImg() {\n  chartRef.value.canvasToTempFilePath({\n    success: res =\u003e {\n      console.debug('@save img success res = ', res)\n      const imgSrc = res.tempFilePath\n      \n      // 保存至相册\n      uni.saveImageToPhotosAlbum({\n        filePath: imgSrc,\n        success: (res) =\u003e {\n          console.debug('@保存相册成功', res)\n          uni.showToast({\n            title: '保存成功'\n          })\n        },\n        fail: (e) =\u003e {\n          console.debug('@保存相册失败', e)\n        }\n      })\n    },\n    fail: e =\u003e {\n      console.debug('@save img error', e)\n      uni.showToast({\n        icon: 'none',\n        title: '保存失败'\n      })\n    }\n  })\n}\n```\n\n\n\n## 其他说明\n\n1.**(重要)**组件中的`echarts.js`是作者方便测试从[echarts官网定制的echarts.js](https://echarts.apache.org/zh/builder.html)，只包含了基础功能，实际使用中请**替换成自己的`echarts.js`**\n\n2.是否支持`vue2`?   \n\n其实组件只是使用了`vue3`的语法，如果你愿意可以把`vue3`的语法替换成`vue2`的语法是完成可行的，后期会考虑增加兼容  \n\n3.其他更多使用可以查看[使用示例](https://ext.dcloud.net.cn/plugin?id=15140)\n\n4.有问题的话在插件页面评论或者github issue 我都能及时看到并一一回复  \n\n## 更新日志\n[地址](https://ext.dcloud.net.cn/plugin?id=15140\u0026update_log)\n\n## 完整例子\n\n```vue\n\u003ctemplate\u003e\n  \u003cview class=\"box\"\u003e\n    \u003cJnChart canvasId=\"line\" :option=\"optionLine\" lazyLoad @init=\"handleInit\" /\u003e\n  \u003c/view\u003e\n  \n  \u003cview class=\"box\"\u003e\n    \u003cJnChart canvasId=\"bar\" :option=\"optionBar\" lazyLoad /\u003e\n  \u003c/view\u003e\n  \n  \u003cview class=\"box\"\u003e\n    \u003cJnChart canvasId=\"pie\" :option=\"optionPie\" /\u003e\n  \u003c/view\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref, onMounted } from 'vue'\n// 请使用自己项目中本组件的真实路径\nimport JnChart from '@/components/jn-chart/index.vue'\n\n// echarts的配置项\n// 如果 option 是通过接口数据动态组成，建议给组件加上 lazyLoad 配置\nconst optionLine = ref({})\nconst optionBar = ref({})\n// 静态的option，不用也不能加lazyLoad，否则不显示\nconst optionPie = {\n  tooltip: {\n    trigger: 'item'\n  },\n  legend: {\n    top: '5%',\n    left: 'center'\n  },\n  series: [\n    {\n      name: 'Access From',\n      type: 'pie',\n      radius: ['40%', '70%'],\n      avoidLabelOverlap: false,\n      label: {\n        show: false,\n        position: 'center'\n      },\n      emphasis: {\n        label: {\n          show: true,\n          fontSize: 20,\n          fontWeight: 'bold'\n        }\n      },\n      labelLine: {\n        show: false\n      },\n      data: [\n        { value: 1048, name: 'Search Engine' },\n        { value: 735, name: 'Direct' },\n        { value: 580, name: 'Email' },\n        { value: 484, name: 'Union Ads' },\n        { value: 300, name: 'Video Ads' }\n      ]\n    }\n  ]\n}\n\nonMounted(getData)\n\n// 模拟从接口获取echarts渲染的数据\nfunction getData() {\n  setTimeout(() =\u003e {\n    const data = {\n      names: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n      values: [820, 932, 901, 934, 1290, 1330, 1320]\n    }\n    \n    optionLine.value = getOption(data)\n    optionBar.value = getOptionBar(data)\n    \n  }, 800)\n}\n\nfunction getOption(datasource) {\n  const { values, names } = datasource\n  \n  const option = {\n    // 如果图表显示的很小，记得加上grid\n    grid: {\n      top: '5%',\n      left: '5%',\n      right: '5%',\n      bottom: 0,\n      containLabel: true\n    },\n    tooltip: {\n      show: true,\n      trigger: 'axis',\n      confine: true,\n      formatter: (params) =\u003e {\n        const { value, name } = params[0]\n        \n        return `自定义tooltip\\n${value}\\n${name}`\n      }\n    },\n    xAxis: {\n      type: 'category',\n      data: names\n    },\n    yAxis: {\n      type: 'value'\n    },\n    series: [\n      {\n        data: values,\n        type: 'line',\n        smooth: true\n      }\n    ]\n  };\n  \n  return option\n}\n\nfunction getOptionBar(datasource) {\n  const { values, names } = datasource \n  \n  const option = {\n    grid: {\n      top: '5%',\n      left: '5%',\n      right: '5%',\n      bottom: 0,\n      containLabel: true\n    },\n    xAxis: {\n      type: 'category',\n      data: names\n    },\n    yAxis: {\n      type: 'value'\n    },\n    series: [\n      {\n        data: values,\n        type: 'bar',\n        showBackground: true,\n        backgroundStyle: {\n          color: 'rgba(180, 180, 180, 0.2)'\n        }\n      }\n    ]\n  }\n  \n  return option\n}\n\n/**\n * echarts 初始化完成监听\n * @param {Object} chart echarts 实例对象\n */\nfunction handleInit(chart) {\n  console.debug('@line chart 实例对象 = ', chart)\n}\n\u003c/script\u003e\n\n\u003cstyle lang=\"scss\" scoped\u003e\n  .box {\n    height: 460rpx;\n    \n    \u0026 + .box {\n      margin-top: 30rpx;\n    }\n  }\n\u003c/style\u003e\n\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaojunnan%2Funiapp_plugin_echarts_weixin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaojunnan%2Funiapp_plugin_echarts_weixin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaojunnan%2Funiapp_plugin_echarts_weixin/lists"}