echarts迁徙图 vue_【可视化插件】Vue项目中Echarts流向图迁徙图实现
public render() { //图表绘制方法
this.chart.clear();
const isMock = !this.items.length;
const items = isMock ? Visual.mockItems : this.items;
this.container.style.opacity = isMock ? '0.3' : '1';
const options = this.properties;
let planePath = options.effect ? options.symbol : options.symbolStyle;
let departureValue = isMock ? ['北京', '上海', '广州市'] : this.legendData;
let color = isMock ? ['#a6c84c', '#ffa022', '#46bee9'] : options.palette;
var series = [];
items.map((item: any, i: number) => {
if (item.length) {
let j = i % color.length;
series.push({
name: item[0].fromName,
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: options.period,
trailLength: 0.7,
color: color[j],
symbolSize: 4},
lineStyle: {
normal: {
color: color[j],
width: 0.1,
curveness: 0.2 } },
data: item },
{
name: item[0].fromName,
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: options.period,
trailLength: 0,
symbol: planePath,
symbolSize: options.symbolSize },
lineStyle: {
normal: {
color: color[j],
width: 1,
opacity: 0.6,
curveness: 0.2 } },
data: item},
{
name: item[0].fromName,
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke' },
label: {
normal: {
show: true,
position: "right", //显示位置
offset: [5, 0], //偏移设置
formatter: "{b}" //圆环显示文字 },
emphasis: {
show: true } },
symbolSize: options.pointSize,
itemStyle: {
normal: {
color: color[j] } },
data: this.parseData(item) } ); } });
var option = {
tooltip: {
trigger: 'item',
formatter: function (params, ticket, callback) {
if (params.seriesType == "lines") {
return params.data.fromName + " --> " + params.data.toName + "
" + params.data.value;
} else {
return params.name; } } },
legend: {
show: options.showLegend,
orient: 'vertical',
top: 'bottom',
left: 'right',
data: departureValue,
textStyle: {
color: '#fff' },
selectedMode: 'multiple', },
geo: {
map: options.mapName,
label: {
emphasis: {
sfalsehow: true,
color: '#fff' } },
roam: options.roam,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: "125%",
itemStyle: {
normal: {
borderColor: options.borderColor,
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: options.startColor // 0% 处的颜色
}, {
offset: 1,
color: options.endColor // 100% 处的颜色 }], },
shadowColor: options.shadowColor,
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10 },
emphasis: {
areaColor: options.emphasisColor,
borderWidth: 0 } } },
series: series };
this.chart.setOption(option); }
echarts迁徙图 vue_【可视化插件】Vue项目中Echarts流向图迁徙图实现相关推荐
- Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...
- 在vue项目中 使用swiper轮播图的关于 在ios中图片白边闪屏踩坑记录
场景描述: 近日,接到一个需求,改善APP首页的布局,需要在顶部添加一个可滚动的栏目导航,以切换栏目然后切换栏目内容类似于唯品会目前的切换效果.如下图 问题描述: 在切换顶部栏目的时候,下面内容页的b ...
- vue项目中如何引入阿里矢量图
1.首先去阿里矢量图官网 https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&ty ...
- vue项目中 echarts的渐变色的设置
实现效果 2 设置渐变色 areaStyle: {normal: {color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: ...
- Vue 项目中 Swiper(5) 轮播图分页器 swiper-pagination 无法显示问题(解决方案集合)
最近用Vue做项目需要加个轮播效果,安装swiper后,结果分页器死活出不来,但轮播效果和前进后退箭头以及滚动栏都是正常显示的,默认安装的是最新版本swiper@6.4.5,这可把我难住了. < ...
- vue项目中使用echarts实现词云
0.先上效果图 1.安装插件 -- vue项目中 npm install echartsnpm install echarts-wordcloud 2.vue页面中引入组件 <word-clou ...
- 在Vue项目中使用Gojs
文章目录 前言 1. Gojs的安装 2. 在vue项目中的引用 3. js导入 4. 画布初始化 画布基础配置 主画布layout配置 右侧画布配置 5. 连接线的配置 6. 节点的配置 7. 节点 ...
- Antv | G2-Plot图表在vue项目中的使用
什么是G2-Plot G2Plot 是一套简单.易用.并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,"G2Plot"中的 G2 即意指图形语法 (the Gr ...
- 在Vue项目中使用echarts完成迁徙图(Map组件)
在Vue项目中使用echarts完成迁徙图 此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答 代码我放在了gith ...
最新文章
- (零)我为什么要写Linux学习笔记?
- Redhat 5 无法安装elfutils-libelf-devel-0.137问题
- /usr/bin/ld: skipping incompatible /usr/lib/mysql/libmysqlclient.so when searching for -lmysqlclient
- 实例62:python
- linux命令格式与快捷键
- 一次SocketException:Connection reset 异常排查
- 【JavaScript 封装库】BETA 2.0 测试版发布!
- Lady Gaga Feat. Colby O'Donis - Just Dance
- SQL数据分析常用案例总结
- win10 自带计算器删除了怎么办
- linux 安装p7zip 支持rar
- MsDos下的Debug调试器与8080汇编小实验
- 16S扩增子数据提交GSA实操手册—发表文章前必备技能
- 从SNP_VCF文件提取SNV
- 薅当当羊毛的机会又!双!!叒!!!叕!!!来了
- SNF快速开发平台--规则引擎介绍和使用文档
- 【高数复盘】2.1导数概念
- 【计算机网络】中国大学MOOC哈工大国家精品课局域网部分习题
- 27岁,今年研究生上岸,有什么忠告可以给我的?
- PTA - 数据库合集51
热门文章
- (十三)真题模拟【告诉你答案是什么】
- php pdo连接oracle乱码,php pdo oracle中文乱码的快速解决方法
- 使用yarn安装quasar,quasar创建新项目 出错error eslint
- 初二下册计算机考试试题,2017下半年计算机等级考试二级Java模拟试题及答案(18)...
- react组件之间重用状态
- nodejs path.parse()
- ORA-28000: the account is locked 解决方法
- 使用JavaScript解答2018第九届蓝桥杯C/C++省赛A组试题
- 使用OpenSSL为支付宝生成RSA私钥
- 文件特殊权限及facl