echart 世界地图发光_使用echart.js来绘制世界地图
可视化框架echart
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
它提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。
编辑器
word其实就是编辑器,ppt也是,不同的编辑器可以产生不同类型的文件。在这里,我们需要的是产生网页文件的编辑器,即我们需要产生.html后缀的文件,所以推荐一个轻量级编辑器Sublime,http://www.sublimetext.com/。根据你的电脑系统来选择相应的安装包安装,具体使用方法可以参考官网的教程。
框架的使用方法
首先要明确的是,我们需要的插图是由网页的形式在浏览器中呈现的,所以需要在编辑器中编写代码,保存成html文件,接着在浏览器中打开。幸运的是,框架已经为我们写好了大多数生成图表的代码,我们只需要修改其中的设置并读入我们的数据,就可以轻松制作出新颖又好看的图表。下面就用世界地图和饼状图来说明该框架的使用方法
上图是最终的效果图,制作该图片分为两个步骤:
使用echart.js生成世界地图和饼状图
世界地图:
Awesome-pyecharts
// 所有的脚本代码都写在script标签里
var chart_container = echarts.init(
document.getElementById('container'), 'white', {renderer: 'canvas'});
// var option代表定义一个名为option的变量,后面花括号里的代表我们需要作图的参数设置
var option_container = {
// 默认的颜色数组 (如果不明确设置每个数据项的颜色,则会采用默认的数组
// 此处的颜色为十六进制表示,也可以使用rgb来表示。简单地理解就是一串字符就代表一个颜色,挑选喜欢的颜色可以自行搜索颜色
"color": ["#ac6767","#1d953f","#6950a1","#918597"],
"series": [
{
// 图标类型为 地图
"type": "map",
"name": "test",
"label": {
"show": false,
"position": "top",
"margin": 8
},
"mapType": "world", // 地图类型为 世界地图
// data里的每一个{}中,是一项数据整体,标明了该项数据的名称,值,以及颜色等参数。注意:此处的字符串需要加双引号""(输入法切换至英文状态)
"data": [
{
// ItemStyle 中设置每一个数据项的颜色
"name": "United States", "value": 43,
'itemStyle':{'color':"#c23531"}
},
{
"name": "Japan","value": 17, // 注意项与项之间的逗号
'itemStyle':{'color':"#CD8500"}
},
{
"name": "France","value": 7,
'itemStyle':{'color':"#EE2C2C"}
},
{
"name": "Italy","value": 6,
'itemStyle':{'color':"#918597"}
},
{
"name": "Canada","value": 5,
'itemStyle':{'color':"#bda29a"}
},
{
"name": "United Kingdom","value": 4,
'itemStyle':{'color':"#6950a1"}
},
{
"name": "Spain","value": 4,
'itemStyle':{'color':"#1d953f"}
},
{
"name": "Holland","value": 4,
'itemStyle':{'color':"#2f4554"}
},
{
"name": "Belgium","value": 3,
'itemStyle':{'color':"#EEAD0E"}
}
, {
"name": "Germany","value": 2,
'itemStyle':{'color':"#607B8B"}
},
{
"name": "Austria","value": 2,
'itemStyle':{'color':"#5CACEE"}
},
{
"name": "Switzerland","value": 1,
'itemStyle':{'color':"#4EEE94"}
},
{
"name": "Poland","value": 1,
'itemStyle':{'color':"#8DEEEE"}
},
{
"name": "Chile","value": 1,
'itemStyle':{'color':"#B23AEE"}
},
],
"roam": true,
"zoom": 1,
// 去除各个国家上的小红点
"showLegendSymbol": false,
}
],
// 鼠标悬浮,单击产生的效果(在网页上可以动态显示)
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"textStyle": {
"fontSize": 14
},
"borderWidth": 0
}
};
chart_container.setOption(option_container);
饼状图代码:
Awesome-pyecharts
var chart_container = echarts.init(
document.getElementById('container'), 'white', {renderer: 'canvas'});
var option_container = {
title: {
text: 'No. of papers',
left: 'center'
},
legend: {
orient: 'vertical',
left: 'left',
// 图例数据
data: ['United States', 'Japan', 'France', 'Italy', 'Canada', 'England', 'Spain', 'Holland', 'Belgium', 'Germany', 'Austria', 'Switzerland', 'Poland', 'Chile'],
// 设置图例的文字样式
textStyle:{
fontWeight:'bold', // 字型粗细
fontSize:'20', // 文字大小
fontFamily:'Times New Roman' //字体
}
},
series: [
{
name: '',
type: 'pie', // 图的类型为饼图
radius: '55%', // 饼图半径
clockwise:true, // 顺时针排列各项数据
center: ['50%', '60%'], //饼图的中心坐标
// 饼图中数据项标签设置
label:{
show:true,
position:'outside',
// 格式设置 详细请看:www.echartsjs.com/zh/option.html#series-pie.label.formatter
formatter: '{a} {b} : {c} ({d}%)',
fontWeight:'bold',
fontSize:'20',
fontFamily:'Times New Roman'
},
// ItemStyle 中设置每一个数据项的颜色
data: [
{value: 43, name: 'United States',itemStyle:{color:'#c23531'}},
{value: 17, name: 'Japan',itemStyle:{color:'#CD8500'}},
{value: 7, name: 'France',itemStyle:{color:'#EE2C2C'}},
{value: 6, name: 'Italy',itemStyle:{color:'#918597'}},
{value: 5, name: 'Canada',itemStyle:{color:'#bda29a'}},
{value: 4, name: 'England',itemStyle:{color:'#6950a1'}},
{value: 4, name: 'Spain',itemStyle:{color:'#1d953f'}},
{value: 4, name: 'Holland',itemStyle:{color:'#2f4554'}},
{value: 3, name: 'Belgium',itemStyle:{color:'#EEAD0E'}},
{value: 2, name: 'Germany',itemStyle:{color:'#607B8B'}},
{value: 2, name: 'Austria',itemStyle:{color:'#5CACEE'}},
{value: 1, name: 'Switzerland',itemStyle:{color:'#4EEE94'}},
{value: 1, name: 'Poland',itemStyle:{color:'#8DEEEE'}},
{value: 1, name: 'Chile',itemStyle:{color:'#B23AEE'}},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chart_container.setOption(option_container);
接下来的步骤与上面的世界地图操作相同,最后保存饼状图片。
将世界地图和饼状图拼接为一张图片
该步骤使用了ps,具体步骤是:
此处宽度和高度可以自定义,一般一开始可以设置大一点,到后面生成图片之前进行裁剪
接着把两张图片拖入画布中,调整大小与位置,再将两个图层栅格化,最后文件另存为.jpg文件,整个过程结束。
echart 世界地图发光_使用echart.js来绘制世界地图相关推荐
- echart仪表盘旋转_使用echart仪表盘
温度仪表盘 window.οnlοad=function(){varmyChart=echarts.init(document.getElementById('temperature')); opti ...
- Vue3.x使用Echarts绘制世界地图并进行定点
Vue3.x使用Echarts绘制世界地图并进行定点 一.需求 绘制世界地图并根据返回经纬度数据进行定点 将定点数据展示在世界地图内 二.解决 绘制世界地图,利用Echarts图表组件时间,需要世界地 ...
- vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿 关注我们,一起学习进步 基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
- Vue Echarts绘制世界地图
1.绘制世界地图如下: 2,开始绘制地图 //安装Echarts npm install echarts --save 3.在Main.js中引入word.js世界地图 import '../node ...
- 【前端小技能】vue + highcharts 绘制世界地图及各个国家的地图
项目用的是vue,工作需求是:绘制世界地图,然后通过世界地图点击可以跳转到各个国家的地图,之前只单独做过世界地图+中国地图,查询资料了解到了highCharts-vue,让我们开始吧. 在vue项目基 ...
- Fabric.js 自由绘制椭圆
theme: smartblue 持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第2天,点击查看活动详情 本文简介 点赞 + 关注 + 收藏 = 学会了 本文讲解在 Fabric ...
- PHP绘制99的棋盘,JS canvas绘制五子棋的棋盘
本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow ...
- 使用matlab绘制世界地图并根据经纬度绘制点位(附m_map的下载与安装说明)
文章目录 1.worldmap & geoshow 2.m_map工具箱 3.根据经纬度在世界地图上绘制点位 使用matlab绘制世界地图有两种方法(自己使用过的,可能有别的我不了解的方法): ...
- matlab绘制世界地图代码
matlab绘制世界地图 自我认为matlab画世界地图不好看,还是pyhon画的好看 第一张图 代码如下: 这里是引用 %% clear;clc;close all load geoid % Cre ...
- python对数据集处理,绘制世界地图
数据集一般是 json or csv 格式进行存储的. 本文绘制世界人口地图的数据已上传,或在http://data.okfn.org/ 进行下载. 大致如下: 对数据如何处理呢?先是需要读取文件,然 ...
最新文章
- 适用于0基础小伙伴的HTML知识点总结 先到先得哟
- XML简介及基本语法
- Java黑皮书课后题第9章:*9.3(使用Date类)编写程序创建一个Date对象,设置它的流逝时间分别为...,然后使用toString()方法分别显示上述日期
- pragma pack(1) and #pragma pack(push,1)
- jQuery中 index() 方法的使用
- git command not found
- spring作用域单例和global_面试必备 | 69道Spring面试题
- Android 意图和意图过滤器(二)
- mysql通过centos本地命令行还原数据库出现乱码问题
- adb ps shell 查看进程_Appium学废系列(三) adb调试桥命令
- 云网络被广泛应用 企业SaaS选型面临五大安全问题
- 啊哈算法—解救小哈(深度优先搜索)
- 微信小程序源码获取(附工具的下载)
- 联想微型计算机怎么拆开图解,Lenovo(Ideapad)笔记本如何拆卸及安装电池
- 微信服务器小程序后台,微信小程序调用后台service教程详解
- 数学模板-BSGSEXBSGS
- EVE模拟器的使用-带图超详细(学网络用)
- 样本量重要,还是测序深度重要?
- 反问疑问_反问、疑问还是设问?
- iterative-mergesort