ECharts 图表简单示例，中国地图

最新推荐文章于 2024-04-16 16:13:37 发布
最新推荐文章于 2024-04-16 16:13:37 发布
阅读量797 收藏 14
点赞数 7
分类专栏： ECharts 文章标签： echarts 前端 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46029887/article/details/135460377
版权

目录

ECharts官网链接: ECharts

在这里插入图片描述

在项目中引入 Apache ECharts

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
    <!-- 地图js -->
    <script src="china.js"></script>
  </head>
</html>

柱状图

在这里插入图片描述

折线图

在这里插入图片描述

饼图

在这里插入图片描述

仪表盘

在这里插入图片描述

中国地图

在这里插入图片描述

完整示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
    <!-- 地图js -->
    <script src="china.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main1" style="width: 800px;height:600px;"></div>
    <div id="main2" style="width: 800px;height:600px;"></div>
    <div id="main3" style="width: 800px;height:600px;"></div>
    <div id="main4" style="width: 800px;height:600px;"></div>
    <div id="map" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var chartDom1 = document.getElementById('main1');
        var chartDom2 = document.getElementById('main2');
        var chartDom3 = document.getElementById('main3');
        var chartDom4 = document.getElementById('main4');
        var chartDom5 = document.getElementById('map');
        var myChart1 = echarts.init(chartDom1);
        var myChart2 = echarts.init(chartDom2);
        var myChart3 = echarts.init(chartDom3);
        var myChart4 = echarts.init(chartDom4);
        var myChart5 = echarts.init(chartDom5);
        var option1, option2, option3, option4, option5;
        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);


        option2 = {
            title: {
                text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        myChart2.setOption(option2);

        option3 = {
            series: [{
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 240,
                splitNumber: 12,
                itemStyle: {
                    color: '#58D9F9',
                    shadowColor: 'rgba(0,138,255,0.45)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                },
                progress: {
                    show: true,
                    roundCap: true,
                    width: 18
                },
                pointer: {
                    icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                    length: '75%',
                    width: 16,
                    offsetCenter: [0, '5%']
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        width: 18
                    }
                },
                axisTick: {
                    splitNumber: 2,
                    lineStyle: {
                        width: 2,
                        color: '#999'
                    }
                },
                splitLine: {
                    length: 12,
                    lineStyle: {
                        width: 3,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: 30,
                    color: '#999',
                    fontSize: 20
                },
                title: {
                    show: false
                },
                detail: {
                    backgroundColor: '#fff',
                    borderColor: '#999',
                    borderWidth: 2,
                    width: '60%',
                    lineHeight: 40,
                    height: 40,
                    borderRadius: 8,
                    offsetCenter: [0, '35%'],
                    valueAnimation: true,
                    formatter: function (value) {
                        return '{value|' + value.toFixed(0) + '}{unit|km/h}';
                    },
                    rich: {
                        value: {
                            fontSize: 50,
                            fontWeight: 'bolder',
                            color: '#777'
                        },
                        unit: {
                            fontSize: 20,
                            color: '#999',
                            padding: [0, 0, -20, 10]
                        }
                    }
                },
                data: [{
                    value: 100
                }]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option3);

        option4 = {
            legend: {
                top: 'bottom'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            series: [{
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [50, 250],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [{
                        value: 40,
                        name: 'rose 1'
                    },
                    {
                        value: 38,
                        name: 'rose 2'
                    },
                    {
                        value: 32,
                        name: 'rose 3'
                    },
                    {
                        value: 30,
                        name: 'rose 4'
                    },
                    {
                        value: 28,
                        name: 'rose 5'
                    },
                    {
                        value: 26,
                        name: 'rose 6'
                    },
                    {
                        value: 22,
                        name: 'rose 7'
                    },
                    {
                        value: 18,
                        name: 'rose 8'
                    }
                ]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart4.setOption(option4);

        // 自定义蓝色调颜色
        var itemColor = '#A2C1F9'; // 蓝色

        // 配置地图选项
        var option5 = {
            title: {
                text: '中国地图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                min: 0,
                max: 1000,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 图例文字
                calculable: true
            },
            series: [{
                name: '地图',
                type: 'map',
                mapType: 'china',
                roam: false, // 禁止地图缩放和平移
                label: {
                    show: true,
                    color: '#000'
                },
                itemStyle: {
                    normal: {
                        areaColor: itemColor, // 设置各个区域的颜色
                        borderColor: '#fff' // 省份边界颜色
                    },
                    emphasis: {
                        areaColor: '#F3B329', // 高亮省份的颜色
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                data: [{
                        name: '北京',
                        value: 100
                    },
                    {
                        name: '上海',
                        value: 200
                    },
                    {
                        name: '广州',
                        value: 300
                    },
                    // 其他省份的数据
                ]
            }]
        };
        // 使用刚指定的配置项和数据显示图表
        myChart5.setOption(option5);
    </script>
</body>


</html>
R·ZORO
关注
  • 7
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用echarts显示中国地图
一入前端深似海
09-11 2万+
到这就完成了中国地图绘制，就可以看到文章顶部效果图，具体参数配置根据个人可以更改。引入一个公共js文件（下面这段代码就是china.js文件）下面介绍一个方法如何用echarts画一个中国地图，如图。左侧图例加上单位的写法，替换掉原有的 splitList。项目引入echarts以后，在页面创建canvas标签。使用地图的页面引入上面的公用Js！2022/5/5 特别补充，2022/5/5 追加补充。
ECharts--中国地图（无敌详细）
热门推荐
qq_45066453的博客
03-12 6万+
使用Echarts绘制中国地图，其中地图点信息由JSON文件编写，前端html直接从JSON文件中读取地区数据，渲染到前端即可。详细介绍用到的各个功能！代码直接复制运行即可！
echarts全国及各省地理数据（内附地图json格式数据、js及参考示例）.zip
12-31
echarts中国及全国各省地图/地理数据（内附地图json格式数据、js及Demo参考示例）， 想找哪个城市，可对照js文件找到相应的文件调用即可。 有不明白的可一起交流学习。
echarts绘制中国地图省份地图及世界地图
m0_60648668的博客
07-11 9167
利用echarts绘制中国地图,省份地图及世界地图!
Echarts实现全国地图展示
m0_59281691的博客
04-16 994
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表官方地址。
echarts画中国地图！
2401_84097510的博客
04-12 967
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！[外链图片转存中…(img-kQvC48jk-1712875737018)][外链图片转存中…(img-i2Z9Mbhm-1712875737018)]
echarts绘制完整的中国地图
longshao_520的博客
08-26 7955
echarts绘制完整的中国地图。带标点以及自定义标点图标
Echarts实现——中国地图
qqjuanqq的博客
11-01 1万+
Echarts实现——中国地图
echarts版中国地图
weixin_51052286的博客
05-29 8114
Echarts实现中国版地图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5xSwd4cP-1653831276441)(C:\Users\blank\Desktop\ChinaEarchs.png)] 项目中下载echarts； npm i echarts --save 全局注册echarts；（main.js中全局引入） import echarts from 'echarts' Vue.prototype.$echarts = echarts 建立ec
echarts最新版做中国地图（详细版+避雷版）
weixin_45578530的博客
04-19 1万+
谨以此篇献 给那些在 用echarts做中国地图 很懊恼的程序媛（员） 真的不想让你们在走弯路 节省时间去刷刷抖音他不香吗？？ 1、在echarts的官网上 根据命令安装 npm install echarts --save 2、echarts3.0版本之后 已经不再跟中国地图相关的json、js文件了 我们需要到github上下载china.js文件引入到vue文件里 地址：GitHub - liangrumeng2015/China.js: echarts里面的地图文件China.js
详解python 利用echarts画地图(热力图)(世界地图，省市地图，区县地图)
09-18
主要介绍了详解python 利用echarts画地图(热力图)(世界地图，省市地图，区县地图),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
大屏数据可视化 ECharts 18套 iDataV
最新发布
05-10
地图热点、飞线动效，世界地图、中国地图、省份地图、城市地图、区县地图 3D图表展示 - 基于ECharts GL 3D柱形图，3D地球，二维数据的3D化展示 热力图展示 - 基于ECharts & 百度地图 基于百度地图的热力图，基于...
大屏数据可视化 Big screen data visualization demo
04-29
地图热点、飞线动效，世界地图、中国地图、省份地图、城市地图、区县地图 3D图表展示 - 基于ECharts GL 3D柱形图，3D地球，二维数据的3D化展示 热力图展示 - 基于ECharts & 百度地图 基于百度地图的热力图，基于...
大屏数据可视化 Big screen data visualization demo.zip
03-13
旭日图 - 基于ECharts V4.2 旭日图（Sunburst）是ECharts 4.0新增的图表类型，由多层的环形图组成，在数据结构上，内圈是外圈的父节点。 因此，它既能像饼图一样表现局部和...词云，水球图，烟花秀，关系图谱，中国地图
Echarts——中国地图绘制
heal_l的博客
01-13 1万+
首先准备中国城市分布Geo数据 china.jsonhttps://download.csdn.net/download/heal_l/75671467https://download.csdn.net/download/heal_l/75671467
大屏echarts示例------中国地图
zhuangjiajia09的专栏
04-27 3983
echarts做中国地图
echarts 画中国地图
weixin_51666715的博客
04-25 2772
数据可视化平台，中国各省数据和坐标 阿里云可视化 效果 使用echart画中国地图，步骤如下 1.安装依赖 npm i echarts 创建一个js文件 当你可以访问https请求的时候则使用，如下代码 import axios from "axios"; export default axios.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json") 如果无法请求https接口，则直接导入 3。配置option配
echarts引入地图不生效,地图demo，地图基础配置项
weixin_45631278的博客
12-24 1474
推荐把前面这些地图数据放到一个文件中使用 const geoJson = JSON.parse('{"type":"FeatureCollection","features":[{"type":"Feature","id":"xin_jiang","properties":{"name":"新疆","cp":[84.9023,41.748],"childNum":18},"geometry":{"type":"Polygon","coordinates":[[[96.416,42.7588],[96...
使用echarts 制作中国地图的显示（基础的配置 + 省份高亮显示 + 鼠标滑动高亮）
weixin_53630395的博客
11-21 4216
使用echarts 制作中国地图的显示（基础的配置 + 省份高亮显示 + 鼠标滑动高亮）
用echarts做地图
06-07
要使用Echarts制作地图，首先需要引入Echarts的JavaScript文件。可以在HTML文件中添加以下代码来引入Echarts： ```html <!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> ``` 接下来，就可以使用Echarts的地图组件来创建地图。以下是一个简单的例子： ```html <!-- 在 HTML 中添加一个带有 id 的 div 元素，用于显示地图 --> <div id="map" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('map')); // 配置地图选项 var option = { title: { text: '中国地图' }, tooltip: {}, visualMap: { min: 0, max: 1000, left: 'left', top: 'bottom', text: ['高', '低'], // 文本，默认为数值文本 calculable: true }, series: [{ name: '数据', type: 'map', mapType: 'china', roam: false, label: { normal: { show: true }, emphasis: { show: true } }, data: [ {name: '北京', value: 100}, {name: '上海', value: 500}, {name: '广州', value: 200}, {name: '深圳', value: 300}, {name: '重庆', value: 400} ] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> ``` 这个例子展示了如何使用Echarts的地图组件来创建一个中国地图，并添加了一些数据点。你可以根据自己的需要修改配置项和数据，以创建自定义的地图。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值