Echarts 绘图（饼图，中国地图）

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

});

巴特西

Echarts 绘图（饼图，中国地图）

最新文章

热门文章