北鱼南调路线

最新推荐文章于 2024-08-25 22:11:34 发布

哈佛在等我呢

最新推荐文章于 2024-08-25 22:11:34 发布

阅读量777

点赞数

分类专栏：数据可视化文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_37537423/article/details/122576544

版权

本文介绍了如何利用Echarts库在前端进行数据可视化展示，通过JavaScript技术实现动态图表，探讨了Echarts的基本用法和配置选项，适用于前端开发者提升数据展示效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>

</head>
<body>
    <div id="469592096e054846b33341c852fdbe3e" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_469592096e054846b33341c852fdbe3e = echarts.init(
            document.getElementById('469592096e054846b33341c852fdbe3e'), 'white', {
     renderer: 'canvas'});
        var option_469592096e054846b33341c852fdbe3e = {
     
    "baseOption": {
     
        "series": [
            {
     
                "type": "effectScatter",
                "coordinateSystem": "geo",
                "showEffectOn": "render",
                "rippleEffect": {
     
                    "show": true,
                    "brushType": "stroke",
                    "scale": 8,
                    "period": 5,
                    "color": "#f00"
                },
                "symbolSize": 12,
                "data": [
                    {
     
                        "name": "\u821f\u5c71",
                        "value": [
                            122.207216,
                            29.985295,
                            100
                        ]
                    },
                    {
     
                        "name": "\u5e7f\u5dde",
                        "value": [
                            113.23,
                            23.16,
                            100
                        ]
                    }
                ],
                "label": {
     
                    "show": true,
                    "position": "right",
                    "color": "red",
                    "margin": 8,
                    "fontSize": 13,
                    "formatter": "{b}",
                    "borderWidth": 2.0
                }
            },
            {
     
                "type": "lines",
                "name": "geo",
                "coordinateSystem":</

最低0.47元/天解锁文章

哈佛在等我呢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
北鱼南调路线

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script> <script t.
复制链接

扫一扫

专栏目录