首页 > 代码库 > ECharts 3.0 初学感想及学习中遇到的瓶颈

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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/air/doc/example/air.html" ></IFRAME>         <IFRAME NAME="content_frame" width=25%; height=360px; SRC="http://www.mamicode.com/index4.html" ></IFRAME>         <IFRAME NAME="content_frame" width=24%; height=360px; SRC="http://www.mamicode.com/index4.html" ></IFRAME>         <IFRAME NAME="content_frame" width=24%; height=360px; SRC="http://www.mamicode.com/index4.html" ></IFRAME>        <IFRAME NAME="content_frame" width=24%; height=360px; SRC="http://www.mamicode.com/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>

效果图:

技术分享

 

 

 

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

 

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