echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图)

最新推荐文章于 2024-05-28 11:11:34 发布

置顶冰糖葫芦五加皮耶

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量5.6k

点赞数 7

分类专栏：绘图文章标签： python

本文链接：https://blog.csdn.net/baidu_41304382/article/details/104293539

版权

绘图专栏收录该内容

4 篇文章 1 订阅

订阅专栏

文末附带github本文所有源代码，以及bmap.js,china.js,echarts.js,echarts-wordcloud.js文件啦

1.柱形图

先来看看效果啦
简单的柱形图啦
重要代码如下所示，必须引入echarts.js文件，之后初始化echarts,最重要的是修改option中的配置项与数据，echarts学习网页，这里面有许多配置项，根据你的需要修改啦

<head>
    <meta charset="UTF-8">
<!-- 这里是标题-->
    <title>柱形图</title>
<!--  一定要  引入echarts.js-->
    <script src="../js/echarts.js"></script>
</head>
<body>
<!--    定义画布-->
    <div id="main" style="height: 400px; width: 600px"></div>
    <script type="text/javascript">
        //进行echrts的初始化，以及定位到画布
        var mychart = echarts.init(document.getElementById("main"));
        //配置项和配置数据
        var option={
            //标题
            title:{
                text:'echarts入门实例'
            },
            //图例
            legend:{
                data:['销量']
            },
            //横轴
            xAxis:{
                data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
            },
            //纵轴
            yAxis:{ },
            //数据
            series:[
                {
                    name:'销量',
                    type:'bar',
                    data:[5,10,36,20,10,10]
                }
            ]
        };
        mychart.setOption(option)
    </script>
</body>

2.折线图+柱形图

先来看看效果啦
折线图+多个柱形图
绘制折线图时只需要将series中每一项的type改为“line”即可，其他与柱形图相同；
鼠标放上去显示文字，需要开启tooltip;绘制多个柱形图时只需要增加legend与series即可
主要代码如下：

var option={
            //标题
            title:{
                text:'折线图',
                subtext:'副标题'
            },
            tooltip:{},
            legend:{
                data:['衬衫','裤子','袜子']
            },
            xAxis:{
                data:['星期一','星期二','星期三','星期四','星期五','星期六','星期天']
            },
            yAxis:{},
            series:[
                {
                    name:'衬衫',
                    type:'bar',
                    data:[5,20,36,70,30,50,100]
                },
                {
                    name:'裤子',
                    type:'bar',
                    data:[6,10,36,20,10,10,80]
                },
                {
                    name:'袜子',
                    type:'line',
                    data:[9,5,10,36,20,10,10]
                }
            ]
        };

3.饼图+南丁格尔图

先来看看效果啦

重要代码：相比bar和line不需要设置x,y坐标（ xAxis，yAxis）；绘制饼图的进阶版南丁格尔图时只需要增加rosetype为radius

//配置项和配置数据
        var option={
            //标题
            title:{
                text:'饼图'
            },
            tooltip:{},
            legend:{
                data:['毛衣','呢子','衬衫','裤子','袜子']
            },
            series:[
                {
                    type:'pie',
                    //半径大小 圆心位置
                    radius:'55%',
                    center:['50%','50%'],
                    data:[
                        {name:'毛衣',value:335},
                        {name:'呢子',value:90},
                        {name:'衬衫',value:450},
                        {name:'裤子',value:200},
                        {name:'袜子',value:50},
                    ],
                      //南丁格尔类型
                      //roseType:'radius'
                }
            ]
        };

4.环形图

先来看看效果啦
环形图
重要代码：

            series:[
                {
                    type:'pie',
                    //半径大小 圆心位置
                    radius:['55%','70%'],
                    //center:['50%','50%'],
                    label:{
                      normal:{
                          //取消原来的显示模式
                          show:false,
                          //在中间显示
                          position:'center'
                      },
                      //高亮扇区
                        emphasis:{
                          show:true,
                          textStyle:{
                              fontSize:'30',
                              fontWeight:'bold'
                          }
                      }
                    },
                    data:[
                        {name:'毛衣',value:335},
                        {name:'呢子',value:90},
                        {name:'衬衫',value:450},
                        {name:'裤子',value:200},
                        {name:'袜子',value:50},
                    ]

5.中国地图散点图

先来看看效果啦
在这里插入图片描述
重要代码：在head里引入china.js,需要输入地区的经纬度，及其地区的名称和地区的数据值；
参考链接：

//将数据拼接起来
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];//经纬度
        if (geoCoord) {
            res.push({
                name: data[i].name,//名称
                value: geoCoord.concat(data[i].value)//经纬度+数据值
            });
        }
    }
    return res;
};
//配置项和配置数据
        var option={
            //标题
            title:{
                text:'中国地图散点图',
                left:'center'
            },
            tooltip:{},
            geo:{
                //定义地图的类型
                map:'china'
            },
            visualMap:{
                type:'continuous',
                min:0,
                max:200,
                calculable: true,
                inRange:{
                    color:[
                        '#50a3ba','#eac736','#d94e5d','#A9D940'
                    ]
                },
                //当鼠标放上去的现实的文本颜色
                textStyle: {
                    color:'#000000'
                },
                left:'right'
            },
            series:[
                {
                    name:'岗位数量',
                    //画地图的类型
                    type:'scatter',
                    //当前类型为geo类型
                    coordinateSystem:'geo',
                    data:convertData(data)
                }
            ]
        };

6.百度地图散点图

先来看看效果啦

这里用到了Bmap-百度地图，需要在百度地图开发平台创建自己的应用，注册登陆后，点击控制台->应用管理->创建应用，如下填写：

返回管理页面，复制AK码，如下引入html头中：

<script src="http://api.map.baidu.com/api?v=2.0&ak=NWj6TxLiZvWMCrlG1SCzyU7bk6rGLkwD"></script>

还需要bmap.js文件，重要代码如下：

option={
        title:{
        text:'全国主要城市空气质量-百度地图',
        subtext:'data from PM2.5.in',
        left:'center'
        },
        tooltip:{},
        bmap:{
            center:[104.114129,37.550339],//打开地图时的定位
            zoom:5,//缩放比例
            roam:false//是否允许自由缩放
        },
        series:[
            {
                name:'PM2.5',
                type:'scatter',
                coordinateSystem: 'bmap',
                data:convertData(data),
                symbolSize:function (val) {
                    return val[2]/10;
                },
                itemStyle:{
                    normal:{
                        color:'purple'
                    }
                }
            },
            {
                name:'top5',//5个标记点显示水纹
                type:'effectScatter',
                coordinateSystem:'bmap',
                data:convertData(data.sort(function (a,b) {
                    return b.value-a.value
                }).slice(0,5)),//取5个数值
                symbolSize:function (val) {
                    return val[2]/10;
                },
                showEffection:'render',//显示水纹
                rippleEffect:{
                    brushType:'stroke'
                },
                itemStyle:{
                    normal:{
                        color:'purple'
                    }
                }
            }
        ]
    };

7.词云图

先来看看效果啦
五角星
通过设置图片base64码，可以设置不同的形状，图标网站搜索图标选择白色下载,可以使用代码将图片转换为base64编码，也可以直接在线转换图片转base64,重要代码如下：

		var jsonlist= [];
        jsonlist.push(
            {
                'name':"花鸟市场",
                "value":1446
            },
            {
                'name':"汽车",
                "value":928
            },
            {
                'name':"我",
                "value":1456
            },
           //如上定义
        );
        //五角星图片
        image="data:image/png;base64,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";
        var maskImage = new Image();
        maskImage.src = image;
        //配置项和配置数据
         var option = {
             title:{
                 text:'词云图',
                 left:'center'
             },
             series:[
                 {
                     maskImage:maskImage,
                     //指定它的类型
                     type:'wordCloud',
                     //设置字符大小范围
                     sizeRange: [6,66],
                     rotationRange: [-45,90],
                     textStyle:{
                         normal:{
                             color:function () {
                                 //随机颜色
                                 return 'rgb('+[
                                     Math.round(Math.random()*160),
                                     Math.round(Math.random()*160),
                                     Math.round(Math.random()*160)
                                 ].join(',')+')';
                             }
                         }
                     },
                     //调用数据
                     data:jsonlist
                 }
             ]
         };
         maskImage.onload = function(){
              //调用设置选项
            mychart.setOption(option)
         } ;

干货来了

https://www.echartsjs.com/zh/index.html 百度echarts学习网站
http://lbs.baidu.com 百度地图开发平台
https://www.iconfont.cn 图标网站
http://tool.chinaz.com/tools/imgtobase 在线图片转base64

bmap echarts-wordcloud china echarts js文件下载链接百度网盘提取码：jsi0

https://github.com/Ccxcui/study_echarts 本博客所有源码
欢迎大家参考指摘！

冰糖葫芦五加皮耶

关注

7
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图)

文末附带github本文所有源代码，以及bmap.js,china.js,echarts.js,echarts-wordcloud.js文件啦1.柱形图先来看看效果啦重要代码如下所示，必须引入echarts.js文件，之后初始化echarts,最终的是修改option中的配置项与数据，echarts学习网页，这里面有许多配置项，根据你的需要修改啦<head> <...
复制链接

扫一扫