微信小程序使用echarts图表异步加载数据（调接口显示返回数据）

链接： >

提取码：vb0i

我是跟pages放在了同级

如：在 page目录的cc页面中使用echarts的话，需要在ccjson中添加以下配置。

ECharts官网： ECharts

1、引入jQueryjs、echartsjs（多种方式）

2、绘制图表

①为ECharts准备一个具备大小（宽高）的Dom

②基于准备好的dom，初始化echarts实例

③异步请求数据

先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。

data1json文件格式如下：

script：

两种方法的显示结果都如下：

datajson文件：

script:

显示结果：

注意：

第一步，新建静态页面barhtml，修改title并引入echarts js文件，如下图所示：第二步，添加条状图容器，在插入一个div，并给出id属性和宽度高度，如下图所示：第三步，编写生成条状图的js代码，添加数据和样式，如下图所示：第四步，预览该图形界面，可以看到效果图，如下图所示：第五步，编写点击条状图的柱子，然后获取它们的name和value，如下图所示：第六步，再次预览该界面，打开浏览器的控制台，查看打印结果，如下图所示：如何利用echarts图表获取条状图点击名称和值

定义一个数组为names，在 legend中通过 data: names传入图例名称；

创建一个数组mydata[]，用for循环把后台传来的List整个放进去(注意格式为“{value:xxx, name:xxx}”），在option里的series中通过“data: mydata”传入即可；

tooltip上的东西不好被点到，你需要把showDelay和hideDelay都调大鼠标才能走得过去，但这样交互体验就变差了。至于tooltip上显示的完全就是dom，你想怎么玩都行

以上就是关于微信小程序使用echarts图表异步加载数据（调接口显示返回数据）全部的内容，包括:微信小程序使用echarts图表异步加载数据（调接口显示返回数据）、ECharts异步请求数据、如何利用echarts图表获取条状图点击名称和值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！