uniapp 导入ucharts图表插件 H5项目, 使用echarts eopts配置

先下载ucharts H5示例源码:

uCharts: 高性能跨平台图表库,支持H5、APP、小程序(微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序)、Vue、Taro等更多支持canvas的框架平台,支持饼图、圆环图、线图、柱状图、山峰图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图等常见图表。

官方示例案例H5 

1. 下载之后可以直接用Webstorm打开此位置的示例项目,移动端的H5的项目

uniapp 导入ucharts图表插件 H5项目, 使用echarts eopts配置_第1张图片

2. 启动之后创建一个运行实例:

uniapp 导入ucharts图表插件 H5项目, 使用echarts eopts配置_第2张图片

3. 如上图启动之后,点击左正解的浏览地址看效果

uniapp 导入ucharts图表插件 H5项目, 使用echarts eopts配置_第3张图片

运行效果首页

根据项目需要:H5, Echarts配置,可以

uniapp 导入ucharts图表插件 H5项目, 使用echarts eopts配置_第4张图片uniapp 导入ucharts图表插件 H5项目, 使用echarts eopts配置_第5张图片

对应点的案例源码:






 导入到自己的项目

1. 下载之后,打开项目uniapp项目,任意一个,可以用Hbuilder创建一个。

2. 将下面所有的文件拷贝到【自己的项目】对应目录

uniapp 导入ucharts图表插件 H5项目, 使用echarts eopts配置_第6张图片


3.即可直接使用。

其他形式的项目导入参考

  • 1、请将static目录下文件复制到根目录的static文件夹下

  • 2、qiun-title-bar文件夹可删除

  • 3、其他的都不要动,直接原样复制到您项目中的components目录

 打开下载的项目,找到公司对应的项目形式:用uni_modules,或者用node_modules的每个都有单独的用于离线导入的库。

uniapp 导入ucharts图表插件 H5项目, 使用echarts eopts配置_第7张图片

你可能感兴趣的:(uni-app,echarts,前端)