<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option = null;
$.get('aqi-beijing.json', function (data) {
myChart.setOption(option = {
title: {//标题
text: 'Beijing AQI',//主标题
subtext:'副标题'//副标题
},
tooltip: {
trigger: 'axis'
//触发类型。'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
//'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
},
xAxis: {//直角坐标系 grid 中的 x 轴 横坐标
// 所有类目名称列表
data: data.map(function (item) {
return item[0];
}),
},
yAxis: {//直角坐标系 grid 中的 y 轴 纵坐标
splitLine: {//坐标轴在 grid 区域中的分隔线。
show: true//是否显示分隔线。默认数值轴显示，类目轴不显示。
}
},
toolbox: {//工具栏 居中放置
left: 'center',//工具栏组件离容器左侧的距离。如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
feature: {//各工具配置项。
dataZoom: {//显示数据区域缩放组件。目前只支持直角坐标系的缩放。
yAxisIndex: 'none'
},
restore: {},//配置项还原。
saveAsImage: {},//保存为图片。
dataView:{show:true}//数据视图组件，设置为true,可以看到数据
}
},
//下面还可以为上述加载项，做定制设置。
//数据缩放细节设置
dataZoom: [{
startValue: '2018-12-01'//数据窗口范围的起始数值
}, {
type: 'inside'//类型
}],
visualMap: {//visualMap 是视觉映射组件
top: 10,
right: 10,
//自定义的每一段的范围，以及每一段的文字，以及每一段的特别的样式。
//可以使用 lt（小于，little than），
//gt（大于，greater than），
//lte（小于等于 lettle than or equals），
//gte（大于等于，greater than or equals）来表达边界：
pieces: [{//-100<x<=0
gt: -100,
lte: 0,
color: '#ffde33'
},{//0<x<=50
gt: 0,
lte: 50,
color: '#096'
}, {
gt: 50,
lte: 100,
color: '#ffde33'
}, {
gt: 100,
lte: 150,
color: '#ff9933'
}, {
gt: 150,
lte: 200,
color: '#cc0033'
}, {
gt: 200,
lte: 300,
color: '#660099'
}, {
gt: 300,
color: '#7e0023'
}],
//选中范围外的视觉元素。
outOfRange: {
color: '#999'
}
},
//系列列表。每个系列通过 type 决定自己的图表类型
series: {
name: 'Beijing AQI',
type: 'line',
data: data.map(function (item) {
return item[1];
}),
markLine: {//图表标线。
silent: true,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
data: [{
yAxis: -100
},{
yAxis: 50
}, {
yAxis: 100
}, {
yAxis: 150
}, {
yAxis: 200
}, {
yAxis: 300
}]
}
}
}
);
});;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
网友评论