ECharts 3.0 初学感想及学习中遇到的瓶颈

因为刚工作的原因，压力特别大，加上时间也不是很充足，所以最近也没怎么整理学习的东西，今天趁着手头工作完成总结一下吧，

说实话，其实ECharts 就是图表绚丽，展示数据渲染效果更加强烈，从2.0到3.0做得更加精致，不多比比，正题

首先你想使用必须要引入js/json文件，最主要的文件是 echarts.js 这个可以到官网下载完整版就好：http://echarts.baidu.com/download.html

之后直接在页面引用就可以，要注意存放路径，要用 UTF-8 编码

<script src="echartsmain.js"></script>

饼图/柱图这些就不说了，因为boss给的任务是地图，就直接说地图吧

接下来要引入地图文件，我用的是js格式，当然也可以引入json格式，

这里先说一下地图从哪里下载：http://echarts.baidu.com/download-map.html

js格式导入（这里我用的是山东省的，并不需要引入全国的）

<!-- <script src="china.js"></script> -->
<script src="shandong1.js"></script>

json格式的引入

<script type="text/javascript">
    //function(省份拼音+Json)
    $.get(‘map/json/china.json‘, function(gansuJson) {
        //echarts.registerMap(‘省份汉语名称‘, 省份拼音+Json);
        echarts.registerMap(‘甘肃‘, gansuJson);
        var chart = echarts.init(document.getElementById(‘main‘));
        chart.setOption({
            series : [ {
            type : ‘map‘,
            //map的值也是，省份汉语名称
            map : ‘甘肃‘
            } ]
        });
    });
<script>

要想有地方把图表/地图展示出来，那肯定要有地方来呈现吧，定义一个dom

<div id="main" style="width: 40%;height:400px;float:left;"></div>

这里 id 是啥其实无所谓的，只是官网（http://echarts.baidu.com/index.html）用的这个 main ，看完教程（http://echarts.baidu.com/tutorial.html）后，

　　就觉得还是 main 更舒服一点

基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById(‘main‘));

还有一点要注意的地方

　　在option设置对应的map属性：中国地图用china/省市地图直接用汉语,如山东省用山东

其他的就没有什么要特别注意的地方了，下面是代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/framework/include/pageset.jspa"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>跳转页面</title>
<script src="echartsmain.js"></script>
<!-- <script src="china.js"></script> -->
<script src="shandong1.js"></script>
</head>
<body>
     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 40%;height:400px;float:left;"></div>
        <!-- IFRAME 窗体引入 -->
        <!-- <IFRAME NAME="content_frame" width=59%; height=400px; SRC="air/doc/example/air.html" ></IFRAME>
        <IFRAME NAME="content_frame" width=25%; height=360px; SRC="index4.html" ></IFRAME>
        <IFRAME NAME="content_frame" width=24%; height=360px; SRC="index4.html" ></IFRAME>
        <IFRAME NAME="content_frame" width=24%; height=360px; SRC="index4.html" ></IFRAME>
        <IFRAME NAME="content_frame" width=24%; height=360px; SRC="index4.html" ></IFRAME>
 -->

 <!--
         1.首先引入要用的js/json文件
         2.在option设置对应的map属性：中国地图用china/省市地图直接用汉语,如山东省用山东
         3.定义一个Map来容纳城市坐标

         //还有很多目前没有搞明白

         <- 存在问题 ->
         1.城市名称不显示
         2.背景单调不绚丽

         <- 个性化 ->
         1.如果地图上结合其他图表/地图效果

      -->

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(‘main‘));

         var geoCoordMap = {
    /* ‘上海‘: [121.4648,31.2891],
    ‘东莞‘: [113.8953,22.901], */
    ‘东营‘: [118.7073,37.5513],
    /* ‘中山‘: [113.4229,22.478],
    ‘临汾‘: [111.4783,36.1615], */
    ‘临沂‘: [118.3118,35.2936],
    /* ‘丹东‘: [124.541,40.4242],
    ‘丽水‘: [119.5642,28.1854],
    ‘乌鲁木齐‘: [87.9236,43.5883],
    ‘佛山‘: [112.8955,23.1097],
    ‘保定‘: [115.0488,39.0948],
    ‘兰州‘: [103.5901,36.3043],
    ‘包头‘: [110.3467,41.4899],
    ‘北京‘: [116.4551,40.2539],
    ‘北海‘: [109.314,21.6211],
    ‘南京‘: [118.8062,31.9208],
    ‘南宁‘: [108.479,23.1152],
    ‘南昌‘: [116.0046,28.6633],
    ‘南通‘: [121.1023,32.1625],
    ‘厦门‘: [118.1689,24.6478],
    ‘台州‘: [121.1353,28.6688],
    ‘合肥‘: [117.29,32.0581],
    ‘呼和浩特‘: [111.4124,40.4901],
    ‘咸阳‘: [108.4131,34.8706],
    ‘哈尔滨‘: [127.9688,45.368],
    ‘唐山‘: [118.4766,39.6826],
    ‘嘉兴‘: [120.9155,30.6354],
    ‘大同‘: [113.7854,39.8035],
    ‘大连‘: [122.2229,39.4409],
    ‘天津‘: [117.4219,39.4189],
    ‘太原‘: [112.3352,37.9413], */
    ‘威海‘: [121.9482,37.1393],
    /* ‘宁波‘: [121.5967,29.6466],
    ‘宝鸡‘: [107.1826,34.3433],
    ‘宿迁‘: [118.5535,33.7775],
    ‘常州‘: [119.4543,31.5582],
    ‘广州‘: [113.5107,23.2196],
    ‘廊坊‘: [116.521,39.0509],
    ‘延安‘: [109.1052,36.4252],
    ‘张家口‘: [115.1477,40.8527],
    ‘徐州‘: [117.5208,34.3268],
    ‘德州‘: [116.6858,37.2107],
    ‘惠州‘: [114.6204,23.1647],
    ‘成都‘: [103.9526,30.7617],
    ‘扬州‘: [119.4653,32.8162],
    ‘承德‘: [117.5757,41.4075],
    ‘拉萨‘: [91.1865,30.1465],
    ‘无锡‘: [120.3442,31.5527], */
    ‘日照‘: [119.2786,35.5023],
    /* ‘昆明‘: [102.9199,25.4663],
    ‘杭州‘: [119.5313,29.8773], */
    ‘枣庄‘: [117.323,34.8926],
    /* ‘柳州‘: [109.3799,24.9774],
    ‘株洲‘: [113.5327,27.0319],
    ‘武汉‘: [114.3896,30.6628],
    ‘汕头‘: [117.1692,23.3405],
    ‘江门‘: [112.6318,22.1484],
    ‘沈阳‘: [123.1238,42.1216],
    ‘沧州‘: [116.8286,38.2104],
    ‘河源‘: [114.917,23.9722],
    ‘泉州‘: [118.3228,25.1147], */
    ‘泰安‘: [117.0264,36.0516],
    /* ‘泰州‘: [120.0586,32.5525], */
    ‘济南‘: [117.1582,36.8701],
    ‘济宁‘: [116.8286,35.3375],
    /* ‘海口‘: [110.3893,19.8516], */
    ‘淄博‘: [118.0371,36.6064],
    /* ‘淮安‘: [118.927,33.4039],
    ‘深圳‘: [114.5435,22.5439],
    ‘清远‘: [112.9175,24.3292],
    ‘温州‘: [120.498,27.8119],
    ‘渭南‘: [109.7864,35.0299],
    ‘湖州‘: [119.8608,30.7782],
    ‘湘潭‘: [112.5439,27.7075], */
    ‘滨州‘: [117.8174,37.4963],
    ‘潍坊‘: [119.0918,36.524],
    ‘烟台‘: [120.7397,37.5128],
   /*  ‘玉溪‘: [101.9312,23.8898],
    ‘珠海‘: [113.7305,22.1155],
    ‘盐城‘: [120.2234,33.5577],
    ‘盘锦‘: [121.9482,41.0449],
    ‘石家庄‘: [114.4995,38.1006],
    ‘福州‘: [119.4543,25.9222],
    ‘秦皇岛‘: [119.2126,40.0232],
    ‘绍兴‘: [120.564,29.7565], */
    ‘聊城‘: [115.9167,36.4032],
    /* ‘肇庆‘: [112.1265,23.5822],
    ‘舟山‘: [122.2559,30.2234],
    ‘苏州‘: [120.6519,31.3989], */
    ‘莱芜‘: [117.6526,36.2714],
    ‘菏泽‘: [115.6201,35.2057],
    /* ‘营口‘: [122.4316,40.4297],
    ‘葫芦岛‘: [120.1575,40.578],
    ‘衡水‘: [115.8838,37.7161],
    ‘衢州‘: [118.6853,28.8666],
    ‘西宁‘: [101.4038,36.8207],
    ‘西安‘: [109.1162,34.2004],
    ‘贵阳‘: [106.6992,26.7682],
    ‘连云港‘: [119.1248,34.552],
    ‘邢台‘: [114.8071,37.2821],
    ‘邯郸‘: [114.4775,36.535],
    ‘郑州‘: [113.4668,34.6234],
    ‘鄂尔多斯‘: [108.9734,39.2487],
    ‘重庆‘: [107.7539,30.1904],
    ‘金华‘: [120.0037,29.1028],
    ‘铜川‘: [109.0393,35.1947],
    ‘银川‘: [106.3586,38.1775],
    ‘镇江‘: [119.4763,31.9702],
    ‘长春‘: [125.8154,44.2584],
    ‘长沙‘: [113.0823,28.2568],
    ‘长治‘: [112.8625,36.4746],
    ‘阳泉‘: [113.4778,38.0951], */
    ‘青岛‘: [120.4651,36.3373]
    /* ‘韶关‘: [113.7964,24.7028] */
};

/* 定义三个切换按钮运行航线/最好形成循环,是否必须暂时还不确定 */
var JNData = [
    [{name:‘济南‘,value:120,img:‘flag2.png‘}, {name:‘淄博‘,value:120,img:‘flag2.png‘}],
    [{name:‘淄博‘,value:120,img:‘flag2.png‘}, {name:‘青岛‘,value:120,img:‘flag2.png‘}],
    [{name:‘青岛‘,value:120,img:‘flag2.png‘}, {name:‘济南‘,value:120,img:‘flag2.png‘}]
];

var QDData = [
    [{name:‘济南‘,value:120,img:‘flag2.png‘}, {name:‘烟台‘,value:120,img:‘flag2.png‘}],
    [{name:‘烟台‘,value:120,img:‘flag2.png‘}, {name:‘威海‘,value:120,img:‘flag2.png‘}],
    [{name:‘威海‘,value:120,img:‘flag2.png‘}, {name:‘青岛‘,value:120,img:‘flag2.png‘}],
    [{name:‘青岛‘,value:120,img:‘flag2.png‘}, {name:‘济南‘,value:120,img:‘flag2.png‘}],
];

var ZBData = [
    [{name:‘菏泽‘,value:120,img:‘flag2.png‘}, {name:‘淄博‘,value:120,img:‘flag2.png‘}],
    [{name:‘淄博‘,value:120,img:‘flag2.png‘}, {name:‘莱芜‘,value:120,img:‘flag2.png‘}],
    [{name:‘莱芜‘,value:120,img:‘flag2.png‘}, {name:‘济宁‘,value:120,img:‘flag2.png‘}],
    [{name:‘济宁‘,value:120,img:‘flag2.png‘}, {name:‘菏泽‘,value:120,img:‘flag2.png‘}],
];

/* 应该是航线坐标啥的,测试了一次感觉并不需要改动 */
var planePath = ‘path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z‘;

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
            res.push({
                fromName: dataItem[0].name,
                toName: dataItem[1].name,
                coords: [fromCoord, toCoord],
                symbol:‘image://‘ + dataItem[0].img
            });
        }
    }
    return res;
};

var color = [‘#a6c84c‘, ‘#ffa022‘, ‘#46bee9‘];
var series = [];
[[‘济南‘, JNData], [‘青岛‘, QDData], [‘淄博‘, ZBData]].forEach(function (item, i) {
    series.push({
        name: item[0],
        type: ‘lines‘,
        zlevel: 1,
        effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: ‘#fff‘,
            symbolSize: 3
        },
        lineStyle: {
            normal: {
                color: color[i],
                width: 0,
                curveness: 0.2
            }
        },
        data: convertData(item[1])
    },
    {
        name: item[0],
        type: ‘lines‘,
        zlevel: 2,
        effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,

        },
        lineStyle: {
            normal: {
                color: color[i],
                width: 1,
                opacity: 0.4,
                curveness: 0.2
            }
        },
        data: convertData(item[1])
    },
    {
        name: item[0],
        type: ‘scatter‘,
        coordinateSystem: ‘geo‘,
        zlevel: 2,
        rippleEffect: {
            brushType: ‘stroke‘
        },
        label: {
            normal: {
                show: true,
                position: ‘right‘,
                formatter: ‘{b}‘
            }
        },
        symbolSize: function (val) {
            return val[2] / 8;
        },
        itemStyle: {
            normal: {
                color: color[i]
            }
        },

        data: item[1].map(function (dataItem) {
            return {
                name: dataItem[1].name,//
                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
                 symbol: ‘image://‘ + dataItem[1].img
            };
        })

    });
});
[[‘济南‘, JNData], [‘青岛‘, QDData], [‘淄博‘, ZBData]].forEach(function (item, i) {
    series.push({
        name: item[0],
        type: ‘lines‘,
        zlevel: 1,
        effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: ‘#fff‘,
            symbolSize: 3
        },
        lineStyle: {
            normal: {
                color: color[i],
                width: 0,
                curveness: 0.2
            }
        },
        data: convertData(item[1])
    },
    {
        name: item[0],
        type: ‘lines‘,
        zlevel: 2,
        effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,
            symbolSize: 15
        },

        lineStyle: {
            normal: {
                color: color[i],
                width: 1,
                opacity: 0.4,
                curveness: 0.2
            }
        },
        data: convertData(item[1])
    },
    {
        name: item[0],
        type: ‘scatter‘,
        coordinateSystem: ‘geo‘,
        zlevel: 2,
        rippleEffect: {
            brushType: ‘stroke‘
        },
        label: {
            normal: {
                show: true,
                position: ‘right‘,
                formatter: ‘{b}‘
            }
        },
        symbolSize: function (val) {
            return val[2] / 8;
        },
        itemStyle: {
            normal: {
                color: color[i]
            }
        },

        data: item[1].map(function (dataItem) {
            return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
                 symbol: ‘image://‘ + dataItem[0].img
            };
        })

    });
});

option = {
    backgroundColor: ‘#404a59‘,
    title : {
        text: ‘行程图‘,
        left: ‘center‘,
        textStyle : {
            color: ‘#fff‘
        }
    },
    tooltip : {
        trigger: ‘item‘
    },

    legend: {
        orient: ‘vertical‘,
        top: ‘bottom‘,
        left: ‘right‘,
        data:[‘济南‘, ‘青岛‘, ‘淄博‘],//定义左下角切换按钮
        textStyle: {
            color: ‘#fff‘
        },
        selectedMode: ‘single‘
    },
    geo: {
        map: ‘山东‘,//省份地图用汉语去掉省/全国地图用china
        label: {
            emphasis: {
                show: false
            }
        },
        roam: false,
        itemStyle: {
            normal: {
                areaColor: ‘#323c48‘,
                borderColor: ‘#404a59‘
            },
            emphasis: {
                areaColor: ‘#2a333d‘
            }
        }
    },

    series: series
};

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>
</html>

效果图：

由于时间的原因和个人学习的不多，所以写的很乱，后续还会继续的跟进和完善，欢迎批评指导

时间： 2024-08-02 04:23:27

ECharts 3.0 初学感想及学习中遇到的瓶颈的相关文章

初学Java9：学习Mybatis时报错：Parameter 'name' not found. Available parameters are [1, 0, param1, param2]

报错-->Parameter 'name' not found. Available parameters are [1, 0, param1, param2] 百度找到这篇文章完成修改 http://blog.csdn.net/w86440044/article/details/29363067 我之前写的操作类是和博主一样,是这样的: 1 // 登录·查询 2 @Select("select * from t_users where uname=#{name} and pswd=#{p

asp.net mvc 3.0 知识点整理 ----- (2).Controller中几种Action返回类型对比

通过学习,我们可以发现,在Controller中提供了很多不同的Action返回类型.那么具体他们是有什么作用呢?它们的用法和区别是什么呢?通过资料书上的介绍和网上资料的查询,这里就来给大家列举和大致的概括下. (1). ActionResult(base):最基本的Action类型,返回其他类型都可以写ActionResult. (2). ContentResult:返回ContentResult用户定义的内容类型. public ActionResult Content() { return

MFC学习中遇到的小问题和解决方案

1 清除combox里面的内容((CComboBox*)GetDlgItem(IDC_COMBO_CF))->ResetContent();//消除现有所有内容2 如何获取鼠标指针的位置GetWindowRect 详情见657面超市管理系统 3 如何获取combox下拉列表的索引:int selgetcursel;getlbtext; 4 选中某行某列值并修改SetItemText 5 单击选中listcontrol控件某行右键添加一个菜单并触发事件 (见该网页第15条记录) http:/

Entity Framework 5.0 Code First全面学习

目录(?)[+] 不贴图片了,太累. Code First 约定借助 CodeFirst,可通过使用 C# 或Visual Basic .NET 类来描述模型.模型的基本形状可通过约定来检测.约定是规则集,用于在使用 Code First 时基于类定义自动配置概念模型.约定是在 System.Data.Entity.ModelConfiguration.Conventions 命名空间中定义的. 可通过使用数据注释或Fluent API 进一步配置模型.优先级是通过 Fluent API 进行

MySQL学习中的的疑问

敬爱的孙先生: 我在MySQL的学习中遇到的问题整理如下: 问题0: 用start transaction开启一个事务时需要设置autocommit=0吗? 答:不需要.autocommit=0 意思是不提交dml操作,其实就是开启事务. 问题1: Repeatable read和Read Committed的区别是什么? 如何运用? 回答:rc是不可重复读 rr是可重复读 : rc多次执行一个sql,结果会不一样,rr会在结果的范围内有幻影行出现 RC解决了事务的脏读,脏读是读取到了未提

浅谈深度学习中潜藏的稀疏表达

浅谈深度学习中潜藏的稀疏表达 “王杨卢骆当时体,轻薄为文哂未休. 尔曹身与名俱灭,不废江河万古流.” — 唐杜甫<戏为六绝句>(其二) [不要为我为啥放这首在开头,千人千面千理解吧] 深度学习:概述和一孔之见深度学习(DL),或说深度神经网络(DNN), 作为传统机器学习中神经网络(NN).感知机(perceptron)模型的扩展延伸,正掀起铺天盖地的热潮.DNN火箭般的研究速度,在短短数年内带来了能“读懂”照片内容的图像识别系统,能和人对话到毫无PS痕迹的语音助手,能击败围棋世界冠军.引

Python学习中的随笔，好记性不如烂笔头

本文为博主看了 vamei 的blog 写下的随笔 . 致敬Vamei 1.type() 可以显示参数的类型如 : a=12 type(a) 为 int 2.python的基本类型为 int float bool string 如 int : i=1 , float : f=12.5 , bool : b= True or Flase , string : s='Hello , word !' 使用前无需声明类型即动态类型 3.1序列有 tuple

深度学习中得数学，高效计算基础与线性分类器

深度学习说到底就是要调节网络中得权重,使网络的分类结果更接近于训练值.这个重复迭代的过程又是一个线性回归的问题.在这种可能会用到高数,线性代数,概率论中的知识. 一.数学基础提一提. 1.高数中得知识. 高数中最重要的就是微积分了,那在深度学习中出现最多的一个概念就是梯度.什么是梯度呢?要说导数,学过高数的肯定都知道.其实梯度就是当把标量x变成向量X时,对X求导就是梯度.那为什么要用梯度呢?因为梯度等于0在凸函数中往往代表着一个极小值点.我们要求得就是损失函数的极小值,这正是我们需要的.梯度是指

Java基础学习中一些词语和语句的使用

在Java基础学习中,我们刚接触Java会遇到一些词和语句的使用不清的情况,不能很清楚的理解它的运行效果会是怎么样的,如:break,continue在程序中运行效果及跳转位置, 1.先来看看break和continue使用和运行效果的额说明: break:关键字,可以用于任何循环体控制结构,在循环体内执行时,当执行到break时循环会立即终止,并跳到此循环体以后的语句执行. 列如:输出0--10的数当输出到第六位时就不在继续输出了,即是跳出for循环执行for循环体以后的一句. public