初学echarts

1.官方网站:

https://echarts.apache.org/zh/index.html

2.官方教程:5分钟上手ECharts

3.简介

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

4.dome

  1. 获取 ECharts
    可直接下载js文件,引入到项目中,下载地址:ECharts.js。
  2. 引入 ECharts

    
    
    
        
        
        
        
            
    
    

     

  3. 绘制一个简单的柱状图
    
        
        

     

  4. 后端异步提供数据
        @RequestMapping("/getData")
        @ResponseBody
        public Map getData() {
            Map map = new HashMap<>();
            map.put("category", Arrays.asList("一月份", "二月份", "三月份", "四月份", "五月份"));
            map.put("totals", Arrays.asList(10, 20, 30, 50, 100));
            return map;
        }

     

访问页面无法展示,提示:Uncaught ReferenceError: echarts is not defined
解决办法:

引入这行即可

页面展示效果:

初学echarts_第1张图片

你可能感兴趣的:(ECharts)