echart初探

最新推荐文章于 2024-05-27 09:54:14 发布
最新推荐文章于 2024-05-27 09:54:14 发布
阅读量1.6k 收藏
点赞数
分类专栏： 前台
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ActionReaction/article/details/20642659
版权 
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!--Step:1 Import a module loader, such as esl.js or require.js-->
<!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
<script src="js/esl.js"></script>

</head>

<body>

    <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom
        在body标记中，form标记之外，添加一个div，用来做图表渲染的容器    
    -->

    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    <div id="mainMap"
        style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    <script type="text/javascript">
        //为模块加载器配置echarts的路径，这里主要是配置map图表的路径，其他的图表跟map的配置还不太一样，下边也会做另一种类型的图表事例。  
        // 这里引用的主要是echarts文件夹下的echarts-map文件，而其他类型的图表引用的都是echarts文件夹下的echarts文件。  

        require.config({
            paths : {
                echarts : './js/echarts',
                'echarts/chart/map' : './js/echarts-map'
            }
        });

        //动态加载echarts，在回掉函数中使用，要注意保持按需加载结构定义图表路径  

        require(

        [

        'echarts',

        'echarts/chart/map'

        ],

        function(ec) {

            var myChart = ec.init(document.getElementById('main'));

            //option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档  

            option = {
                title : {
                    text : 'iphone销量',
                    subtext : '纯属虚构',
                    x : 'center'
                },
                tooltip : {
                    trigger : 'item'
                },
                legend : {
                    orient : 'vertical',
                    x : 'left',
                    data : [ 'iphone3', 'iphone4', 'iphone5' ]
                },
                dataRange : {
                    min : 0,
                    max : 2500,
                    text : [ '高', '低' ], // 文本，默认为数值文本
                    calculable : true,
                    textStyle : {
                        color : 'orange'
                    }
                },
                toolbox : {
                    show : true,
                    orient : 'vertical',
                    x : 'right',
                    y : 'center',
                    feature : {
                        mark : true,
                        dataView : {
                            readOnly : false
                        },
                        restore : true,
                        saveAsImage : true
                    }
                },
                series : [ {
                    name : 'iphone3',
                    type : 'map',
                    mapType : 'china',
                    selectedMode : 'single',  
                    itemStyle : {
                        normal : {
                            label : {
                                show : true
                            },
                            color : '#ffd700'
                        },// for legend
                        emphasis : {
                            label : {
                                show : true
                            }
                        }
                    },
                    data : [ {
                        name : '北京',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '天津',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '上海',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '重庆',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '河北',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '河南',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '云南',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '辽宁',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '黑龙江',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '湖南',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '安徽',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '山东',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '新疆',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '江苏',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '浙江',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '江西',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '湖北',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '广西',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '甘肃',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '山西',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '内蒙古',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '陕西',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '吉林',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '福建',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '贵州',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '广东',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '青海',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '西藏',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '四川',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '宁夏',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '海南',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '台湾',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '香港',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '澳门',
                        value : Math.round(Math.random() * 1000)
                    } ]
                }, {
                    name : 'iphone4',
                    type : 'map',
                    mapType : 'china',
                    itemStyle : {
                        normal : {
                            label : {
                                show : true
                            },
                            color : '#ff8c00'
                        },// for legend
                        emphasis : {
                            label : {
                                show : true
                            }
                        }
                    },
                    data : [ {
                        name : '北京',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '天津',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '上海',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '重庆',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '河北',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '安徽',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '新疆',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '浙江',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '江西',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '山西',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '内蒙古',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '吉林',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '福建',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '广东',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '西藏',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '四川',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '宁夏',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '香港',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '澳门',
                        value : Math.round(Math.random() * 1000)
                    } ]
                }, {
                    name : 'iphone5',
                    type : 'map',
                    mapType : 'china',
                    itemStyle : {
                        normal : {
                            label : {
                                show : true
                            },
                            color : '#da70d6'
                        },// for legend
                        emphasis : {
                            label : {
                                show : true
                            }
                        }
                    },
                    data : [ {
                        name : '北京',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '天津',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '上海',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '广东',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '台湾',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '香港',
                        value : Math.round(Math.random() * 1000)
                    }, {
                        name : '澳门',
                        value : Math.round(Math.random() * 1000)
                    } ]
                } ]
            };

            //以下的这段代码主要是用来处理用户的选择，应用场景是可以做地图的交互，比如点击地图上的某一个省，获取相应的省的指标变化等。  
            //需要特别注意的是，如果需要点击某一省作地图的操作交互的话，还需要为series属性的每一项添加一个selectedMode属性，这里的属性值为 'single'即单选，也可多选  
            
            //事件命名统一挂载到require('echarts/config').EVENT（非模块化为echarts.config.EVENT）命名空间下，建议使用此命名空间作为事件名引用。
            var ecConfig = require('echarts/config');
            myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {
                var selected = param.selected;
                var mapSeries = option.series[0];
                var name;
                for(var p = 0, len = mapSeries.data.length; p < len; p++) {
                    name = mapSeries.data[p].name;
                    mapSeries.data[p].selected = selected[name];
                    if (selected[name]) {
                        alert(name); //这里只是简单的做一个事例说明，弹出用户所选的省，如需做其他的扩展，可以在这里边添加相应的操作   

                    }
                }
            });
            myChart.setOption(option);
        });
    </script>
</body>
</html>

遇到的小问题：1. 

require.config({
            paths : {
                echarts : './js/echarts',
                'echarts/chart/map' : './js/echarts-map'
            }
        });

<script src="js/esl.js"></script>        一开始直接拷贝例子，这两个位置不一样 耽误了几分钟。。。

2.   打印选中省份时    series 里selectedMode : 'single' 忘了设 。默认值时null，无法打印，目测null时无法触发选中事件 。


ActionReaction
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECharts 实现源码
03-22
具体在实现 Echarts 框架，使用的源码，来进行实现 web 网页的。
Spark初探
02-26
Spark基于内存计算，提高了在大数据环境下数据处理的实时性，同时保证了高容错性和高可伸缩性，允许用户将Spark部署在大量廉价硬件之上，形成集群。...Spark是基于内存计算的大数据并行计算框架。Spark基于内存计算，...
echarts 框架原理
weixin_45677987的博客
03-04 7638
1： echarts 框架原理： 数据可视化框架原理： 1.1： ECharts 是一个轻量级的 javascript 图形库， 纯 js 实现， mvc 框架，数据驱动。 1.2：Svg 和 Canvas 是两个可以选择的类库之一，其中 svg 交互性更好，性能较弱，不适用于移动端，在绘制数万个点时会崩溃。而 canvas 的渲染速度和性能更好，echarts 在 canvas 上构建一层 MVC层，使得它可以像 svg 一样交互。 1.3：ECharts 的特点：重要性和优先级依次递减...
集成ECharts到若依框架：原理与使用方法详解
最新发布
weixin_53840353的博客
05-27 2295
ECharts 是由百度团队开发的开源数据可视化库，采用 HTML5 Canvas 技术进行绘图，能够高效地渲染大规模数据。数据驱动：ECharts 采用数据驱动的方式，即通过一组 JSON 格式的配置项（Option）来定义图表的类型、数据、样式等。Canvas 渲染：利用 HTML5 的 Canvas 技术进行图表的绘制，保证了高性能的渲染效果。响应式设计：ECharts 支持响应式布局，能够根据容器大小自动调整图表尺寸，适应不同的设备和屏幕。交互性强。
ECharts底层原理
qq_60893085的博客
03-26 802
eCharts 是一款开源的 JavaScript 图表库，由百度前端技术部推出并维护，用于构建交互式的数据可视化界面。eCharts提供了丰富的图表类型和灵活的配置选项，使用户可以轻松创建各种各样的图表，例如折线图、柱状图、散点图等等。eCharts不仅可以在网页中展示图表，还可以通过导出图片的方式进行分享与嵌入。
echart的简单入门
A_one2010的博客
03-31 1174
echarts初识页面
nginx平台初探
03-03
众所周知，nginx性能高，而nginx的高性能与其架构是分不开的。那么nginx究竟是怎么样的呢？这一节我们先来初识一下nginx框架吧。nginx在启动后，在unix系统中会以daemon的方式在后台运行，后台进程包含一个master...
Echarts 常用API之action行为
qq_22475399的博客
07-31 1908
Echarts 常用API之action行为 一、Echarts中的action echarts中支持的图表行为，通过dispatchAction触发。 1.highlight 高亮指定的数据图形 dispatchAction({ type: ‘highlight’, // 可选，系列 index，可以是一个数组指定多个系列 seriesIndex?: number|Array, // 可选，系列名称，可以是一个数组指定多个系列 seriesName?: string|Array, // 可选，数据的 in
Echarts数据可视化action图表行为的相关操作，开发全解+完美注释
热门推荐
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
12-24 1万+
全栈工程师开发手册 （作者：栾鹏） Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解6大公共组件详解（点击进入）： title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解 5大坐标系详解（点击进入）： 地理坐标系geo详解、grid直角坐标系（xAxis、yAxis）详解、parallel平行
Unity SmartChart1.0 最新版
08-27
可以制作各种漂亮的曲线图、折线图。 在短短几分钟内，您可以创建动画图表以实现许多目的。 所有设置都是交互式的。 可以从编辑器轻松自定义，您可以选择自己的颜色，背景，字体和线宽等。
Unity功能强大的图表插件Graph Maker V 1.5.8
01-08
Unity功能强大的图表插件Graph Maker V 1.5.8版本，百度网盘链接下载
unity-ugui-XCharts-master.zip
06-11
内置丰富示例和模板，参数可视化配置，效果实时预览，纯代码绘制。 支持折线图、柱状图、饼图、雷达图、散点图、热力图等常见图表。 支持直线图、曲线图、面积图、阶梯线图等折线图。 支持并列柱图、堆叠柱图、堆积百分比柱图、斑马柱图等柱状图。 支持环形图、玫瑰图等饼图。 支持折线图—柱状图、散点图-折线图等组合图。 支持实线、曲线、阶梯线、虚线、点线、点划线、双点划线等线条。 支持自定义主题，内置主题切换。 支持自定义图表内容绘制，提供绘制点、直线、曲线、三角形、四边形、圆形、环形、扇形、边框、箭头等绘图API。 支持PC端和手机端上的数据筛选、视图缩放、细节展示等交互操作。 支持万级大数据绘制。
ECharts学习总结（三）-----基本概念分析
weixin_30846599的博客
03-23 189
最近一直在看ECharts相关的内容，进展却不怎么理想，特认真总结如下基础知识： 1） ECharts总体框架和其中各个部分：图类、组件、接口、基础库的具有应用方法和应该把握的细节，并通过实际的例子熟悉和掌握各个控件。只有打牢基础才能真正的为下步的工作做好准备，熟练的属性代码的编程技巧，才能做出更好的专题界面。 Echarts底层是基于ZRen...
Unity中嵌入Echarts图表
O213的博客
08-26 7411
Unity中做图表类的数据展示一直是个麻烦事，使用原生的Mesh绘制方式出来的图表存在样式单一，缺乏交互的问题，而Echart的数据图表样式丰富，数据呈现上非常美观，包含多样的交互方式，如果将Echart的图表嵌入到Unity中，项目中的数据呈现效果会改观很多。 这里需要用到Unity中的网页嵌入插件和Echart的图表样式文件： 1.Unity中的网页嵌入插件： Embedded Browser...
Java数据可视化 (JavaFX, Apache ECharts)
FengLing的博客
04-22 5916
需求 定义~, &, ? 三种新运算。 a b c = a + b – c & a b c d e = a + b + c – d – e ? a b c d = a + b – c + d 给定表达式，要求计算结果、解析为正常的算数表达式、构建表达式树并绘制该树形结构。 本文章记录如何绘制树形结构。 考虑到树中一个结点的孩子最多有五个，不便于使用字符串进行绘制。并且要求不能使用TreeView这种横向的控件，只允许从上至下地绘制，所以使用ECharts中的树状图来解决。 思路 Java
JavaFx控件WebView中使用echarts加载图
aliaichidantong的博客
09-19 1200
官方Demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="../../javascript/e...
SOX法案对信息安全的影响初探
SOX法案与信息安全初探 SOX法案是美国一项重要的法案，它于2002年7月30日由美国总统布什签署生效。该法案的全称是萨班斯-奥克斯利法案（Sarbanes-Oxley Act），旨在提高美国上市公司的财务报表可靠性和透明度，防止...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值