折线图标签为气球状

最新推荐文章于 2024-06-27 14:10:43 发布
最新推荐文章于 2024-06-27 14:10:43 发布
阅读量321 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianflower/article/details/107985000
版权

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px;height: 600px;border: red solid 1px;"></div>
<script>
    var myChart = echarts.init(document.getElementById('chart'), null, {devicePixelRatio: 3});
    var data = [11, 11, 11, 13, 12, 13, 3];
    var data2 = [9, 15, 17, 10, 16, 13, 7];
    var option = {
        title: {
            text: '未来一周气温变化',
            subtext: '纯属虚构'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['最高气温', '最低气温']
        },
        toolbox: {
            show: true,
            feature: {
                //显示下载logo
                saveAsImage: {show: true}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} °C'
            }
        },
        series: [
            {
                name: '最高气温',
                type: 'line',
                data: data,
                symbolSize: 0,
                lineStyle: {
                    color: '#47A0EF'
                },
                itemStyle: {
                    color: '#47A0EF'
                },
                markPoint: {
                    itemStyle: {
                        color: 'rgba(71,160,239,0.7)'
                    },
                    label: {
                        color: 'white'
                    },
                    data: [
                        {
                            //参数1：对应x轴索引    参数2：对应y轴的具体值
                            coord: [0, data[0]],
                            value: data[0],
                        },
                        {
                            coord: [1, data[1]],
                            value: data[1]
                        },
                        {
                            coord: [2, data[2]],
                            value: data[2]
                        },
                        {
                            coord: [3, data[3]],
                            value: data[3]
                        },
                        {
                            coord: [4, data[4]],
                            value: data[4]
                        },
                        {
                            coord: [5, data[5]],
                            value: data[5]
                        },
                        {
                            coord: [6, data[6]],
                            value: data[6]
                        }
                    ]
                }
            },
            {
                name: '最低气温',
                type: 'line',
                data: data2,
                symbolSize: 0,
                lineStyle: {
                    color: '#E1DC59'
                },
                itemStyle: {
                    color: '#E1DC59'
                },
                /*markPoint: {
                    itemStyle: {
                        color: 'rgba(225,220,89,0.7)'
                    },
                    label: {
                        color: 'white'
                    },
                    data: [
                        {
                            coord: [0, data2[0]],
                            value: data2[0],
                        },
                        {
                            coord: [1, data2[1]],
                            value: data2[1]
                        },
                        {
                            coord: [2, data2[2]],
                            value: data2[2]
                        },
                        {
                            coord: [3, data2[3]],
                            value: data2[3]
                        },
                        {
                            coord: [4, data2[4]],
                            value: data2[4]
                        },
                        {
                            coord: [5, data2[5]],
                            value: data2[5]
                        },
                        {
                            coord: [6, data2[6]],
                            value: data2[6]
                        }
                    ]
                }*/
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>
lianflower
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html实现数据分布,【数据可视化】项目分布地图设计之显示省份地图
weixin_39906245的博客
06-05 1100
实现效果项目分布地图效果鼠标悬停效果需求分析显示陕西省省份地图显示地市的名称根据项目数量，动态调整气球浮标的大小准备步骤下载echarts，官网下载下载echarts中的省份信息，可以通过 npm i echarts 或者 cnpm i echarts下载整个echarts的资源包。京省份数据的具体路径node_modules\_echarts@4.9.0@echarts\map\js\provi...
使用echarts插件画图表
weixin_44239035的博客
06-17 270
从官网中下载echarts的插件，导入 <script src="echarts.min.js"></script> 先定义一个具备高宽的 DOM 容器。 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></...
echarts折线图节点改为气泡
07-21 266
echarts折线图节点改为气泡，并且气泡大小可根据数据范围设置大小
【Echarts】散点图 制作 气泡 类型图表
最新发布
工作中遇到问题记录
06-27 270
【Echarts】散点图 制作 气泡 类型图表
echarts最大值最小值加气泡样式及平均线
我的电脑会后空翻的博客
06-21 1354
markPoint: { symbol: 'pin', //标记(气泡)的图形 symbolSize: 45, //标记(气泡)的大小 itemStyle:{ color: '#2f54eb', //图形的颜色。 borderColor: '#2f54eb',//图形的描边颜色。 borderWidth: 0,//描边线宽。 borderType..
echarts做了一个气泡图
qq_28586135的博客
12-21 1271
echarts做了一个气泡图
echarts的标记线和标记点
励志要成为it大佬的博客
04-03 1万+
markPoint: 标记点---------------------------markLine：标记线 看了好几天还是不太理解markPoint和markLine的作用， 昨晚看视频终于有点理解了， 比如在一个折线图形当中我们经常看到最高和最低点都会有个标记，在echarts当中markPoint就是来标记最高和最低点的，  而有的图表中会有个平均值得虚线，markLine就是用来表示平局值的...
EasyUI表格合并，及echarts折线图，导出折线图为图片
01-23
而Echarts是一款由百度开发的开源数据可视化库，它支持各种图表类型，如折线图、柱状图、饼图等，为数据分析和展示提供了强大的支持。 在"EasyUI表格合并"这一主题中，我们主要讨论的是如何使用EasyUI的datagrid...
折线图_折线图_
10-01
在数据分析和可视化领域，折线图是一种非常常见且强大的工具，尤其在展示数据随时间变化的趋势时尤为适用。本文将针对R语言的新手和小白，详细介绍如何使用R语言绘制出美观且具有信息量的折线图。 首先，我们需要...
蓝色标签说明的PPT折线图
07-16
在这个场景中，我们讨论的是一个名为“蓝色标签说明的PPT折线图”的演示文稿，它采用.PPTX格式，这是一种由Microsoft PowerPoint创建的文件，用于制作和编辑专业级别的幻灯片。 折线图的基本结构是由一系列连接的点...
PowerBI制作区间折线图
08-25
资源为PowerBI源文件，有需要的小伙伴可以自行下载使用，有需要的小伙伴可以自行下载使用，如需查看视频讲解可以访问西瓜视频：...或者哔哩哔哩：https://space.bilibili.com/630399480?spm_id_from=333.1007.0.0
折线图_折线图matlab_
10-01
在MATLAB中绘制折线图是一种常见的数据可视化方法，它能有效地展示数据随时间或其它连续变量的变化趋势。本文将详细介绍如何使用MATLAB绘制折线图，并通过具体步骤和示例来帮助理解。 首先，折线图是通过连接一系列...
echarts-水球图
神zhi殇的博客
07-02 3296
cpu使用率，磁盘剩余空间等图形。 参考： https://gallery.echartsjs.com/editor.html?c=xSgRUrdtr_ https://github.com/ecomfe/echarts-liquidfill var value = 0.62; // 图形的值 var data = []; // 波浪个数 data.push(value) data.push(va...
气球形状的ToolTip
magicsutra的专栏
12-08 863
 关于ToolTip StylesToolTip controls support a variety of control styles in addition to standard window styles. A ToolTip control always has the WS_POPUP and WS_EX_TOOLWINDOW window styles, regardles
用echarts实现水滴图效果
浩星
04-30 8770
老规矩，看效果先：（这里的水滴是动态的） 注意，这里是使用echarts,除了原先的echarts.js外还得引入一个水滴图用的js===echarts-liquidfill.js 可以官网也可以等到最下面，会有网盘地址，去提取下： var arrWatter1={}; arrWatter1.warterId = 'water_echarts_hd'; arrWa...
echarts如何在每个柱状图上都显示气泡详解（好看的柱状图）
lily2016n的博客
12-14 1万+
markPoint: 图表标注 ，如下图，详见官方http://echarts.baidu.com/option.html#series-bar.markPoint<script> var myChart = echarts.init(document.getElementById('salesVolume')); option = { title : {
【WPS】折线图数据点上添加标记（三角形、正方形、菱形等）
热门推荐
blucod的博客
08-27 2万+
文章目录介绍操作 介绍 WPS默认生成的折线图上没有在数据点上标记一些形状（如三角形、正方形、菱形）， 而文献中的折线图常常有这些符号，如下图所示： 参考Office Excel中添加上述形状的博客，下文在WPS界面上找到了相应功能的位置，可以添加内置的形状（三角形、正方形、菱形、圆形等）。 此外还可以添加自定义的符号。 操作 首先生成一个默认的折线图，然后点击一条折线，在右栏的属性中进行设置： 【填充与线条】-【标记】-【内置】-【类型】 此时得到的空心的菱形： 如果要实心的，则只需要添加【填充颜色
echart中markPint的设置
alice9999999的博客
09-20 1132
项目中要求折线图上每个点上的数字用图形修饰，于是使用了markPoint 具体使用见代码红色部分，绿色部分为数据格式，方便编写series : function() { var serie = []; for (var i = 0; i < echartsData.length; i++) { var formarkPoint = [];
echarts带提示气泡的柱图
ardo_pass的博客
11-07 5491
总是觉得柱图中带气泡显示当前值的echarts显得稍微高端一些，于是乎研究一下为同学的贷款网站做下渠道推广点击访问率的统计分析。 首先去echarts官网demo下找了一个模板（当然是柱图的），改了改里面的参数的示例，大概出来一个雏形： js代码如下： option = { title : { text: '某地区蒸发量和降水量', subte
matplotlib折线图标签
05-30
在 Matplotlib 中，可以使用 `plt.plot()` 方法绘制折线图，并使用 `plt.xlabel()` 和 `plt.ylabel()` 方法添加 x 轴和 y 轴的标签。下面是一个简单的例子： ```python import matplotlib.pyplot as plt # 准备...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值