一个使用Javascript 实现的开源可视化库,可以流畅的运行在pc 和移动设备上,兼容当前绝大部分浏览器(Chrome ,firefox,IE8)等

底层依赖轻量级的矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。;

教程和官网文档地址  : http://www.echartsjs.com

在查看数据时,使用表格看起来很麻烦,并且看起来并不形象化;而绘图,可以使我们清晰明确的查看数据,防止误入雷区。

封装饼图的方法

// 将绘图封装为方法
function bad_case(data){
 
  // 初始化echarts控件
  var bad_case = echarts.init(document.getElementById('industry_areas'));
  // 定义echarts配置文件
  var option = {
 
    // 定义标题
    title:{
    text:'问题分布统计,以问题类型分组'
    },
    // 悬停提示,显示真实数据的同时,展示占比
    tooltip:{
    // 定义鼠标悬停
    trigger:'item',
    // 格式化数据,展示真实数据
    formatter:"{a} <br /> {b} : {c} ({d}%)"
    },
    // 传入展示数据
    series:[
    {
    // 数据名字
    name:'问题类型',
    // 指定绘图类型
    type:'pie',
    // 传入数据
    data:data
    }
    ]
 
    }
    //导入配置文件
    bad_case.setOption(option);
  }
  // 通过发送ajax请求,将接口数据获取
  $.getJSON('/problem_json',function(data){
  //调用绘图方法
  bad_case(data);
 
  });

 

在封装中国地图时,要调用chind.js 和 echarts.min.js 文件

这两个文件可以在网上下载,是一种开源软件,<http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js>,<http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js>

 


//分装一个地图方法
function china_map(data){

//初始化
var chart = echarts.init(document.getElementById('main'));
  //配置地图
  var option={
  //悬停
  tooltip:{
    trigger:'item'
  },
  //图例地图
  visualMap:{
    show : true,
    //横坐
    x: 'left',
    //纵
    y:'bottom',
    //颜色深浅
    //颜色深浅
    splitList:[{start:500,end:600},{start:400,end:500},{start:300,end:400},{start:200,end:300},{start:100,end:200},{start:0,end:100}]
  },

    //载入数据
    series:[{name:'问题数量',type:'map',mapType:'china',data:data}]


  };
  //将配置文件载入数据
  chart.setOption(option);

  }
  //调用
  // 通过发送ajax请求,将接口数据获取
  $.getJSON('/detail/problem_map',function(data){
  //调用绘图方法
  china_map(data);
 
});