ECharts官网 标准地图实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>echart学习</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript" src="dataJson.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        //使用
        require(
        	[
        		'echarts',
        		'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载
        		'echarts/chart/line',
        		'echarts/chart/map',
        		'echarts/chart/scatter',
        		'echarts/chart/k',
        		'echarts/chart/pie',
        		'echarts/chart/radar',
        		'echarts/chart/chord',
        		'echarts/chart/force',
 ],
        	function(ec){
        		 // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
                // 过渡---------------------
               /* myChart.showLoading({
                    text: '正在努力的读取数据中...',    //loading话术
                });
                var dataJ = new Array;
                var dataH = new Array;
                var dataL = new Array;
                for (var i = 0; i < data.dj.length; i++) {
                	dataJ.push(data.dj[i].month);
                	dataH.push(data.dj[i].high);
                	dataL.push(data.dj[i].low);
                };

                myChart.hideLoading();*/
   var  option = {
         title : {
             text: 'iphone销量',
             subtext: '纯属虚构',
             x:'center'
         },
         tooltip : {
             trigger: 'item'
         },
         legend: {
             orient: 'vertical',
             x:'left',
             data:['iphone3','iphone4','iphone5']
         },
         dataRange: {
             min: 0,
             max: 2500,
             x: 'left',
             y: 'bottom',
             text:['高','低'],           // 文本,默认为数值文本
             calculable : true
         },
         toolbox: {
             show: true,
             orient : 'vertical',
             x: 'right',
             y: 'center',
             feature : {
                 mark : {show: true},
                 dataView : {show: true, readOnly: false},
                 restore : {show: true},
                 saveAsImage : {show: true}
             }
         },
         roamController: {
             show: true,
             x: 'right',
             mapTypeControl: {
                 'china': true
             }
         },
         series : [
             {
                 name: 'iphone3',
                 type: 'map',
                 mapType: 'china',
                 roam: false,
                 itemStyle:{
                     normal:{label:{show:true}},
                     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}},
                     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}},
                     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)}
                 ]
             }
         ]
     };
                // 为echarts对象加载数据
                myChart.setOption(option);
        	}
        	);
       // }
    </script>
</body>
</html>

效果图

时间: 2024-10-07 16:40:47

ECharts官网 标准地图实现的相关文章

报表如何集成 echarts 官网示例图

Echarts,江湖人称一个纯 Javascript 的图表库,图形种类星罗棋布且个个颜值爆表,可以轻松驾驭 PC 和移动设备,与绝大部分浏览器都可称兄道弟,而且已然众多拥趸,还有不少报表对它采取了嫁接技术.Echarts 如何与润乾报表嫁接呢?接下来跟着我一探究竟. 第一步, echarts 官网找到自己需要的图形代码 我们以最简单的折线图为例:https://echarts.baidu.com/examples/editor.html?c=line-simple 我们可以看到核心处理代码在

ECharts官网实例

简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力. 支持折线图(区域图).柱状图(条状图

Echarts官网展示

1.参考实例 http://echarts.baidu.com/examples/ 点击去的效果: 2.配置项手册 http://echarts.baidu.com/option.html#title 效果 3.问题的解答 这个是一个git项目: · 可以提问题: 原文地址:https://www.cnblogs.com/juncaoit/p/9185480.html

echarts &nbsp; js 模板制作 地图 案例分享

今天分享一个 echarts   js 模板制作 地图 案例,有类似需求的筒子可以参考 O(∩_∩)O 需求:因为最近管理的全国各地代理服务器越来越多,有时上级需要看下我们的代理分布,比如带宽,比如供应商,如果用纯excel不是很直观,就套用了前端的Js模板,修改了些代码,填充部分值进去,就出来基本效果了. 上效果图: 基本上把全国各地的资源情况很直观的显示出来了,这里只填充了部分值,后期会将值存入mysql,并且用上ajax 来塞值,这里就列个基本的效果图. 5分钟上手echarts,官网教程

普通高中课程方案和语文等学科课程标准(2017年版)----分析及教育部官网网址

我主要关注:高中信息技术.通用技术方面的课标.下面就把我的体会总结一下,便于后续教研. 高中信息技术        高中通用技术 其中: 技术与生活系列 技术与工程系列 技术与职业系列 技术与创造系列 1.现代家政技术 4.工程设计基础 8 职业技术基础 能源方面的 9创造力开发与技术发明 2.服装及其设计 5.电子控制技术 10 产品三维设计与制造 (如3D打印相关 3.智能家居应用设计 6.机器人设计与制作 11 科技人文融合创新(steam等 更多内容请关注:官网 普通高中课程方案和语文等

Android 7.0行为变化—开发者应该关注的(官网同步翻译)

Android 7.0行为变化-开发者应该关注的(官网同步翻译) 版权声明:转载必须注明本文转自严振杰的博客: http://blog.yanzhenjie.com 如果想了解更多Android7.0的内容,可以顺便再看看Android7.0写给开发者的一封信(官网同步翻译). 如果你的引文够好,推荐你阅读官网文章: Android 7.0 Behavior Changes Android N 除了提供诸多新特性和功能外,还对系统和 API 行为做出了各种变更.本文重点介绍你应该了解并在开发应用

【Spark深入学习 -16】官网学习SparkSQL

----本节内容-------1.概览        1.1 Spark SQL        1.2 DatSets和DataFrame2.动手干活        2.1 契入点:SparkSession        2.2 创建DataFrames        2.3 非强类型结果集操作        2.4 程序化执行SQL查询        2.5 全局临时视图        2.6 创建DataSets        2.7 与RDD交互操作        2.8 聚集函数3.Sp

化妆品互联网品牌柚子舍的官网渠道涅槃之路

2014年5月10日,柚子舍新官网的上线,将再次验证一个轰鸣性时刻的到来,作为业内一匹英姿飒爽的"神马",柚子舍将在马年的5月,马上为柚粉们带来全方位的柚子舍2.0升级版服务. 7项严格无添加,不顾一切地坚持,哪怕满地荆棘也不放弃--"神经"!但正因为我们的偏执,您才能用上史上最安全.有效的化妆品. 因为只做线上,在线下无法看到,所以"神龙"见首不见尾--"隐秘".但正因为我们只做线上,才能更方便来到您的身边. 柚子舍,已不仅

Oracle官网JNI简介和接口函数分析

第一章 概述 本章主要介绍JNI(Java Native Interface),JNI是一种本地编程接口.它允许运行在JAVA虚拟机中的JAVA代码和用其他编程语言,诸如C语言.C++.汇编,写的应用和库之间的交互操作. JNI的最大优势在于没有强加任何限制在JAVA虚拟机的下层实现上,因此,JAVA虚拟机供应商能够提供JNI的支持而不影响虚拟机的其他部分,程序员只需写出一个版本的本地应用和库,就可使之运行在一切支持JNI的JAVA虚拟机上. 本章包含了以下的要点: ? JNI概述 ? 目标 ?