echarts图表数据信息动态获取

最近开发项目用到echarts图表展示数据信息，需要调用后台接口，写一篇博客来记录一下实现过程，末尾附源码

 

首先准备一个json文件echarts.json（名字无所谓），用来模拟从后台获取数据 

 

第二步上echarts官网下载，或直接引用生成图表用到的js，这里给出官网：https://www.echartsjs.com/index.html

然后在页面直接引用  

这里给出echarts.js的下载链接：https://echarts.baidu.com/dist/echarts.min.js

 

第三步在body中准备一个容器，用来显示图表

 

紧接着在js中初始化echarts对象，直接上代码

看到这里如果能生成一个柱状图，那么恭喜你已经可以从后台获取数据了

 

如果还没有的话就看全部代码吧，加油哦

json文件

{
    "name":["iso","english","china","ufo","seo"],
    "data":[400,200,300,100,11]
}

效果图

转载于:https://www.cnblogs.com/songzxblog/p/11383879.html