echarts图表数据信息动态获取

第一步准备一个json文件echarts.json(名字无所谓),用来模拟从后台获取数据 

{
    "name":["直达","营销广告","搜索引擎","邮件营销","联盟广告","视频广告","百度","谷歌","必应","其他"],
    "data":[
    	{"value":335, "name":"直达"},
    	{"value":310, "name":"邮件营销"},
    	{"value":234, "name":"联盟广告"},
    	{"value":135, "name":"视频广告"},
    	{"value":1048, "name":"百度"},
    	{"value":251, "name":"谷歌"},
    	{"value":147, "name":"必应"},
    	{"value":102, "name":"其他"}
    ],
    "little":[
        {"value":335, "name":"直达","selected":"true"},
    	{"value":679, "name":"营销广告"},
    	{"value":1548, "name":"搜索引擎"}
    ]
}

  

第二步在页面直接引用JS文件



  

第三步在body中准备一个容器,写好样式,用来显示图表

  

最后一步在js中初始化echarts对象,实现动态加载数据。

        

 echarts图表数据信息动态获取_第1张图片

你可能感兴趣的