Echarts 第一篇

daxiaoli123

浏览: 46739 次
性别:
来自: 深圳

最近访客更多访客>>

for晨晨

coldg

t281279141

xubukang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

实例

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>

testdemo.rar (327.9 KB)
下载次数: 9

分享到：

swtdemo3

2014-04-17 15:30
浏览 869
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论