EChars学习-1

Echarts,编写来自Enterprise Charts,商业级数据图表，是百度的一个开源的数据可视化工具

官网地址：http://echarts.baidu.com/

一、引入Echarts


<!DOCTYPE html>

<html>

<header>

<meta charset="utf-8">

<!-- 引入 ECharts 文件 -->

<script src="echarts.min.js">

</header>

</html>

二、绘制

在绘制前需要准备一个dom容器


<body>

<!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->

<div id="main" style="width: 600px;height:400px;"></div>

</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>ECharts</title>

<!-- 引入 echarts.js -->

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

</head>

<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

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

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

// 指定图表的配置项和数据

var option = {

title: {

text: ‘ECharts 入门示例‘

},

tooltip: {},

legend: {

data:[‘销量‘]

},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: ‘销量‘,

type: ‘bar‘,

data: [5, 20, 36, 10, 10, 20]

}]

};

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

myChart.setOption(option);

</script>

</body>

</html>

这样你的第一个图表就诞生了！

三、绘制地图

上面图表例子是Echarts官网提供的例子，比较简单。下面绘制一个地图 
需要引入三个文件：


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

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

<script src="js/world.js"></script>//官网上下载

Echarts官网提供了两种地图数据类型，一种是js，一种是json。这里先以js引入为例

综合上述：


<!DOCTYPE
html>

<html>

<head>

<meta charset="utf-8">

<title>ECharts</title>

<!-- 引入 echarts.js -->

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

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

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

</head>

<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="main" style="width: 1600px;height:1000px;"></div>

<script type="text/javascript"><!--

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

chart.setOption({

series: [{

type: ‘map‘,

map: ‘world‘

}]

});

</script>

</body>

</html>

四、绘制动态迁移图

同上引入所需js文件


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

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

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

Echarts使用实际就三步

1、基于准备好的dom，初始化echarts实例（初始化）（之前要准备js和容器）

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

2、参数设置，以及数据设置（可以直接从Echarts官网提供的例子中查找）

3、使用echarts实例来使刚指定的配置项和数据显示图表（生效）

chart .setOption(option);

完整代码如下：（上述都是在自己的world上面整理的，希望格式正确啊）


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="js/echarts.min.js"></script>

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

</head>

<body>

<div id="main" style="width:900px;height:666px;  border: 1px solid red;"></div>

<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 BJData = [//从北京出发

[{name:‘北京‘}, {name:‘上海‘,value:95}],

[{name:‘北京‘}, {name:‘广州‘,value:90}],

[{name:‘北京‘}, {name:‘大连‘,value:80}],

[{name:‘北京‘}, {name:‘南宁‘,value:70}],

[{name:‘北京‘}, {name:‘南昌‘,value:60}],

[{name:‘北京‘}, {name:‘拉萨‘,value:50}],

[{name:‘北京‘}, {name:‘长春‘,value:40}],

[{name:‘北京‘}, {name:‘包头‘,value:30}],

[{name:‘北京‘}, {name:‘重庆‘,value:20}],

[{name:‘北京‘}, {name:‘常州‘,value:10}]

];

var SHData = [//从上海出发

[{name:‘上海‘},{name:‘包头‘,value:95}],

[{name:‘上海‘},{name:‘昆明‘,value:90}],

[{name:‘上海‘},{name:‘广州‘,value:80}],

[{name:‘上海‘},{name:‘郑州‘,value:70}],

[{name:‘上海‘},{name:‘长春‘,value:60}],

[{name:‘上海‘},{name:‘重庆‘,value:50}],

[{name:‘上海‘},{name:‘长沙‘,value:40}],

[{name:‘上海‘},{name:‘北京‘,value:30}],

[{name:‘上海‘},{name:‘丹东‘,value:20}],

[{name:‘上海‘},{name:‘大连‘,value:10}]

];

var GZData = [//从广州出发

[{name:‘广州‘},{name:‘福州‘,value:95}],

[{name:‘广州‘},{name:‘太原‘,value:90}],

[{name:‘广州‘},{name:‘长春‘,value:80}],

[{name:‘广州‘},{name:‘重庆‘,value:70}],

[{name:‘广州‘},{name:‘西安‘,value:60}],

[{name:‘广州‘},{name:‘成都‘,value:50}],

[{name:‘广州‘},{name:‘常州‘,value:40}],

[{name:‘广州‘},{name:‘北京‘,value:30}],

[{name:‘广州‘},{name:‘北海‘,value:20}],

[{name:‘广州‘},{name:‘海口‘,value:10}]

];

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‘;

//这个函数用于取出data中所有数据的起点和终点的坐标

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([{

name: dataItem[0].name,

coord: fromCoord

}, {

name: dataItem[1].name,

coord: toCoord

}]);

}

}

return res;

};

var color = [‘#a6c84c‘, ‘#ffa022‘, ‘#46bee9‘];//对应图中三个城市迁徙图的颜色

var series = [];//三个系列图变量，可以push方法将属性添加进series中。

//接下来，先分析第一个系列，即特效点的设置：

[[‘北京‘, BJData], [‘上海‘, SHData], [‘广州‘, GZData]].forEach(function (item, i) {

//分别将上述三个item传入function函数，

//并调用function函数，目的是绘制三个城市的迁徙图，BJData,SHData,GZData数据集请查看附录D

series.push({

name: item[0] + ‘ Top10‘,//系列名称

type: ‘lines‘,//系列使用的图类型

zlevel: 1,//第一层，图表是有分层的，用于更好展示图表

effect: {

show: true,//开启特效，即为图中白色飞点

period: 6,//特效点飞行的时间

trailLength: 0.7,//特效点尾部长度

color: ‘#fff‘,//特效颜色，图中为白色

symbolSize: 3//特效点的大小

},

lineStyle: {

normal: {

color: color[i],//特效路径的颜色，如果width为0,则不显示

width: 0,//路径宽度，0则没有显示画出路径

curveness: 0.2//特效点路径的曲率，值越大，越弯曲

}

},

data: convertData(item[1])//利用函数求出航线起点和终点的坐标，当绘制北京迁徙图时，item[1]即为BJData，

},

//然后分析下第二系列，即飞机飞行路径设置：

{

name: item[0] + ‘ Top10‘,//系列名称

type: ‘lines‘,//特效线图

zlevel: 2,//第二层

effect: {//图中飞机特效的配置

show: true,//显示特效

period: 6,//特效动画的时间

trailLength: 0,// 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长

symbol: planePath,//飞机图形的路径

symbolSize: 15//飞机大小

},

lineStyle: {//飞机航线风格

normal: {

color: color[i],//飞机航线的颜色

width: 1,//飞机航线的宽度

opacity: 0.4,//飞机航线透明度，为0时，则不绘制航线

curveness: 0.2//飞机航线额弯曲程度

}

},

data: convertData(item[1])//数据，即航线的起点和终点的坐标

},

//最后第三个系列为图中涟漪效果的设置，采用带有涟漪特效动画的散点（气泡）图，代码如下：

{

name: item[0] + ‘ Top10‘,//系列名称

type: ‘effectScatter‘,//系列使用图表类型

coordinateSystem: ‘geo‘,//系列使用坐标类型，这里没地图坐标

zlevel: 2,//第二层

rippleEffect: {

brushType: ‘stroke‘//波纹的填充方式，可以设置为’stroke’和‘fill’，’stroke’只是在点外围设置涟漪，’fill’涟漪填充更圆满

},

label: {//设置图标说明文字

normal: {

show: true,

position: ‘right‘,//文字在图标右边

formatter: ‘{b}‘//设置显示的文字，可以设置{a}, {b}，{c}，分别表示系列名，数据名，数据值

}

},

symbolSize: function (val) {

return val[2] / 8;//根据每个节点的值，设置涟漪节点的大小

},

itemStyle: {

normal: {

color: color[i]//设置涟漪节点的颜色

}

},

data: item[1].map(function (dataItem) {//设置数据，即为每个省份的名称+省份坐标+省份的值

return
{

name: dataItem[1].name,

//坐标数据geoCoordMap请查看附录C

value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])

};

})

});

});

option = {

backgroundColor: ‘#404a59‘,

title : {

text: ‘模拟迁徙‘,

subtext: ‘数据纯属虚构‘,

left: ‘center‘,

textStyle : {

color: ‘#fff‘

}

},

tooltip : {

trigger: ‘item‘

},

legend: {

orient: ‘vertical‘,

top: ‘bottom‘,

left: ‘right‘,

data:[‘北京 Top10‘, ‘上海 Top10‘, ‘广州 Top10‘],

textStyle: {

color: ‘#fff‘

},

selectedMode: ‘single‘

},

geo: {

map: ‘china‘,

label: {

emphasis: {

show: false

}

},

roam: true,

itemStyle: {

normal: {

areaColor: ‘#323c48‘,

borderColor: ‘#404a59‘

},

emphasis: {

areaColor: ‘#2a333d‘

}

}

},

series: series

};

//结束

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

myChart.setOption(option);

</script>

</body>

</html>
时间： 2024-11-07 18:50:59

EChars学习-1的相关文章

基于EChars仪表盘创建时钟

一.EChars学习官网:http://echarts.baidu.com/ 二.具体实现js脚本: function clock(id){ // 路径配置 require.config( { paths : { echarts : 'js/build/dist' } }); //画图 require( [ 'echarts', 'echarts/chart/gauge' ],//仪表盘需要的文件 function(ec) { // 基于准备好的dom,初始化echarts图表 var myCh

eChars移动端自适应学习笔记

有时会出现一个图表需要同时在PC.移动端上展现的场景.这需要 ECharts 内部组件随着容器尺寸变化而变化的能力.为了解决这个问题,ECharts 完善了组件的定位设置,并且实现了类似 CSS Media Query 的自适应能力. ECharts组件的定位和布局 大部分『组件』和『系列』会遵循两种定位方式: 一.left/right/top/bottom/width/height 定位方式: 这六个量中,每个量都可以是『绝对值』或者『百分比』或者『位置描述』. 绝对值  : 单位是浏览器像素

寒假学习记录15_Geo学习

因为疫情的信息需要使用中国地图进行展示,因此我对Echars中的Geo进行了学习. 首先要准备好echarts.min.js和china.js这两个js文件,准备好后就可以对data部分进行修改了,通过访问数据库将城市和对应数据填在对应的name和value位置. (爬虫部分回头另写博客) 数据展示代码如下所示: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodi

Vue.js学习笔记：属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

Java多线程学习（吐血超详细总结）

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 目录(?)[-] 一扩展javalangThread类 二实现javalangRunnable接口 三Thread和Runnable的区别 四线程状态转换 五线程调度 六常用函数说明 使用方式 为什么要用join方法 七常见线程名词解释 八线程同步 九线程数据传递 本文主要讲了java中多线程的使用方法.线程同步.线程数据传递.线程状态及相应的一些线程函数用法.概述等. 首先讲一下进程和线程

微信小程序学习总结（2）------- 之for循环，绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习. 先说一下此次项目本人体会较深的几个关键点:微信地图.用户静默授权.用户弹窗授权.微信充值等等. 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:  1. 想必大家的都知道wx:for,如下就不用我啰嗦了: <view class="myNew" wx:for="{{list}}">{{item.title}}<view

【安全牛学习笔记】

弱点扫描 ╋━━━━━━━━━━━━━━━━━━━━╋ ┃发现弱点                                ┃ ┃发现漏洞                                ┃ ┃  基于端口五福扫描结果版本信息(速度慢)┃ ┃  搜索已公开的漏洞数据库(数量大)      ┃ ┃  使用弱点扫描器实现漏洞管理            ┃ ╋━━━━━━━━━━━━━━━━━━━━╋ [email protected]:~# searchsploit Usage:

winform学习日志（二十三）---------------socket（TCP）发送文件

一:由于在上一个随笔的基础之上拓展的所以直接上代码,客户端: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Net.Sockets; using Sys

零基础的人该怎么学习JAVA

对于JAVA有所兴趣但又是零基础的人,该如何学习JAVA呢?对于想要学习开发技术的学子来说找到一个合适自己的培训机构是非常难的事情,在选择的过程中总是 因为这样或那样的问题让你犹豫不决,阻碍你前进的步伐,今天就让小编为您推荐培训机构新起之秀--乐橙谷Java培训机构,助力你成就好未来. 选择java培训就到乐橙谷 北京有什么好的Java培训机构?来乐橙谷北京学Java,零基础走起,乐橙谷Java基础班授课老师经验非常丰富,课程内容安排合理,适合于有一点点Java基础甚至一点都不会Java的同学学