标签：echarts 报表图表
ECharts主页： http://echarts.baidu.com/index.html
ECharts官方实例： http://echarts.baidu.com/doc/example.html
ECharts官方API文档： http://echarts.baidu.com/doc/doc.html
基本步骤：
1、创建一个html文件
2、引入echarts包
3、先 init 一个图表实例，再myChart.hideLoading();
4、ajax 取数，用数据拼装 option
5、myChart.setOption();
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Admin</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="rate" style="height:350px"></div>
<div id="sum" style="width:700px;height:350px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
],
DrawEChart
);
function DrawEChart(ec) {
// 基于准备好的dom，初始化echarts图表
var myrateChart = ec.init(document.getElementById('rate'));
var mysumChart = ec.init(document.getElementById('sum'));
var option = {
title : {
text: '测试任务执行通过率',
link:'',
subtext: '实线是每个任务最近五次内的通过率，虚线是任务平均通过率 ',
sublink:''
//水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
//x: 'left',
//y: 'top'
},
//提示框，鼠标悬浮交互时的信息提示
tooltip : {
//触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'
trigger: 'axis'
},
//图例，每个图表最多仅有一个图例
legend: {
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
show: true,
//legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应
data: []
},
//工具箱，每个图表最多仅有一个工具箱
toolbox: {
show : true,
//启用功能，目前支持feature，工具箱自定义功能回调处理
feature : {
//辅助线标志
mark : {show: true},
//dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退
dataZoom: {
show: true,
title: {
dataZoom: '区域缩放',
dataZoomReset: '区域缩放后退'
}
},
//数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
dataView : {show: true, readOnly: false},
//magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换
magicType : {show: true, type: ['line', 'bar']},
//restore，还原，复位原始图表
restore : {show: true},
//saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'
saveAsImage : {show: true}
}
},
//是否启用拖拽重计算特性，默认关闭(即值为false)
calculable : true,
//是否启用拖拽重计算特性，默认关闭(即值为false)
//直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值
//横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型
xAxis : [
{
type : 'category',
boundaryGap : false,
data: []
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} %'
}
}
],
series: []
};
//通过Ajax获取数据
$.ajax({
type: "post",
async: false, //同步执行
url: "/echart",
success: function (result) {
if (result) {
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
option.xAxis[0].data = result.category;
option.series = result[0].series;
option.legend.data = result.legend;
//myChart.showLoading();
myrateChart.hideLoading();
myrateChart.setOption(option);
mysumChart.hideLoading();
}
},
error: function (errorMsg) {
alert("不好意思，图表请求数据失败啦!");
}
});
}
</script>
</body>效果图展示：
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：echarts 报表图表
原文地址：http://blog.csdn.net/hqzxsc2006/article/details/47019561
