http://echarts.baidu.com/ 数据报表
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 来自百度CDN -->
<script src="js/esl.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<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>
分享到：
相关推荐
第1篇 https://yydatav.blog.csdn.net/article/details/106571356 第2篇 https://yydatav.blog.csdn.net/article/details/106783264 第3篇 https://yydatav.blog.csdn.net/article/details/106937661 第4篇 ...
迁徙图、散点图和网络路径图这种图表跟地理坐标关系紧密，所以仅仅通过第一篇二维普通图表绘制的方式是无法实现这类图表绘制的，所以就需要我们来扩展eCharts的相关功能，使其能够够结合最新版的ArcGIS JS API来完成...
Echarts 、 Remodal和Pikaday是我们在开发后台管理类网站时常用的三个第三方组件，下面这篇文章主要给大家介绍了关于vue.js如何将echarts封装为组件一键使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友...
垂直datazoom拖动后第一个和最后一个往往显示不出来，这可能是echart2的bug。 解决方法： 把dataZoom中的handleSize设置小一些可以了。默认值8，可设为4 补充知识：echarts踩坑，dataZoom和X坐标系文字重叠解决方法 ...
第一步：获取e-charts以及在main.js中对其进行配置，详情见我之前的文章或e-charts官网 第二步：创建容器 第三步：封装制作专题图方法 //array是鼠标放到专题图上展示的数据，是一个[[{},{}...],[]....地图...
第一次系统的使用了angular这一优秀的js框架，其所拥有的许多优秀特性极大的方便了项目的开发，然而在开发中也遇到过不少的问题，趁着最近有时间给大家总结一下，这篇文章将会介绍使用angularjs1结合百度的图表插件...
注意：返回的信息是一个 list，其中第一个是我自己的信息，所以要从第二项开始 存储的文件 2：女性，1：男性，0：其他 接下来，我们分析 csv 文件中的数据 首先我们看看微信好友性别的分布： 我这里是用的 Echarts...
最近在一家公司实习，入职第一个大一点的需求是将公司开发的两个winstore app的排名信息进行可视化。大概挑选了下，排除了Flask和Echarts。最终选择使用Django和它的插件django-echarts来实现。文末有项目的完整代码...
今天小编就为大家分享一篇解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
标签：根据帖子内容智能抽取关键字进行标签自动补全，一篇帖子关联多个标签。标签和标签之间以带边权重的图结构进行描述，方便进行相关计算 领域：一个领域下包含了多个标签，通过标签将帖子自动聚合到具体领域，...