ECharts数据可视化项目【11】

最新推荐文章于 2024-04-26 09:38:30 发布
最新推荐文章于 2024-04-26 09:38:30 发布
阅读量326 收藏 3
点赞数
分类专栏： Echarts数据可视化项目 文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40992225/article/details/126718852
版权

Echarts-社区介绍

社区就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方。

在这里插入图片描述

Echarts社区已停止运营，下面存在开源网站
第一个：www.isqqw.com/#/homepage，多个分类， 可在线调试和切换版本。
第二个：http://www.ppchart.com 多个分类，可在线调试。

新增一个网址，跟之前开源社区网址很像，但是不确定是否是同一个，功能很全：www.makeapie.cn/echarts

  • 在这里可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。

Echarts-map使用（扩展）

参考社区的例子：https://gallery.echarts.apache.org.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)(该链接已经进不去，详情请参见代码)

实现步骤：

  • 第一需要下载china.js提供中国地图的js文件
  • 使用社区提供的配置即可。

需要修改：

  • 去掉标题组件
  • 去掉背景颜色
  • 修改地图省份背景 #142957 areaColor 里面做修改
  • 地图放大通过 zoom 设置为1.2即可
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: false,
      itemStyle: {
        normal: {
          areaColor: '#142957',
          borderColor: '#0692a4'
        },
        emphasis: {
          areaColor: '#0b1c2d'
        }
      }
    },

总结：这例子是扩展案例，大家以后可以多看看社区里面的案例。
完整代码如下：

(function() {
    var myChart = echarts.init(document.querySelector(".map .chart"));
    var geoCoordMap = {
        '上海': [121.4648, 31.2891],
        '东莞': [113.8953, 22.901],
        '东营': [118.7073, 37.5513],
        '中山': [113.4229, 22.478],
        '临汾': [111.4783, 36.1615],
        '临沂': [118.3118, 35.2936],
        '丹东': [124.541, 40.4242],
        '丽水': [119.5642, 28.1854],
        '乌鲁木齐': [87.9236, 43.5883],
        '佛山': [112.8955, 23.1097],
        '保定': [115.0488, 39.0948],
        '兰州': [103.5901, 36.3043],
        '包头': [110.3467, 41.4899],
        '北京': [116.4551, 40.2539],
        '北海': [109.314, 21.6211],
        '南京': [118.8062, 31.9208],
        '南宁': [108.479, 23.1152],
        '南昌': [116.0046, 28.6633],
        '南通': [121.1023, 32.1625],
        '厦门': [118.1689, 24.6478],
        '台州': [121.1353, 28.6688],
        '合肥': [117.29, 32.0581],
        '呼和浩特': [111.4124, 40.4901],
        '咸阳': [108.4131, 34.8706],
        '哈尔滨': [127.9688, 45.368],
        '唐山': [118.4766, 39.6826],
        '嘉兴': [120.9155, 30.6354],
        '大同': [113.7854, 39.8035],
        '大连': [122.2229, 39.4409],
        '天津': [117.4219, 39.4189],
        '太原': [112.3352, 37.9413],
        '威海': [121.9482, 37.1393],
        '宁波': [121.5967, 29.6466],
        '宝鸡': [107.1826, 34.3433],
        '宿迁': [118.5535, 33.7775],
        '常州': [119.4543, 31.5582],
        '广州': [113.5107, 23.2196],
        '廊坊': [116.521, 39.0509],
        '延安': [109.1052, 36.4252],
        '张家口': [115.1477, 40.8527],
        '徐州': [117.5208, 34.3268],
        '德州': [116.6858, 37.2107],
        '惠州': [114.6204, 23.1647],
        '成都': [103.9526, 30.7617],
        '扬州': [119.4653, 32.8162],
        '承德': [117.5757, 41.4075],
        '拉萨': [91.1865, 30.1465],
        '无锡': [120.3442, 31.5527],
        '日照': [119.2786, 35.5023],
        '昆明': [102.9199, 25.4663],
        '杭州': [119.5313, 29.8773],
        '枣庄': [117.323, 34.8926],
        '柳州': [109.3799, 24.9774],
        '株洲': [113.5327, 27.0319],
        '武汉': [114.3896, 30.6628],
        '汕头': [117.1692, 23.3405],
        '江门': [112.6318, 22.1484],
        '沈阳': [123.1238, 42.1216],
        '沧州': [116.8286, 38.2104],
        '河源': [114.917, 23.9722],
        '泉州': [118.3228, 25.1147],
        '泰安': [117.0264, 36.0516],
        '泰州': [120.0586, 32.5525],
        '济南': [117.1582, 36.8701],
        '济宁': [116.8286, 35.3375],
        '海口': [110.3893, 19.8516],
        '淄博': [118.0371, 36.6064],
        '淮安': [118.927, 33.4039],
        '深圳': [114.5435, 22.5439],
        '清远': [112.9175, 24.3292],
        '温州': [120.498, 27.8119],
        '渭南': [109.7864, 35.0299],
        '湖州': [119.8608, 30.7782],
        '湘潭': [112.5439, 27.7075],
        '滨州': [117.8174, 37.4963],
        '潍坊': [119.0918, 36.524],
        '烟台': [120.7397, 37.5128],
        '玉溪': [101.9312, 23.8898],
        '珠海': [113.7305, 22.1155],
        '盐城': [120.2234, 33.5577],
        '盘锦': [121.9482, 41.0449],
        '石家庄': [114.4995, 38.1006],
        '福州': [119.4543, 25.9222],
        '秦皇岛': [119.2126, 40.0232],
        '绍兴': [120.564, 29.7565],
        '聊城': [115.9167, 36.4032],
        '肇庆': [112.1265, 23.5822],
        '舟山': [122.2559, 30.2234],
        '苏州': [120.6519, 31.3989],
        '莱芜': [117.6526, 36.2714],
        '菏泽': [115.6201, 35.2057],
        '营口': [122.4316, 40.4297],
        '葫芦岛': [120.1575, 40.578],
        '衡水': [115.8838, 37.7161],
        '衢州': [118.6853, 28.8666],
        '西宁': [101.4038, 36.8207],
        '西安': [109.1162, 34.2004],
        '贵阳': [106.6992, 26.7682],
        '连云港': [119.1248, 34.552],
        '邢台': [114.8071, 37.2821],
        '邯郸': [114.4775, 36.535],
        '郑州': [113.4668, 34.6234],
        '鄂尔多斯': [108.9734, 39.2487],
        '重庆': [107.7539, 30.1904],
        '金华': [120.0037, 29.1028],
        '铜川': [109.0393, 35.1947],
        '银川': [106.3586, 38.1775],
        '镇江': [119.4763, 31.9702],
        '长春': [125.8154, 44.2584],
        '长沙': [113.0823, 28.2568],
        '长治': [112.8625, 36.4746],
        '阳泉': [113.4778, 38.0951],
        '青岛': [120.4651, 36.3373],
        '韶关': [113.7964, 24.7028]
    };

    var XAData = [
        [{
            name: '西安'
        }, {
            name: '北京',
            value: 100
        }],
        [{
            name: '西安'
        }, {
            name: '上海',
            value: 100
        }],
        [{
            name: '西安'
        }, {
            name: '广州',
            value: 100
        }],
        [{
            name: '西安'
        }, {
            name: '西宁',
            value: 100
        }],
        [{
            name: '西安'
        }, {
            name: '银川',
            value: 100
        }]
    ];

    var XNData = [
        [{
            name: '西宁'
        }, {
            name: '北京',
            value: 100
        }],
        [{
            name: '西宁'
        }, {
            name: '上海',
            value: 100
        }],
        [{
            name: '西宁'
        }, {
            name: '广州',
            value: 100
        }],
        [{
            name: '西宁'
        }, {
            name: '西安',
            value: 100
        }],
        [{
            name: '西宁'
        }, {
            name: '武汉',
            value: 100
        }],
        [{
            name: '武汉'
        }, {
            name: '西宁',
            value: 100
        }],
        [{
            name: '武汉'
        }, {
            name: '哈尔滨',
            value: 100
        }],
        [{
            name: '武汉'
        }, {
            name: '乌鲁木齐',
            value: 100
        }],
        [{
            name: '西宁'
        }, {
            name: '银川',
            value: 100
        }]
    ];

    var YCData = [
        [{
            name: '银川'
        }, {
            name: '北京',
            value: 100
        }],
        [{
            name: '银川'
        }, {
            name: '广州',
            value: 100
        }],
        [{
            name: '银川'
        }, {
            name: '上海',
            value: 100
        }],
        [{
            name: '银川'
        }, {
            name: '西安',
            value: 100
        }],
        [{
            name: '银川'
        }, {
            name: '西宁',
            value: 100
        }],
    ];

    var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
    //var planePath = 'arrow';
    var convertData = function(data) {

        var res = [];
        for (var i = 0; i < data.length; i++) {

            var dataItem = data[i];

            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push({
                    fromName: dataItem[0].name,
                    toName: dataItem[1].name,
                    coords: [fromCoord, toCoord],
                    value: dataItem[1].value
                });
            }
        }
        return res;

    };

    var color = ['#a6c84c', '#ffa022', '#46bee9']; //航线的颜色
    var series = [];
    [
        ['西安', XAData],
        ['西宁', XNData],
        ['银川', YCData]
    ].forEach(function(item, i) {
        series.push({
            name: item[0] + ' Top3',
            type: 'lines',
            zlevel: 1,
            effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: 'red', //arrow箭头的颜色
                symbolSize: 3
            },
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 0,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        }, {
            name: item[0] + ' Top3',
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'arrow'],
            symbolSize: 10,
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 15
            },
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 1,
                    opacity: 0.6,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        }, {
            name: item[0] + ' Top3',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                brushType: 'stroke'
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                }
            },
            symbolSize: function(val) {
                return val[2] / 8;
            },
            itemStyle: {
                normal: {
                    color: color[i],
                },
                emphasis: {
                    areaColor: '#2B91B7'
                }
            },
            data: item[1].map(function(dataItem) {
                return {
                    name: dataItem[1].name,
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                };
            })
        });
    });
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: function(params, ticket, callback) {
                if (params.seriesType == "effectScatter") {
                    return "线路：" + params.data.name + "" + params.data.value[2];
                } else if (params.seriesType == "lines") {
                    return params.data.fromName + ">" + params.data.toName + "<br />" + params.data.value;
                } else {
                    return params.name;
                }
            }
        },
        legend: {
            orient: 'vertical',
            top: 'bottom',
            left: 'right',
            data: ['西安 Top3', '西宁 Top3', '银川 Top3'],
            textStyle: {
                color: '#fff'
            },
            selectedMode: 'multiple'
        },
        geo: {
            map: 'china',
            // 把地图放大1.2倍
            zoom: 1.2,
            label: {
                // 鼠标移动显示区域名称
                emphasis: {
                    show: true,
                    color: '#fff'
                }
            },
            roam: true,
            // 地图样式修改
            itemStyle: {
                normal: {
                    areaColor: 'rgba(34, 70, 168, 0.7)',
                    borderColor: '#0692a4'
                },
                emphasis: {
                    areaColor: 'rgba(119, 139, 224, 0.548)'
                }
            }
        },
        series: series
    };

    myChart.setOption(option);
    window.addEventListener('resize', function() {
        myChart.resize();
    })
})();

效果如下：
请添加图片描述

  • 最后约束缩放
/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html { 
  font-size: 42px !important; 
      }
   }
 @media screen and (min-width: 1920px) { 
  html { 
     font-size: 80px !important;  
     }
 }

最终所有实现的完整效果如下：
在这里插入图片描述
整个项目完整代码在我的资源中。

纵有千堆雪与长街
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
[开源]基于 Vue、Datav、Echart 框架的数据大屏项目，可自由替换
sduhaf的博客
11-29 2461
JNPF数据大屏一个基于 Vue、Datav、Echart 框架的 " 数据大屏项目 "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换，部分图表使用 DataV 自带组件，可进行自主更改。JNPF数据大屏有如下几个特点：1、全程可视化编辑操作，自由布局页面，针对不同控件进行内容设置和数据绑定，所见即所得的实现大屏可视化页面开发；2、支持静态数据，数据库和 API 等多种数据源接入数据，通过配置可以动态实时更新；
ECharts数据可视化项目
Sweat_candy的博客
04-05 2411
可视化面板介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。 01-使用技术 完成该项目需要具备以下知识： div + css 布局 flex 布局 Less 原生js + jquery 使用 rem适配 echarts基础 02- 案例适配方案 设计稿是1920px flexible.js 把屏幕分为 24 等份 cssrem 插件的基准值是 80px 插件-配置按钮—配置扩展
前端学习之JavaScript echarts库的使用
qq_45839045的博客
02-23 1498
边框图片 组合写法： border-image: url("images/border.jpg") 167/20px round; 拆分写法： border-image-source: url("images/border.jpg"); border-image-slice: 167 167 167 167; border-image-width: 20px; border-image-repeat: round; 解释： 边框图片资源地址 裁剪尺寸（上 右 下 左）单位默认px，可使用百分百。 边框
【Echarts】echarts多层圆环图详细配置代码
做笔记/记录遇到的前端bug
10-09 3500
vue项目使用echars圆环图，多层圆环图，详细配置，拿来直接用
ECharts 数据可视化大屏项目学习
最新发布
m0_74394367的博客
04-26 902
ECharts 数据可视化大屏项目学习
数据可视化Echart写的一个小项目
qq_53682646的博客
06-18 90
介绍：这个小项目是用来echart以及jQuery。
ECharts数据可视化项目（简化版）
m0_52879657的博客
08-02 363
此项目是根据老师所提供项目修改实现的ECharts数据可视化项目 该项目使用了ECharts和Ajax，结合html、css、jquery所制作的项目。 项目地址：项目GitHub超链接 ECharts基础知识讲解 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 官网
基于ECharts数据可视化项目
m0_73198722的博客
10-18 695
数据可视化项目简介
echarts数据可视化项目教程项目笔记源码
05-08
在这个“ECharts数据可视化项目教程”中，我们将深入探讨如何使用ECharts进行数据呈现和交互设计。 1. **ECharts基础知识** - ECharts的安装：ECharts可以通过CDN链接直接引入，或者通过npm或yarn进行本地安装。 ...
基于ECharts数据可视化大屏案例源码
12-03
在“基于ECharts数据可视化大屏案例源码”中，我们可以学习到以下几个关键知识点： 1. **ECharts基础使用**：了解如何引入ECharts库，设置图表容器，以及初始化图表。这包括配置项的设置，如`title`、`legend`、`...
echarts数据可视化作业
01-14
在本“ECharts数据可视化作业”中，我们将深入探讨ECharts的使用方法以及它在数据可视化的应用。 1. **ECharts基础概念** - **图表类型**：ECharts提供了多种图表类型，如柱状图（bar）、折线图（line）、饼图...
基于JavaScript的echarts数据可视化大屏设计源码
03-28
**基于JavaScript的ECharts数据可视化大屏设计源码详解** 在大数据时代，数据可视化成为企业理解和展示业务数据的重要工具。ECharts，一个基于JavaScript的开源图表库，因其丰富的图表类型和强大的交互性，广泛应用...
项目开发之Echarts的使用（数据可视化）
weixin_48596030的博客
10-13 166
只需要两步：在下载echarts时，很多人可能会遇到安装不成功或者报错的问题，解决办法可以通过重装或者是装之前的版本来解决。 若是引入后报错，可尝试以下引入方式： 到这里，echarts的安装就OK了已经将echarts安装引入后，接下来需要在项目中使用：
ECharts用法及常用配置项详解（Vue环境）
qq_39093474的博客
11-05 1891
首先使用 npm下载安装 ECharts；在项目的 main.js 文件中引入（此处为全局引入，后续在单个 .vue 页面中无需再引）；//引入import * as Echarts5 from 'echarts5' //echarts新版本echarts5//使用//新版本。
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
wuyxinu的博客
02-13 5039
数据可视化-echarts入门、常见图表案例及项目案例 一、简介 一、数据可视化简介 什么是数据可视化？ 数据可视化是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析；主要是借助于图形化手段，清晰有效地传达与沟通信息。 二、echarts简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备
小程序使用echarts和echarts配置项总结（全网最简单详细）
林靖焙的博客
06-22 6113
全网最简单详细的小程序使用echarts教程，干货满满！
01-Echarts数据可视化-环境准备
热门推荐
光脚丫思考的专栏
06-25 1万+
Apache ECharts提供了多种安装方式，该文章分别介绍了从GitHub获取、从CDN获取、从NPM获取、在线定制四种方式。
vue3+Echarts-数据可视化项目实践
qq_53541336的博客
08-21 1801
本次案例是使用vue3和Echarts图表进行实现的，整个书写代码过程相对来说还算比较简单，易于理解，项目开始之初肯定离不开框架的搭建，vue框架的搭建这里主要使用的是vue-cli来构建项目，不过小伙伴们也可以使用vite来构建，这个可能相对来说需要后期自己去书写里面的比如像路由这些。今天来讲解一下最近工作中学习到的一些新的知识点，也是自己第一次接触到的新内容，和小伙伴们一起分享学习下。(4)最后就是后端数据，需要另外新建文件夹，在里面书写各个图表的数据，这里将具体的数据文档放置。
ECharts数据可视化项目实践pdf
07-29
很抱歉，我无法提供ECharts数据可视化项目实践的PDF文件。但是，根据引用\[1\]和引用\[3\]的描述，这本《ECharts数据可视化：入门、实战与进阶》是一本非常适合初学者和进阶开发者的实战类教程，可以帮助读者快速上手ECharts并实现各种效果。这本书从零开始讲解ECharts的使用方法和实战案例，包括制作单个可视化、制作Dashboard、使用ECharts的色彩主题等内容。书中还加入了大量的代码注释和解释，即使是小白也可以轻松学习。因此，如果你对ECharts数据可视化项目实践感兴趣，这本书可能会对你有所帮助。 #### 引用[.reference_title] - *1* *3* [第一本 ECharts 数据可视化书籍出版了！](https://blog.csdn.net/wujiandao/article/details/111658983)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [ECharts 数据可视化，这本书就够了！](https://blog.csdn.net/H176Nhx7/article/details/112690230)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纵有千堆雪与长街

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值