制作可视化必不可少的技术echarts

在echarts制作地图

在vue项目种下载echarts,在其最新版本的过程中，china.json 及word.json两个文件都已经取消，需要的化可以来我主页自取！
1.首先我们需要定义一个容器

<template><div class="mychart" :id="'chart' + _uid"></div>
</template>

2.引入echarts及世界地图的json文件便于我们制作Geo图层

import Echarts from "echarts";
import worldMap from "echarts/map/json/world.json";

3.整体的代码：

<template><div class="mychart" :id="'chart' + _uid"></div>
</template><script>
// import { judge } from 'service/api'
import Echarts from "echarts";
import worldMap from "echarts/map/json/world.json";
import { bigScreen } from "service/api";export default {data() {return {data: [],mychart: {},option: {tooltip: {trigger: "item",},geo: {map: "world",top: "10%",left: "5%",right: "5%",bottom: "10%",label: {emphasis: {show: false,},},aspectScale: 0.75,// zoom: 1,itemStyle: {normal: {areaColor: "#2c6a96",borderColor: "#83cbf8", // '#1E4E8B'borderWidth: 1,},emphasis: {areaColor: "#2c6a96",borderColor: "#83cbf8", // '#1E4E8B'},},},series: [],},geoCoordMap: {// 杭州: [119.5313, 29.8773],// "安哥拉-罗安达": [13.0333333333, -8.083333333],// "澳洲-墨尔本": [144.9755859375, -37.8141237016],// "澳洲-悉尼": [151.28333333333333, -33.916666666666664],// "澳洲-堪培拉": [149.0844726563, -35.3173663292],// "德国-布鲁塞尔": [4.3450927734, 50.8510411297],// "德国-法兰克福": [8.701171875, 50.1346643222],// "德国-柏林": [13.4088134766, 52.5162208639],// "俄罗斯-莫斯科": [37.6391601563, 55.7642131648],// "英国-伦敦": [-0.1318359375, 51.4676969562],// "英国-邓斯特布尔": [-0.4648160934, 52.1371890032],// "法国-巴黎": [2.3510742188, 48.8357974624],// "法国-蒙彼利埃": [3.8616943359, 43.6042618681],// "加拿大-温哥华": [-123.1182861328, 49.2964716027],// "柬埔寨-西哈努克": [103.5210800171, 10.6275412459],// "捷克-塔博尔": [14.6722412109, 49.4073990589],// "捷克-布拉格": [14.4415283203, 50.0747692335],// "马来西亚-甘榜峇鲁": [101.7095374642, 3.1619413302],// "马来西亚-巴生": [101.4546203613, 3.028069379],// "美国-华盛顿": [-77.0251464844, 38.8824811976],// "美国-波特兰": [-122.65960693359997, 45.59190960761732],// "美国-洛杉矶": [-118.2238769531, 34.0344526097],// "美国-纽约": [-76.9921875, 38.6511983323],// "美国-芝加哥": [-87.5830078125, 41.8368278607],// "美国-西雅图": [-122.3327636719, 47.5913464768],// "美国-旧金山": [-122.434387207, 37.7479148249],// "美国-核桃市": [-118.2470297813, 34.0542772204],// "美国-奇诺": [-117.7322387695, 33.9900571345],// "美国-詹姆斯堡": [-74.4395828247, 40.3521695963],// "缅甸-仰光": [96.1976623535, 16.8610624585],// "日本-东京": [139.7570800781, 35.6929946321],// "日本-大阪": [135.4998779297, 34.6874279493],// "韩国-首尔": [126.9895935059, 37.5511101601],// "沙特-达曼": [72.8321456909, 20.3964450705],// "泰国-曼谷": [100.5084228516, 13.7633957796],// "泰国-春武里": [101.0110473633, 13.3388476879],// "泰国-北榄": [100.6114193425, 13.5952693961],// "老挝-万象": [102.6438903809, 17.9774268559],// "越南-胡志明": [106.6223144531, 10.8009326407],// "西班牙-马德里": [-3.7, 40.43333333333333],// "新加坡-新加坡": [103.8647460938, 1.2962761196],// "印度-孟买": [72.85, 18.9333333333],// "印度-新德里": [77.216666666, 28.6166666666],// "埃塞俄比亚-亚的斯亚贝巴": [38.759765625, 9.0044515617],// "荷兰-阿姆斯特丹": [4.8944091797, 52.3722455687],// "荷兰-欧德米尔": [4.6459722519, 52.3875181437],// "荷兰-鹿特丹": [4.4714355469, 51.9103907099],// "伊拉克-巴格达": [44.3627929688, 33.2846199689],// "中国-香港": [114.1968232013, 22.2863306587],},queryForm: {order: "",orderField: "",start: 0,statEndTime: "",statStartTime: "",statTime: "",zoneName: "",},};},methods: {convertData(data) {// console.log(this.geoCoordMap);const res = [];for (let i = 0; i < data.length; i++) {const dataItem = data[i];const fromCoord = this.geoCoordMap[dataItem[0].name]; // 始发地const toCoord = this.geoCoordMap[dataItem[1].name]; // 目的地if (fromCoord && toCoord) {res.push({fromName: dataItem[0].name,toName: dataItem[1].name,coords: [fromCoord, toCoord], // 一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。});}}return res;},setOption() {const HZData = this.data;const series = [];series.push({type: "lines",zlevel: 1,symbol: ["none", "none"],lineStyle: {normal: {width: 3,curveness: 0.4,color: "#5c686f",},},tooltip: {show: false,},data: this.convertData(HZData),},{type: "effectScatter",coordinateSystem: "geo",zlevel: 2,rippleEffect: {brushType: "fill",period: 5,scale: 8,},symbolSize: function (val) {return val[2] / 10; //根据经纬度第二哥值大小动态设置symbolSize},tooltip: {show: false,},itemStyle: {color: (val) => {if (val.name == "杭州") {return "rgba(186,232,255,0.64)";} else {return "rgba(255,52,21,0.50)";}},},data: HZData.map((dataItem) => {return {name: dataItem[1].name, //城市名称value: this.geoCoordMap[dataItem[1].name].concat(80), //城市经纬度,};}),},{type: "effectScatter",coordinateSystem: "geo",zlevel: 4,rippleEffect: { number: 0, period: 0, scale: 1 },symbol: function (val) {if (val[3] !== "杭州") {return "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAASJJREFUOE+lkz8vBUEUxX/nG2iRoJKIUkV4pURCFDoN7etEIzRonkQiUdHyATQoKIV4jfZJVP4UT+sbXJnk7mZ234wtTDU359xfzs69K/55lOo3szYwCyy4/gh0JZ3X/QMAM/sExjLBviSNx1oFYGa7QKfhq/YkHRWeEmBmw0A/aj4FLr3eALYibUTSd6hjwDJw46YPYK4wOfwZmHB9RdJtHXAA7LvhUFKoy2NmST1OMAO8eEcPmJf0E2ozGwKegGnXQ7puJYEbX4EpN10AV35fAzb93pc0OvCIDtgGThqmcCxpJwlwyD2wmIFcS1rN7oEDWsBDAvAGLEl6/xPgkLDKZzVIaL6rg5P/gkPisVW2rzFBYfDZT0pazz1sNkHDJEr5FzjRXBGiqvRcAAAAAElFTkSuQmCC";} else {return "none";}},symbolSize: function (val) {return val[2] / 5;},tooltip: {show: true,position: "top",backgroundColor: "rgba(7,18,32,0.5);",padding: 0,borderWidth: 1,borderColor: "rgba(139,191,242,0.5)",formatter: (val) => {if (val.name == "杭州") {return "";}return `<div style="width: 302px;height: 149px;border-radius: 20px;padding:20px 23px;box-sizing: border-box;"><div>${val.name}</div><div style="margin-top:12px"><div class="bottom"style=" display: flex;justify-content: flex-start;align-items: center;"><div class="left"style="width: 129px;height: 68px;"><img style="width:100%;height:100%" src="${val.value[4].flagUrl}" alt=""></div><div class="right"style="color: #3196fa;display: flex;margin-left:16px;height: 68px;justify-content: space-between;flex-direction: column;font-size: 12px;padding:5px 0"><span>班次号：${val.value[4].model}</span><span>周班次：${val.value[4].flghtNumber}</span><span>航空公司：${val.value[4].airlineCompany}68</span></div></div></div></div>`;},},symbolOffset: [0, -10],symbolKeepAspect: true,data: HZData.map((dataItem) => {return {name: dataItem[1].name,value: this.geoCoordMap[dataItem[1].name].concat(80,dataItem[1].name,dataItem[1].value),};}),});this.option.series = series;},initMap() {Echarts.registerMap("world", worldMap);this.mychart = Echarts.init(document.querySelector("#chart" + this._uid));this.mychart.setOption(this.option);// this.mychart.on("click", { seriesIndex: 2 }, this.handleClick);//绑定事件},handleClick(e) {// console.log(e);},getTable() {bigScreen.queryScreenHzjcgjhxPage(this.queryForm).then((res) => {let geoCoordMap = { 杭州: [119.5313, 29.8773] };// 处理使用的数据let result = res.data.result;this.data = [[{ name: "杭州" }, { name: "杭州" }]];result.forEach((item) => {geoCoordMap[item.destinations] = [Number(item.longitude), Number(item.latitude)];this.data.push([{ name: "杭州" }, { name: item.destinations, value: item }]);});this.geoCoordMap = geoCoordMap;this.setOption();this.initMap();});},},created() {},mounted() {this.getTable();},
};
</script><style lang="less" scoped>
.mychart {width: 100%;height: 100%;
}
</style>

echarts制作航线轨迹原来是这样的相关推荐

Echarts制作态势图、热点图、轨迹图，使用百度底图，地图下钻
记录最近使用echarts制作地图的过程及部分代码: 其中在网络上借鉴了不少优秀的源码,在此感谢他们的开源精神. 先看效果: (一)态势图.热点图.轨迹图及全屏功能全屏效果: (二)改普通地图为百度 ...
使用Echarts制作散点图(Excel导入数据方式)
2019独角兽企业重金招聘Python工程师标准>>> Echarts相当于一款JS插件,可以制作出绚丽多彩的图表,其支持制作的图表类型和可以使用的样式都非常丰富.本文以Echart ...
在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码我们这里写的都是些死的数 ...
使用Echarts制作动态嵌套饼图
笔者最近因为使用Echarts制作报表,参考了官方文档及某些博客,使用过程中有些想法,想将其中的一些记录下来,也希望能帮助到需要的人. 本例以嵌套的饼图为例.嵌套的饼图即为双层饼图,相比普通的饼图多了 ...
echarts嵌套饼图自动动画_使用百度echarts制作可视化大屏——制作一个双层饼图...
使用百度echarts制作可视化大屏--制作一个双层饼图发布时间:2018-06-12 16:24, 浏览次数:745 , 标签: echarts 实现一个两层嵌套的环形图,展示三个分类下各个品牌车 ...
数据可视化：利用Python和Echarts制作“用户消费行为分析”可视化大屏
数据可视化:利用Python和Echarts制作"用户消费行为分析"可视化大屏前言实验目的: 准备工作: 一.创建项目: 二.建立数据库连接获取数据: 三.页面布局: 四.下载 ...
html5基于Echarts制作3D炫酷世界地图地球制作，地图勾起动画，非常炫酷。
❉ html5基于echarts.js制作3D炫酷世界地图地球仪动画 `html5基于echarts.js制作3D炫酷世界地图地球仪动画,业务迁移热点显示动画,地图勾起动画,非常炫酷.ps:涉及跨域, ...
利用Echarts制作地图（一）
Echarts作为一个前端可视化工具,支持地图图表的展示.从本篇开始,将用三篇文章说明如何利用echats制作自定义区域的单图例.多图例及动态加载地图所需数据. Echarts支持 js 格式与 g ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
echarts制作图表同时有3d柱状图与折线图
echarts制作图表同时有3d柱状图与折线图工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...

echarts制作航线轨迹原来是这样的

echarts制作航线轨迹原来是这样的！

制作可视化必不可少的技术echarts

在echarts制作地图

echarts制作航线轨迹原来是这样的相关推荐

最新文章

热门文章