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