Echarts 第一篇

最新推荐文章于 2024-10-12 10:41:56 发布

daxiaoli123

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量145

点赞数

分类专栏：实例文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/daxiaoli123/article/details/84550334

版权

实例专栏收录该内容

15 篇文章 0 订阅

订阅专栏

http://echarts.baidu.com/ 数据报表

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>

<script src="js/esl.js"></script>
</head>
<body>

<div id="main" style="height:400px"></div>
<script type="text/javascript">

var filebar ='js/echarts';
var filemap='js/echarts-map'
// 路径配置
require.config({
paths:{
'echarts' : filebar,
'echarts/chart/bar' : filebar,
'echarts/chart/map':filemap,
'echarts/chart/line':filebar
}
});
// 使用

require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/map',
'echarts/chart/line'
],
function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
// 过渡---------------------
myChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});

option={
title:{
text:'降雨量和蒸发量的统计',
subtext:'仅供参考'

},
tooltip:{
show:true
},
legend:{
data:['降雨量','蒸发量'],

},
toolbox:{
show:true,
feature : {
mark : {
show : false,
title : {
mark : '辅助线开关',
markUndo : '删除辅助线',
markClear : '清空辅助线'
},
lineStyle : {
width : 2,
color : '#1e90ff',
type : 'dashed'
}
},
dataView:{show:true,readOnly:false},
magicType:['line', 'bar'],
dataZoom : {show : true}, // 框选区域缩放，自动与存在的dataZoom控件同步，上图icon左数4/5，分别是启用，缩放后退
restore:{show:true},
saveAsImage:{show:true}
}
},
calculable:true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series:[
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint:{

data:[
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}

]

};

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>