有关echarts和pyecharts的一切

最新推荐文章于 2023-03-27 23:41:55 发布

小菜鸡也有大佬梦

最新推荐文章于 2023-03-27 23:41:55 发布

阅读量5.7k

点赞数 4

分类专栏：大数据有关 Echarts数据可视化文章标签：大数据 javascript jquery

本文链接：https://blog.csdn.net/weixin_42981609/article/details/105997783

版权

大数据有关同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Echarts数据可视化

1 篇文章 0 订阅

订阅专栏

一个简单的数据可视化课程设计，因为echarts版本太过于奇怪，导致花费了大量的时间，此处谨记录踩过的坑，希望后来人可以避免这些坑。

Echarts有关

如何把json格式的地图信息转换成Echarts可以使用的js格式？（全网最全答案）

①首先，你要去网站[http://datav.aliyun.com/tools/atlas/](http://datav.aliyun.com/tools/atlas/)找到你想要的世界、国家、省、市、县等对应的json格式地址，这是阿里云的提供的，可以精确到县。这个网址可以提供包含子区域和不包含子区域两种格式数据，根据需求选择即可。
②在本地新建文本文档，然后把下面这些固定代码复制下来，在下边标注的注释处粘贴上你复制的json格式地址，前边那个'china'就是你这个地图的名字，可以随便取，但建议用省/市命名。

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }
	echarts.registerMap('china',// 在这里插入复制的json格式地址)
}));

具体格式就是这个样子
③然后把这个文本文档重命名成china.js类似格式，这个js就可以当成地图用在echarts里边了。

	<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>echarts图形插件使用</title>

</head>

<body>
<div id="main" style="height:800px;"></div>
<script type="text/JavaScript" src="js/echarts.min.js"></script>
<script type="text/JavaScript" src="js/china.js"></script>     //这里的js就是你刚刚创建的js
<script type="text/javascript">
        echarts.registerMap('chinamap', china);//前边的chinamap是你即将在下面引用的名字，后边的china是你在js里边取的名字


        var chart = echarts.init(document.getElementById('main'));
        chart.setOption({
            series: [{
                type: 'map',
                map: 'chinamap'        //这里一定跟上边对上
            }]
        });
</script>
</body>

</html>

④然后就可以尽情的用echarts进行各路骚操作了，就不谈。

如何制作酷炫的关系图

直接上代码，不多逼逼
在HTMl里边还有一个板子，太简单了，就长右边这样

var myChart4 = echarts.init(document.getElementById('echarts4'));
		var myGraphData = [
       { "parentNode":"中心人物", "childNodes":["父亲", "母亲", "爷爷", "弟弟","朋友1","朋友2"]},
        { "parentNode":"父亲", "childNodes":[ "叔叔1", "叔叔2", "叔叔3" ] },
        { "parentNode":"母亲", "childNodes":[ "阿姨1", "阿姨2", "阿姨3" ] },
        { "parentNode":"爷爷", "childNodes":[ "爷爷1", "爷爷2" ] },
        { "parentNode":"弟弟", "childNodes":[ "弟弟1", "弟弟2" ] },
        { "parentNode":"朋友1", "childNodes":[ "朋友的朋友1", "朋友的朋友2" ] },
        { "parentNode":"朋友2", "childNodes":[ "朋友的朋友3", "朋友的朋友4" ] },
        { "parentNode":"叔叔1", "childNodes":[ "小a", "小b" ] },
        { "parentNode":"阿姨1", "childNodes":[ "小c", "小d" ] },
        { "parentNode":"爷爷1", "childNodes":[ "小e", "小f" ] },
    ];
 
function getNodes(parentNode,childNodes,nodes){
    var pnode;
    for(var i=0; i<nodes.length; i++){
        if(parentNode == nodes[i].nodename){
            pnode = nodes[i];
        }
    }
    for(i=0; i<childNodes.length; i++){
        nodes.push({
            nodename : childNodes[i],
            nodelevel: pnode.nodelevel+1,
            parentnode: parentNode,
        });
    }
}
        
function setNodeData(nodes,listdata) {
    var size = 33;
    for(var i=0; i<nodes.length; i++){
        listdata.push({
            category: nodes[i].nodelevel,
            name: nodes[i].nodename,
            symbolSize: size,
            draggable: "true"
        });
    }
}
        
function setLinkData(childList, parentnode, links) {
    for(var i=0; i<childList.length; i++){
        links.push({
            // links根据节点名称建立，只适用于节点名称不一样的情况
            "source": childList[i],
            "target": parentnode,
            lineStyle: {
                normal: {
                    color: 'source',
                }
            }
        });
    }
}    
 
var listdata = [];
var linksdata = []; 
var nodes =[{
        "nodename":"中心人物",
        "nodelevel":0,
        "parentnode":0
    }];
for(var i=0; i < myGraphData.length; i++){
    getNodes(myGraphData[i].parentNode,myGraphData[i].childNodes,nodes);
    setLinkData( myGraphData[i].childNodes, myGraphData[i].parentNode, linksdata);
}
setNodeData(nodes,listdata);  
 
var levels = 0;
var legend_data = [];
var series_categories = [];
var temp = ["一","二","三","四","五"];
for(var i=0; i < nodes.length; i++){
    levels = Math.max(levels, nodes[i].nodelevel);
}
for(var i=0; i<=levels; i++){
   
    legend_data.push({
        name : i===0?'主要':'层级'+temp[i],             
        icon : 'rect'
    });
    
    series_categories.push({
        name : i===0?'主要':'层级'+temp[i],
        symbol : 'rect'
    });
   
}
 
option = {
    title: {
        text: "中心人物的人际关系图",
        top: "top",
        left: "left",
        textStyle: {
            color: '#292421'
        }
    },
    tooltip: {
        formatter: '{b}'
    },
    backgroundColor: '#FFFFFF',
    legend: {
        show : true,
        data : legend_data,
        textStyle: {
            color: '#292421'
        },
        icon: 'circle',
        type: 'scroll',
        orient: 'horizontal',
        left: 10,
        top: 20,
        bottom: 20,
        itemWidth: 10,
        itemHeight: 10
    },
    animationDuration: 0,
    animationEasingUpdate: 'quinticInOut',
    series: [{
        name: '关系图',
        type: 'graph',
        layout: 'force',
        force: {
            repulsion: 300,
            gravity: 0.1,
            edgeLength: 15,
            layoutAnimation: true,
        },
        data: listdata,
        links: linksdata,
        categories: series_categories,
        roam: true,
        label: {
            normal: {
                show: true,
                position: 'bottom',
                formatter: '{b}',
                fontSize: 10,
                fontStyle: '600',
            }
        },
        lineStyle: {
            normal: {
                opacity: 0.9,
                width: 0.5,
                curveness: 0
            }
        }
    }]
};
myChart4.setOption(option);

可以无限套娃扩展！

Pyecharts有关

1.如何做酷炫的动态轨迹地图

用echarts自然也可以做，但那不是一般的麻烦，此处介绍一种非常好用的pyecharts做动态轨迹图的方法

# 地理位置图
# 这里先经度后纬度，定义各个点坐标
from pyecharts import GeoLines, Style
#注意：此处用的pyecharts版本应该为0.5.11，太新的不能使用
geo_cities_coords = {'山东理工大学': [118.00032616653439, 36.81111111892739],
                     '烟台': [121.26757, 37.49794],
                     '青岛': [120.39629, 36.30744],
                     '西安': [108.93425, 34.23053],
                     '南京': [118.8921, 31.32751],
                     '昆明': [102.82147, 24.88554],
                     '巴彦淖尔':[107.38683,40.76645],
                     '克拉玛依':[85.13208,45.68734],
                     '拉萨':[91.13775,29.65262]
                     }

style = Style(
    title_color="#fff",
    title_pos="center",
    width=1200,
    height=600,
    background_color="#404a59",
)

style_geolines = style.add(is_label_show=True,
                      line_curve=0.3,
                      line_opacity=0.6,
                      geo_effect_symbol='plane',
                      geo_effect_symbolsize=10,
                      geo_effect_color='#7FFFD4',
                      geo_effect_traillength=0.1,
                      label_color=['#FFA500', '#FFF68F'],
                      border_color='#97FFFF',
                      geo_normal_color='#36648B',
                      label_formatter="{b}",
                      is_legend_show=True,
                      legend_pos = 'left',
                      legend_selectdmode = 'single')

dataline1 = [
            ["山东理工大学", "西安"],
            ["山东理工大学", "南京"],
            ["山东理工大学", "拉萨"],
            ["山东理工大学", "巴彦淖尔"],
            ["山东理工大学", "昆明"],
            ]

dataline2 = [
            ["西安", "山东理工大学"],
            ["拉萨", "山东理工大学"],
            ["克拉玛依", "山东理工大学"],
            ["巴彦淖尔", "山东理工大学"],
            ["昆明", "山东理工大学"],
            ]

geolines = GeoLines("我的轨迹图", **style.init_style)
geolines.add("去程", dataline1,maptype='china',geo_cities_coords=geo_cities_coords,**style_geolines)
geolines.add('返程',dataline2,maptype='china',geo_cities_coords=geo_cities_coords,**style_geolines)
geolines.render("C:/Users/myself/Desktop/轨迹图.html")

效果如下
动态图片，小飞机到处飞，非常的酷炫

一定要注意版本的问题，我当时找了好久才找到这个可以使用的版本，最新版是一定不行的！！

2.如何制作酷炫的词云图

from pyecharts import options as opts
from pyecharts.charts import WordCloud
from pyecharts.globals import SymbolType
#词云图
#注意：词云图需要pyecharts版本不能太低，0.5.11已经不能用了，要换成1.7.x才可以

words = [
    ("林俊杰", 10000),
    ("Micheal Jackson", 6273),     #注意：名字太长将会导致无法使用，就像此处的MJ并没有在词云图显示出来
    ("IU", 6181),
    ("BigBang", 5282),
    ("The Beatles", 4765),
    ("Maroon5", 4386),
    ("Bruno Mars", 3055),
    ("Charlie Puth", 2467),
    ("Justin Bieber", 2244),
    ("周杰伦", 1868),
    ("张杰", 1484),
    ("薛之谦", 1112),
    ("李荣浩", 865),
    ("陈奕迅", 847),
    ("王力宏", 582),
    ("五月天", 555),
    ("许嵩", 550),
    ("Taylor Swift", 462),
    ("毛不易", 366),
    ("刘德华", 360),
]
c = (
    WordCloud()
    .add("", words, word_size_range=[20, 100], shape=SymbolType.DIAMOND)
    .set_global_opts(title_opts=opts.TitleOpts(title="最喜欢的歌手"))
    .render("C:/Users/myself/Desktop/词云图.html")
)

效果如下
背景颜色是我自己在div里加的，这里默认是白色

一定要注意版本的问题，这个的pyecharts版本是1.7.x，刚刚那个版本是不行的（无奈）！！

先记录到这里了，总起来说可视化还是比较简单的。

小菜鸡也有大佬梦

关注

4
点赞
踩
39

收藏

觉得还不错? 一键收藏
1
评论
有关echarts和pyecharts的一切

一个简单的数据可视化课程设计，因为echarts版本太过于奇怪，导致花费了大量的时间，此处谨记录踩过的坑，希望后来人可以避免这些坑。Echarts有关如何把json格式的地图信息转换成Echarts可以使用的js格式？（全网最全答案）①首先，你要去网站[http://datav.aliyun.com/tools/atlas/](http://datav.aliyun.com/tools/...
复制链接

扫一扫