echarts做飞线图

先上图,要不感觉没有说服力:

飞线图应该是大屏中很常见的一种了,通常你可以很轻易的用datav做一个飞线图,而且datav做的大屏逼格真的很高,本身也是开源免费的项目,开箱即用,上手简单……行了回归正题,我们使用echarts自己配置一个飞线图。当然echarts配置起来也不复杂,只要查看下面对应几个属性的配置就ok了

  • geo
  • serise 里的effectScatter
  • serise 里的lines

  三个配置,geo画地图,effectScatter在地图上画散点图,lines画线集,熟悉echarts配置项的看到这里基本就不用看了,自己看下配置文档马上就能撸一个出来,接下来我们按部就班把上面那个例子撸出来。

1、基础环境准备

  

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>飞线图</title>
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.js"></script>
    <style>
        html{
            height: 100%;
        }
        body{
            height: 100%;
            margin: 0;
            padding: 0;
            background-color:#2F4056;
        }
    </style>
</head>
<body>
<div id="chart-box" style="width:100%; height:100%;"></div>
    <script type="text/javascript">
        const chart = echarts.init(document.getElementById(‘chart-box‘));

        const xhr = new XMLHttpRequest();
        xhr.open(‘get‘,‘https://geo.datav.aliyun.com/areas/bound/530000_full.json‘,true)
        xhr.send(null)
        xhr.onreadystatechange = () => {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                const data = JSON.parse(xhr.responseText);

            } else {
                alert(xhr.status);
            }
        }
    </script>
</body>

这里为了简便处理,直接引用cdn上的echarts和datav官方的地图json文件,当然地图json文件也可以从http://geojson.io/#map=12/30.2275/120.1777获得;

好了,上面代码已经初始化了chart容器,然后请求获取了云南省地图json数据

2、画地图

          echarts.registerMap(‘yns‘, data);
            const option ={
                title: {
                    text: ‘云南省‘,
                },
                geo: {
                    map: ‘yns‘,
                    zlevel: 10,
                    show:true,
                    layoutCenter: [‘50%‘, ‘50%‘],
                    roam: false,
                    layoutSize: "90%",
                    zoom: 1,
                    label: {
                        normal: {
                            show: true,
                            textStyle:{
                                fontSize:12,
                                color: ‘#43D0D6‘
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: ‘#062031‘,
                            borderWidth: 1.1,
                            borderColor: ‘#43D0D6‘
                        }
                    },
                    emphasis: {
                            areaColor: ‘#FFB800‘,
                            label:{
                                show:false
                            }
                        }
                }
            }
            chart.setOption(option);

好了,这个geo配置已经能画出一个完整的云南地图了,这里因为要在地图上画线集和散点,所画地图要用geo而不是serise的map

3、配置散点和线集,具体的配置项的含义请参考echarts官网,下面附上完整代码,此代码直接复制粘在html,在有网络的环境下打开就能运行

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>飞线图</title>
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.js"></script>
    <style>
        html{
            height: 100%;
        }
        body{
            height: 100%;
            margin: 0;
            padding: 0;
            background-color:#2F4056;
        }
    </style>
</head>
<body>
<div id="chart-box" style="width:100%; height:100%;"></div>
    <script type="text/javascript">
        const chart = echarts.init(document.getElementById(‘chart-box‘));

        const xhr = new XMLHttpRequest();
        xhr.open(‘get‘,‘https://geo.datav.aliyun.com/areas/bound/530000_full.json‘,true)
        xhr.send(null)
        xhr.onreadystatechange = () => {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                const data = JSON.parse(xhr.responseText);
                  console.log(Object.prototype.toString(data))
                const coord = data.features.map(val => {
                return {
                    name:val.properties.name,
                    value:val.properties.center
                }
            })
            const lines_coord = [];
            coord.forEach((v,index)=> {
                index > 0 && lines_coord.push({
                    coords:[v.value,coord[0].value]
                })
            })
            //地市取简称
            data.features.forEach(v => {
                v.properties.name = v.properties.name.indexOf(‘版纳‘)>-1 ?v.properties.name.substr(0,4) : v.properties.name.substr(0,2);
            })
            echarts.registerMap(‘yns‘, data);
            const option ={
                title: {
                    text: ‘云南省‘,
                },
                geo: {
                    map: ‘yns‘,
                    zlevel: 10,
                    show:true,
                    layoutCenter: [‘50%‘, ‘50%‘],
                    roam: false,
                    layoutSize: "90%",
                    zoom: 1,
                    label: {
                        normal: {
                            show: true,
                            textStyle:{
                                fontSize:12,
                                color: ‘#43D0D6‘
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: ‘#062031‘,
                            borderWidth: 1.1,
                            borderColor: ‘#43D0D6‘
                        }
                    },
                    emphasis: {
                            areaColor: ‘#FFB800‘,
                            label:{
                                show:false
                            }
                        }
                },
                series: [
                    {
                        type:‘effectScatter‘,
                        coordinateSystem: ‘geo‘,
                        zlevel: 15,
                        symbolSize:8,
                        rippleEffect: {
                            period: 4, brushType: ‘stroke‘, scale: 4
                        },
                        itemStyle:{
                            color:‘#FFB800‘,
                            opacity:1
                        },
                        data:coord.slice(1)
                    },
                    {
                        type:‘effectScatter‘,
                        coordinateSystem: ‘geo‘,
                        zlevel: 15,
                        symbolSize:12,
                        rippleEffect: {
                            period: 6, brushType: ‘stroke‘, scale: 8
                        },
                        itemStyle:{
                            color:‘#FF5722‘,
                            opacity:1
                        },
                        data:coord.slice(0,1)
                    },
                    {
                        type:‘lines‘,
                        coordinateSystem:‘geo‘,
                        zlevel: 15,

                        effect: {
                            show: true, period: 5, trailLength: 0, symbol: ‘arrow‘,  color:‘#01AAED‘,symbolSize: 8,
                        },
                        lineStyle: {
                            normal: {width: 1.2, opacity: 0.6, curveness: 0.2, color: ‘#FFB800‘}
                        },
                        data:lines_coord
                    }

                ]
            }
            chart.setOption(option);
            chart.on(‘click‘, function (params) {
                console.log(params);
            });
            } else {
                alert(xhr.status);
            }
        }
    </script>
</body>

原文地址:https://www.cnblogs.com/yifeng555/p/12326507.html

时间: 2024-10-19 15:11:53

echarts做飞线图的相关文章

用Python做股票市场数据分析—做K线图

由于本科在校期间身边有许多朋友是金融专业的,他们时长在我耳边谈起股票情况,受他们影响,耳濡目染地对证券时长有了兴趣.毕业前几个月找实习单位时,又机缘巧合地在这方面工作了一段时间,学习了证券交易的各种理论(道氏理论.日本蜡烛图技术.波浪理论等),虽然后期转行做了本专业工作(数据挖掘),但对证券交易这块一直在关注.闲来无事就用Python来实现了一下蜡烛图,话不多说,直接上代码: # 导入需要的包和模块 import datetime import pandas as pd import tusha

echarts画k线图

var charset = echarts.init(document.getElementById("k_line")) $.get(k_line.url_A).done(function (info) { var rawData = info.Data.History; var single = info.Data.Signal; var single_ = []; var arr = []; for (var i = 0; i < single.length; i++) {

使用ECharts画K线图

需引入echarts.js插件,开发环境建议选择源代码版本,该版本包含了常见的警告和错误提示.下载地址 http://echarts.baidu.com/download.html 下面是代码,注释很清楚,主要是js代码,可根据项目进行增删!配置项说明: http://echarts.baidu.com/option.html#title <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g

vue项目中echarts实现K线图

背景介绍: vue项目,区块链,需要写比特币和其他币种涨幅的K线图 一.安装依赖 npm install echarts -S 二.引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts 三.html 四.初始化echarts 以上配置项option直接从echarts官网复制即可 五.调用初始化echarts函数 致此,静态的K线图已经形成了,在这个项目中,我们需要每0.5s就向后台发请求, 请求K线数据,由于请求数据

功能分解——Android下画分时图与k线图有感

最近工作极度繁忙,已经好久没有更新博客了,总感觉要是再不抽空总结总结点东西,分分钟就会被懒惰的状态给打到了.同时也希望同学们谨记,如果你已经决定要坚持某些正确的东西,比如背完某章单词,看一完本书抑或是跑完多少公里等等,都要坚持下去,不要轻易被自己的懒惰与懈怠打败…… 今天要讲的是关于怎么解决某些砰然大物般的问题,我回想了一下过去遇到的所有难题,都可以划分成为一个个微不足道的小问题.于是想起了管理学里面有关“拆分”的内容,就是任何复杂的东西都可以拆分成一个个简单得任何人都可以做的地步. 想到这些问

股票K线图-JfreeChart版

http://blog.csdn.net/ami121/article/details/3953272 股票K线图-JfreeChart版 标签: jfreechartpropertiesappletdatetabledataset 2009-03-03 16:00 9378人阅读 评论(8) 收藏 举报 分类: jfreechart(7) 股票的K线图是所有Chart图中最复杂的一种,把一个K线图拆分开来我们可以发现,K线图的上半截实际上是由阴阳线(阴阳线可以表示开盘价,收盘价,最高价,最低价

如何看K线图基础知识

在日K线图中一般白线.黄线.紫线.绿线依次分别表示:5.10.20.60日移动平均线,但这并不是固定的,会根据设置的不同而不同,比如你也可以在系统里把它们设为5.15.30.60均线. 你看K线图的上方有黄色PMA5=几的字样,就是五日均线等于几的意思.其他的有紫色的10日均线PMA10=什么的.设定的话双击数字就行!数字是几就是几日均线,颜色和线的颜色一样! 那是移动平均线,在日K线图中一般白线.黄线.紫线.绿线依次分别表示:5.10.20.60日移动平均线,但这并不是固定的,会根据设置的不同

全面总结:matlab怎么做漂亮的图

源地址:http://blog.csdn.net/ccxcau/article/details/7362764 MATLAB受到控制界广泛接受的一个重要原因是因为它提供了方便的绘图功能.本章主要介绍2维图形对象的生成函数及图形控制函数的使用方法,还将简单地介绍一 些图形的修饰与标注函数及操作和控制MATLAB各种图形对象的方法. 第一节 图形窗口与坐标系 一.图形窗口 1.MATLAB在图形窗口中绘制或输出图形,因此图形窗口就像一张绘图纸. 2.在MATLAB下,每一个图形窗口有唯一的一个序号h

百度推出的echarts,制表折线图柱状图饼图等的超级工具

一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts的简介: ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRen