`
daxiaoli123
  • 浏览: 46678 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

Echarts 第一篇

 
阅读更多
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>

分享到:
评论

相关推荐

    echarts 分割圆形

    dataIndex: 0 // 假设点击的是第一个扇区 }); } ``` 通过以上步骤,我们就完成了使用 ECharts 分割圆形的功能。这只是一个基础示例,实际应用中可能需要根据具体需求进行更复杂的定制,如动态动画、交互效果等...

    Echarts地图中省市地图json文件

    1. 数据结构:ECharts地图的json文件通常包含一系列地理坐标点,用于描绘地图的边界。每个地区都有一个唯一的标识(如省级行政区划代码),并附带一组坐标数组来表示该地区的边界。例如,北京市的边界可能由多个坐标...

    利用echarts绘制地图的geojson(包含国家,省,市),有实现实例

    本篇将详细讲解如何利用ECharts结合GeoJSON数据来绘制国家、省、市的地图,并在React环境中实现交互功能。 首先,GeoJSON是一种开放的标准格式,用于存储地理数据,如点、线和多边形。在ECharts中,我们可以使用...

    echarts多个x轴,多个y轴.zip

    这里,'销量'系列关联了第一个x轴和y轴,而'增长率'系列关联了第二个x轴和y轴。 五、多轴实例应用 在压缩包文件"echarts多个x轴,多个y轴"中,很可能包含了一些示例代码或者案例,这些案例展示了如何在实际项目中...

    基于ECharts Geo的地图数据可视化设计与实现

    1. **ECharts**:ECharts是一款由百度开源的、基于JavaScript的数据可视化库,支持丰富的图表类型,如柱状图、折线图、饼图以及地图等。其特点是轻量级、可定制性强,并且兼容多种浏览器。 2. **ECharts Geo组件**...

    echarts树图tree制作家谱源码.zip

    对于开发者来说,它是了解项目的第一步。 2. **public**:这个目录通常包含项目的静态资源,如HTML、CSS、图片等,它们会被直接发送给浏览器。在这个家谱应用中,可能包含了用于显示ECharts图形的HTML页面。 3. **...

    跟Echarts 5.1.2 搭配使用,解决wordcloud词云报错问题

    2. **正确导入charts-wordcloud**:`charts-wordcloud`是Echarts的一个第三方扩展,它提供了词云图的支持。你需要将`echarts-wordcloud-2.0.0`中的`dist`目录下的`echarts-wordcloud.js`文件引入到你的项目中。确保...

    echarts地图制作

    首先,制作echarts地图的第一步是在ArcGIS环境下进行的,ArcGIS是一个强大的地理信息系统平台,能够处理、分析和可视化地理数据。我们需要在这里创建一个新的地图模板,并将需要编辑的图片导入到这个模板中。在导入...

    echarts 多折现图表动态添加

    本篇文章将深入探讨如何在ECharts中实现多折线图表,并动态添加新的折线。 ### 1. 创建基本的多折线图表 首先,我们需要在HTML文件中引入ECharts库,通过`&lt;script&gt;`标签引入`echarts.min.js`。然后,创建一个用于...

    1-10套Python+Echarts数据可视化大屏案例(共10套)

    第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数据二次渲染不成功的问题

    在描述中的例子中,可以看到`series`变成了2个,但实际显示的仍然是第一次渲染的数据。 解决这个问题的方法是,当你需要更新图表数据时,调用`setOption`并明确设置`notMerge`为`true`,如下所示: ```javascript ...

    jsp使用ECharts动态在地图上标识点

    series可以定义多个数据集,它们在地图上按顺序叠放显示,第一个数据集显示在最上面。在series中可以设置地图类型(type: 'map')和地图类型(mapType),例如'china'表示中国地图,还可以设置地图的颜色样式...

    echarts实现获取datazoom的起始值(包括x轴和y轴)

    本篇将详细介绍如何在ECharts中获取DataZoom组件对于x轴和y轴的起始值,并探讨与之相关的知识点。 首先,我们需要了解ECharts的DataZoom组件的基本概念。DataZoom是一种可交互的数据区域缩放工具,它可以为x轴或y轴...

    vue.js如何将echarts封装为组件一键使用详解

    Echarts 、 Remodal和Pikaday是我们在开发后台管理类网站时常用的三个第三方组件,下面这篇文章主要给大家介绍了关于vue.js如何将echarts封装为组件一键使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友...

    python pyecharts 实现一个文件绘制多张图

    需要注意的是,第一个添加到`Grid`的图表必须是有x/y轴的,也就是说,不能是Pie图,因为Pie图没有明显的x/y轴。其他图表的添加顺序则可以任意。 在给出的例子中,我们创建了四个不同类型的图表:`Bar`(柱状图)、`...

    js 文字滚动效果

    var textArray = ['第一条消息', '第二条消息', '第三条消息']; var currentIndex = 0; // 获取元素 var scrollingText = document.getElementById('scrollingText'); // 更新文字的函数 function updateText() { ...

    echatrs地图功能-各省市js

    本篇将详细讲解ECharts中的地图功能,特别是针对中国各省市的三级地图及其数据绑定。 ### 一、ECharts地图基础 1. **地图类型选择**:ECharts内置了多种地图类型,包括世界地图、中国地图、省份地图等。对于中国...

    【JavaScript源代码】echars 3D地图为区域自定义颜色的解决方法.docx

    这通常通过`this.$echarts.registerMap()`完成,其中第一个参数是地图名称,第二个参数是地图JSON数据: ```javascript this.$echarts.registerMap('河南省', dataGeoLocation); ``` `dataGeoLocation`应替换为...

    vue使用E-Charts制作专题图(点击跳转下级)—第二篇

    第一步:获取e-charts以及在main.js中对其进行配置,详情见我之前的文章或e-charts官网 第二步:创建容器 第三步:封装制作专题图方法 //array是鼠标放到专题图上展示的数据,是一个[[{},{}...],[]....地图...

    简洁圣诞树图形背景圣诞节PPT模板.zip

    “圣诞节.pptx”很显然是这个圣诞节主题PPT模板的主文件,而“第一PPT.url”可能是指向一个PPT制作或分享平台的快捷方式,方便用户查找更多相关模板和教程。 总的来说,这款简洁圣诞树图形背景的圣诞节PPT模板结合...

Global site tag (gtag.js) - Google Analytics