一个使用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);
});