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>
效果图展示: