E-Charts数据可视化

数据可视化

一、展示方法

1).Jfreechart:免费,功能一般,效果一般(不怎么绚丽),但是是之前的产物,以前用的比较多,现在用的比较少了(建议以了解为主)2).e-charts:免费,百度出产的,功能强大,效果(绚丽),近几年的产物,现在国内的众多软件公司用的比较多(推荐学习)3).Hight-charts:国外产生,功能强大,效果绚丽,据说XX是抄袭他的,在国内用的比较少(也是建议了解)

二、图表工具的作用以及原则

1).作用   1>.清晰直观的使得数据可视化   2>.结和后台技术真正做到数据的实时变化,例如可以实现k线图,因为有js定时器   3>.提升软件产品的用户体验   2).原则1>.正常使用即可,不能偏离方向,切记不要主次不分2>.不能随便的去更改软件本身的源代码和功能,但是可以基于它实现拓展或者自定义开发

三.E-Charts的使用

1).E-Charts:是百度出产一个免费的用于图表展示的工具,因其强大的功能和简易上手深受广大程序员喜爱,同时因其绚丽多彩的效果在同类软件中不断深受好评2).知识掌握:需要具备HTML ,CSS,JS,Jquery ,Json等技能3).官网地址:https://echarts.apache.org/zh/4).商业开发版本 2.x: e-charts2.x版本的底层更多是依赖底层zrender     3.x: 不再强制使用AMD的方式按需引入,引入方式简单了很多,只需要像普通的  JavaScript 库一样用 script 标签引入     补充:     AMD:Asynchronous Module Definition,意思为:异步模块定义5).官网的使用介绍 文档:可以下载和查看相关的API和教程     下载:可以下载软件,可以下载主题数据,地图数据,扩展数据,这里所谓的数据  其实就是一些.js文件或者json文件,详细可以去参考下载数据文件夹     实例:下载官方给出的实例,甚至可以在线编辑在线预览     社区:可以讨论和参考下载别人例子的地方     工具:在线生成一些数据,例如可以生成某个省份或者市区的数据的.js文件     关于:项目介绍和版权归属的信息的公布

四、示例展示图

1).E-Charts之柱状图展示

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%><!DOCTYPE html><html><head><script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/js/echarts/echarts.js"></script><meta charset="UTF-8"><title>e-charts应用举例之通过柱状图显示公司的全年--季度财务统计报告</title></head><body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var shouruData=[];//数组对象:存放12个月的收入金额var zhichuData=[];//数组对象:存放12个月的支出金额var yusuanData=[];//数组对象:存放12个月的预算金额<c:forEach items="${list_shouru}" var="shouru">shouruData.push(parseInt("${shouru.jiner}"));</c:forEach><c:forEach items="${list_zhichu}" var="zhichu">zhichuData.push(parseInt("${zhichu.jiner}")); </c:forEach> <c:forEach items="${list_yusuan}" var="yusuan"> yusuanData.push(parseInt("${yusuan.jiner}")); </c:forEach> //1.基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById("main")); // 2.指定图表的配置项和数据 var option = {    title: {        //主标题文本,'\n'指定换行        text: 'XX公司2020年的财务统计报告',        //主标题文本超链接        link: 'http://www.baidu.com',        //副标题文本,'\n'指定换行        //subtext: 'www.stepday.com',        //副标题文本超链接        // sublink: 'http://www.stepday.com/myblog/?Echarts',        //水平安放位置,默认为左侧,      //可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)        x: '180px',        //垂直安放位置,默认为全图顶端,      //可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)        y: '20px'      },      tooltip: {     //触发类型,默认('item')数据触发,可选为:'item'(数据触发,     //其实就是提示窗显示数据) | 'axis'(轴线触发,其实就是提示窗显示轴线)     trigger: 'axis'      },     legend: {     //显示策略,可选为:true(显示) | false(隐藏),默认值为true           show: true,          //水平安放位置,默认为全图居中,         //可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)           x: 'center',           //垂直安放位置,默认为全图顶端,         //可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)           y: 'top',           data:['收入','预算','支出']     },          xAxis: {      type: 'category',          data: ["第一季度","第二季度","第三季度","第四季度"],         name:'季度'     },     yAxis: {       show: true,   //是否显示 y 轴,默认显示,但是设置为false就不显示了       //坐标轴类型。'value' 数值轴,适用于连续数据。       //'category' 类目轴,适用于离散的类目数据,为该       //类型时必须通过 data 设置类目数据       type: 'value',       name:'金额(元)'     },     series: [         {                      name: '收入',             type: 'bar',             markPoint: {                   data: [                       {type: 'max', name: '最大值'},                       {type: 'min', name: '最小值'}                   ]               },              markLine: {                   data: [                       {type: 'average', name: '平均值'}                   ]               },             data: shouruData         },         {         name: '预算',         type: 'bar',         markPoint: {               data: [                   {type: 'max', name: '最大值'},                   {type: 'min', name: '最小值'}               ]           },          markLine: {               data: [                   {type: 'average', name: '平均值'}               ]           },         data: yusuanData    },    {             name: '支出',             type: 'bar',             markPoint: {                   data: [                       {type: 'max', name: '最大值'},                       {type: 'min', name: '最小值'}                   ]               },              markLine: {                   data: [                       {type: 'average', name: '平均值'}                   ]               },             data: zhichuData         }     ] }; // 3.使用刚指定的配置项和数据显示图表。 myChart.setOption(option);</script></body></html>

2).E-Charts之饼状图展示

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>e-charts应用举例之通过饼状图显示公司员工的学历信息</title><script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/js/echarts/echarts.js"></script></head><body><div id="main" style="width: 600px;height:400px; border:2px solid red;"></div><script type="text/javascript">var renshuData=[];//声明一个人数的数组对象,主要用来装人数的var xueliData=[];//声明一个学历的数组对象,主要是用来装具体是什么学历的<c:forEach var="map" varStatus="i" items="${list_xueli}">renshuData.push("${map.renshu}");xueliData.push("${map.xueli}");</c:forEach>// 1.基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = { title : { //标题 text: 'XX公司员工学历信息图', //父标题 subtext: '这个是二级标题---就是方便阅读--进一步解释大标题的', x:'center' },tooltip : { trigger: 'item', //折线(区域)图、柱状(条形)图、K线图 :  //{a}(系列名称),{b}(类目值),{c}(数值), {d}(无) //饼图、仪表盘、漏斗图:  //{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比) formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: { orient: 'vertical', left: 'left', data: xueliData},series : [ {     name: '访问来源',     type: 'pie',     //饼图的半径,数组的第一项是内半径,第二项是外半径(相对于容器)。     radius : '55%',  //[0, '75%']      //饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。//支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。     center: ['50%', '60%'],//[400, 300]     data:[         {value:renshuData[0], name:xueliData[0],itemStyle:{color:'red'}},         {value:renshuData[1], name:xueliData[1],itemStyle:{color:'blue'}},         {value:renshuData[2], name:xueliData[2],itemStyle:{color:'green'}},         {value:renshuData[3], name:xueliData[3],itemStyle:{color:'pink'}}     ] }]};// 3.使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body></html>

3).E-Charts之折线图展示

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%><!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/js/echarts/echarts.js"></script><title>e-charts应用举例之通过折线图显示学生的周作业完成情况</title></head><body><div id="main" style="width: 800px;height:400px;"></div><script type="text/javascript"> var wanchengData=[];//数组对象:存放一周的完成作业的每天的人数 var meiyouData=[];//数组对象:存放一周的没有完成作业的每天的人数 <c:forEach items="${list_zhexian}" var="zhexian"> wanchengData.push(parseInt("${zhexian.wanchen}")); meiyouData.push(parseInt("${zhexian.meiyou}"));     </c:forEach>var myChart = echarts.init(document.getElementById('main'));option = {    title : {        text: '**班一周作业验收情况统计走势图',        subtext: '二级标题'    },    tooltip : {        trigger: 'axis'    },    legend: {        data:['已完成','未完成']    },    toolbox: {        show : true,        x:'520',        y:'top',        feature : {            mark : {show: true},            dataView : {show: true, readOnly: true,title:"数据视图",lang: ['数据视图', '关闭', '刷新'],},            magicType : {show: true, type: ['bar','line','stack'],title: {                line: '切换为折线图',                bar: '切换为柱状图',                stack: '切换为堆叠',                tiled: '切换为平铺'            }},            restore : {show: true,title:"还原",},            saveAsImage : {show: true,title:"保存为图片",}        }    },    calculable : true,    xAxis : [        {            type : 'category',            boundaryGap : false,            data : ['周一','周二','周三','周四','周五','周六','周日']        }    ],    yAxis : [        {            type : 'value',            axisLabel : {             formatter: '{value}人 '            }        }    ],    series : [        {            name:'已完成',            type:'line',            data:wanchengData,            markPoint : {                data : [                    {type : 'max', name: '最大值'},                    {type : 'min', name: '最小值'}                ]            },            markLine : {                data : [                    {type : 'average', name: '平均值'}                ]            }        },        {            name:'未完成',            type:'line',            data:meiyouData,            markPoint : {                data : [                        {type : 'max', name: '最大值'},                        {type : 'min', name: '最小值'}                ]            },            markLine : {                data : [                    {type : 'average', name : '平均值'}                ]            }        }    ]};//3.设定并显示                     myChart.setOption(option);</script></body></html>

4).E-Charts之分布图展示

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><html><head>    <meta charset="utf-8">    <title>e-charts应用举例之通过分布图显示学院学生来源分布</title>    <style type="text/css">        body {            margin: 0;        }        #main {            height: 100%;        }    </style></head><body><div id="main"></div><script src="<%=request.getContextPath()%>/qxt/echarts.js"></script><script src="<%=request.getContextPath()%>/qxt/bmap.js"></script><script src="<%=request.getContextPath()%>/qxt/china.js"></script><script src="<%=request.getContextPath()%>/qxt/jquery-1.8.1.js"></script><script type="text/javascript">var shengfenData=[];var renshuData=[];<c:forEach var="map" items="${list_fenbu}" >shengfenData.push("${map.shengfen}");renshuData.push("${map.renshu}");</c:forEach>var sum=0;for(var i =0;i<renshuData.length;i  ){sum=sum parseInt(renshuData[i]);}//获取绘图位置对象var myChart = echarts.init(document.getElementById('main'));function randomData() {    return Math.round(Math.random()*1000);}function randomData1() {    return Math.round(Math.random()*500);}function randomData2() {    return Math.round(Math.random()*200);}function randomData3() {    return Math.round(Math.random()*50);}//配置option = {    title: {        x:'470px',        text: '河北软件学院学生来源地理分布图',        textStyle:{            fontSize:14            ,fontWeight:'normal'            ,color:'#565656'        },        left:480,        top:10,        textStyle: {        // 颜色        color: '#0066FF',        // 水平对齐方式,可选为:'left' | 'right' | 'center'        align: 'left',        // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'        baseline: 'bottom',        // 字体系列        fontFamily: 'Arial, 黑体, sans-serif',        // 字号 ,单位px        fontSize: 20,        // 样式,可选为:'normal' | 'italic' | 'oblique'        fontStyle: 'italic',        // 粗细,可选为:'normal' | 'bold' | 'bolder'         // | 'lighter' | 100 | 200 |... | 900        fontWeight: 'bold'        },            },    tooltip: {         trigger: 'item'        ,formatter:'{b}<br>人数:{c}'    },    visualMap: {        min: 0,        max: 150,        left:20,        bottom:10,        text: ['高','低'],// 文本,默认为数值文本        color:['red','orange','yellow','green'],        calculable: true    },    series: [        {            type: 'map',// 图表类型            //显示的类型为中国地图,备注e-charts是支持中国地图和世界地图的            mapType: 'china',            roam: false,//是否开启滑动鼠标滚轮实现缩放            itemStyle:{            // 默认状态下地图的文字                normal:{label:{show:true}},              },            data:[                                  {name: '北京',value: randomData2() },                {name: '天津',value: randomData2() },                {name: '上海',value: randomData1() },                {name: '重庆',value: randomData2() },                {name: '河北',value: renshuData[3] },                {name: '安徽',value: renshuData[0] },                {name: '新疆',value: randomData3() },                {name: '浙江',value: randomData() },                {name: '江西',value: randomData3() },                {name: '山西',value: renshuData[2] },                {name: '甘肃',value: randomData1() },                {name: '青海',value: randomData3() },                {name: '黑龙江',value: renshuData[7] },                {name: '辽宁',value: randomData3() },                {name: '山东',value: renshuData[1]},                {name: '江苏',value: randomData1() },                {name: '河南',value: renshuData[4] },                {name: '陕西',value: renshuData[6] },                {name: '湖北',value: randomData3() },                {name: '湖南',value: randomData() },                {name: '贵州',value: renshuData[5] },                {name: '云南',value: randomData() },                {name: '广西',value: randomData() },                {name: '台湾',value: 0 },                {name: '海南',value: randomData3() },                {name: '内蒙古',value: randomData3() },                {name: '南海诸岛',value: 0 },                {name: '吉林',value: randomData() },                {name: '福建',value: 0 },                {name: '广东',value: randomData1() },                {name: '西藏',value: randomData3()},                {name: '四川',value: randomData1() },                {name: '宁夏',value: randomData1() },                {name: '香港',value: 0 },                {name: '澳门',value: 0 }            ]        }    ]};//为echarts对象加载数据myChart.setOption(option);</script></body></html>

5).E-Charts之迁徙图展示(了解即可)

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><html><head>    <meta charset="utf-8">    <title>e-charts应用举例之通迁徙图显示学生离校示意图</title>    <style type="text/css">        body {            margin: 0;        }        #main {            height: 100%;        }    </style></head><body><div id="main"></div><script type="text/javascript" src="<%=request.getContextPath()%>/qxt/echarts.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/qxt/bmap.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/qxt/china.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/qxt/world.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/qxt/jquery-1.8.1.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/qxt/province_position.js"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=sVMiVrWelyy5jTPT82UQxpx21avuUhLx"></script><script type="text/javascript">alert(positions);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],    '佳木斯':[130.2841,46.8154]}; alert("geoCoordMap:" geoCoordMap);var BDData = [    [{name:'保定'}, {name:'佳木斯',value: Math.floor(Math.random() * (100 - 1))   1}],    [{name:'保定'}, {name:'连云港',value:Math.floor(Math.random() * (100 - 1))   1}],    [{name:'保定'}, {name:'乌鲁木齐',value:Math.floor(Math.random() * (100 - 1))   1}],    [{name:'保定'}, {name:'太原',value:Math.floor(Math.random() * (100 - 1))   1}],    [{name:'保定'}, {name:'济南',value:Math.floor(Math.random() * (100 - 1))   1}],    [{name:'保定'}, {name:'哈尔滨',value:Math.floor(Math.random() * (100 - 1))   1}],    [{name:'保定'}, {name:'大连',value:Math.floor(Math.random() * (100 - 1))   1}],    [{name:'保定'}, {name:'南京',value:Math.floor(Math.random() * (100 - 1))   1}],    [{name:'保定'}, {name:'长沙',value:Math.floor(Math.random() * (100 - 1))   1}],    [{name:'保定'}, {name:'西安',value:Math.floor(Math.random() * (100 - 1))   1}]];  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]            });        }    }    return res;}; var color = ['#a6c84c', '#ffa022', '#46bee9'];var series = [];[['保定', BDData]].forEach(function (item, i) {    series.push({            name: item[0]   ' Top10',            type: 'lines',            coordinateSystem: 'bmap',            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]   ' Top10',            type: 'lines',            coordinateSystem: 'bmap',            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]   ' Top10',            type: 'effectScatter',            coordinateSystem: 'bmap',            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])                };            })        });}); option = {    backgroundColor: '#404a59',    title : {        text: 'xx学院学生地理信息分部图',        left: 'center',        textStyle : {            color: 'black'        }    },    tooltip : {        trigger: 'item'    },    legend: {        orient: 'vertical',        top: 'bottom',        left: 'right',        data:['保定 Top10'],        textStyle: {            color: '#fff'        },        selectedMode: 'single'    },    dataRange: {        min: 0,        max: 100,        x: 'right',        calculable: true,        color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],        textStyle: {            color: '#fff'        }    },    bmap: {        center: [115.97, 29.71],        zoom: 5,        roam: true    },    series: series};myChart.setOption(option);</script></body></html>
backgroundColor: '#404a59',title : {    text: 'xx学院学生地理信息分部图',    left: 'center',    textStyle : {        color: 'black'    }},tooltip : {    trigger: 'item'},legend: {    orient: 'vertical',    top: 'bottom',    left: 'right',    data:['保定 Top10'],    textStyle: {        color: '#fff'    },    selectedMode: 'single'},dataRange: {    min: 0,    max: 100,    x: 'right',    calculable: true,    color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],    textStyle: {        color: '#fff'    }},bmap: {    center: [115.97, 29.71],    zoom: 5,    roam: true},series: series

};
myChart.setOption(option);

``` 来源:https://www.icode9.com/content-4-786451.html

(0)

相关推荐

  • vue路由学习

    一.文章导读 ​路由的本质就是一种对应关系,在代码程序中,一个a标签跳转页面,里面a标签里面需要写对用页面的路径,或者写跳转后台的服务.那么这个路径就与页面相对应,我们可以将它视为路由的一种形式. 路 ...

  • ECharts数据可视化:从0到1的蜕变(内部技术分享总结)

    前言 先简单介绍一下自己,我是Jack Chen,一名非常热爱学习的[高级Web前端工程师],从事Web前端工作多年,具有丰富的大中型实战项目开发经验.[学习与写作]是目前唯一每天都坚持完成的事情,业 ...

  • echarts 树图tree 改为流程图

    先上图: 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  • Vue基础(四):模板语法(三)

    Vue基础(四):模板语法(三)

  • 这是我看过最走心的数据可视化文章了,看完血赚!

    注:本文转载自 https://antv.alipay.com/zh-cn/vis/blog/vis-introduce.html 一.什么是数据可视化 科学可视化(Scientific Visual ...

  • 49款数据可视化工具,哪个才是你的菜?

    数据可视化无处不在,而且比以前任何时候都重要.无论是在行政演示中为数据点创建一个可视化进程,还是用可视化概念来细分客户,数据可视化都显得尤为重要.本文将推荐49款数据可视化工具(排名不分先后).其中许 ...

  • 数据可视化的魔力——一图胜千言

    "可视化实际上是关于外部认知,也就是说,如何利用心灵之外的资源来提升思维的认知能力." 本文重点介绍可视化与数据的重要性.科学,工程,商业和日常人类活动中产生的信息的数量和复杂性正 ...

  • 学习数据可视化,读哪本书比较好?

    入门数据可视化的小伙伴往往都会问这样一个问题:我应该从哪里开始学起,有什么书推荐吗? 这个问题之所以普遍,是因为数据可视化是一个相当交叉的学科,既涉及数据分析,也涉及设计和编程.而这三大方向之中,每一 ...

  • 《数据可视化基础》冗余编码

    在之前的章节当中,我们已经看到颜色不能总是像我们期望的那样有效地传达信息.如果我们要对很多分组进行着色区分,则会导致由于颜色过多,很难将图中的颜色与图例中的颜色进行匹配的情况.即使我们只需要区分两到三 ...

  • 软件小讲堂 | 二维转三维,巧用GH完成数据可视化处理

    HELLO小伙伴们,又到了每周一次的软件小讲堂. 随着软件的更新,数据处理的门槛也变得越来越低.以往对于建筑师而言困难重重的数据可视化,现在在类似于GH之类的平台上做起来已经变得非常轻松了.但如今相较 ...

  • 数据可视化的 30 个小技巧

    仅做学术分享,如有侵权,联系删除 转载于 :视学算法 来源:DataHunter 优秀的数据可视化图表只是罗列.总结数据吗?当然不是!数据可视化其真正的价值是设计出可以被读者轻松理解的数据展示,因此在 ...

  • 深度盘点 | 史上最全python数据可视化库

    有多少同学和小编一样,学习python的主要目的,是为了实现数据可视化?

  • 这都2021年了,居然还有人不知道什么是数据可视化!?

    什么是数据可视化? 有的人说,数据可视化就是画图,没什么可以研究的价值.小编原本也天真的以为,数据可视化从字面意思上理解就是把数据从冰冷的数字转换成五颜六色的图形,不过就是色彩丰富了一些,看起来可能更 ...

  • 洞见未来|电力可视化运营大脑——BI数据可视化建设方案

    背景介绍 目前数据是电力企业的战略资源,数据可视化分析已经成为电力行业发电运行.故障检修.用电客户活动.燃料供应.发电能力评估.发电报价与交易.预算与计划业务应用.智能分析决策的重要基石.电力企业数据 ...