如何调用HBuilderX中echarts图形插件小程序显示

随着移动端设备不断推广，原来要求在PC端展示的内容，也要求在移动端显示了，如图表。在HBuilderX开发市场存在很多插件，可以直接导入到项目中使用。那么，如何调用HBuilderX中echarts图形插件在小程序中显示？

1、打开HBuilderX开发工具，新建项目，选择uni-app，输入项目名称，选择项目位置和模板，然后点击创建

新建项目，选择uni-app，输入项目名称，选择项目位置和模板，然后点击创建

2、在HBuilderX插件市场搜索echarts，查到echarts-renderjs

在HBuilderX插件市场搜索echarts，查到echarts-renderjs

3、点击使用HBuilderX 导入插件，将插件导入到HBuilderX

点击使用HBuilderX 导入插件，将插件导入到HBuilderX

4、由于这个插件是独立的项目，导入HBuilderX要新建一个项目

由于这个插件是独立的项目，导入HBuilderX要新建一个项目

5、将echarts-renderjs项目中有关echarts插件文件，复制到bmnw项目指定文件夹

将echarts-renderjs项目中有关echarts插件文件，复制到bmnw项目指定文件夹

6、新建页面文件，打开uni-app项目pages.json文件，配置页面路径

新建页面文件，打开uni-app项目pages.json文件，配置页面路径

7、添加tabBar，配置小程序底部菜单

添加tabBar，配置小程序底部菜单

8、打开HBuilderX设置，选择运行配置；配置外部web服务器调用url和微信开发者工具路径

打开HBuilderX设置，选择运行配置；配置外部web服务器调用url和微信开发者工具路径

9、在index.vue文件中，导入echarts.vue组件，然后在页面代码引用

在index.vue文件中，导入echarts.vue组件，然后在页面代码引用

10、由于echarts-renderjs这个插件应用不成熟，改为导入uni-ec-canvas插件

由于echarts-renderjs这个插件应用不成熟，改为导入uni-ec-canvas插件

11、在data对象中，配置柱形图的option，即是图形的属性和数据

在data对象中，配置柱形图的option，即是图形的属性和数据

12、在图形数据源中，设置Y轴颜色渐变、图形类型（bar）

在图形数据源中，设置Y轴颜色渐变、图形类型（bar）

13、保存并运行到微信开发者工具，查看生成图形效果

保存并运行到微信开发者工具，查看生成图形效果