Echarts带渐变色的折线图

最新推荐文章于 2024-03-17 17:51:44 发布
最新推荐文章于 2024-03-17 17:51:44 发布
阅读量3.4k 收藏 8
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiudechao1/article/details/99744347
版权

只需要在series系列数据中加入渐进色即可实现上图效果。

                areaStyle: {
                    normal: {
                        //前四个参数代表位置 左下右上，如下表示从上往下渐变色 紫色到暗蓝色，
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: 'rgba(210, 35, 231, 1)' }, 
                                { offset: 1, color: 'rgba(76, 143, 243, 0)' }
                            ]
                        )
                    }
                }

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EChartsTest</title>
    <!-- 引入 echarts.js -->
	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:600px; height:300px; background-color:#143C50"></div>
	
    <script type="text/javascript">
	
    // 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	
    option = {
        tooltip : {  //提示框
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        color: ['#d223e7', '#0882ac', ], 
        legend: {  //图例
            data: ['瑞星', '趋势'],
            itemHeight: 9,//改变圆圈大小
			//icon的值列举，
			//circle圆形, rect矩形, roundRect圆角矩形, triangle三角形, diamond菱形,
			//emptyCircle空心圆,emptyRectangle,emptyTriangle, emptyDiamond, pin大头针, arrow箭头, none无
            icon: "emptyCircle", //图标：空心圆样式，
            textStyle: {
                color: '#B0CEFC'        // 图例文字颜色
            }
        },
        grid: {
            x: 35,
            y: 38,
            x2: 0,
            y2: 26,
        },
        xAxis: {
            type: 'category', //类目
            data: ['6-4','7-1','7-2','7-3'],
            axisPointer: {  //坐标指示器
                type: 'shadow'  //阴影效果
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#B0CEFC',
                }
            },
        },
        yAxis: {
            type: 'value',
            interval: 10,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#B0CEFC',
                }
            },
            //网格样式
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],//网格线色彩
                    width: 1,
                    type: 'solid'
                }
            },
        },
        series: [
            {
                name: '瑞星',
                type: 'line',
                areaStyle: {
                    normal: {
						//前四个参数代表位置 左下右上，如下表示从上往下渐变色 紫色到暗蓝色，
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: 'rgba(210, 35, 231, 1)' }, 
                                { offset: 1, color: 'rgba(76, 143, 243, 0)' }
                            ]
                        )
                    }
                },
                data: [20,35,20,20],
                lineStyle: {
                    normal: {
                        color: "#0882ac" //折线颜色蓝色
                    }
                }
            },
            {
                name: '趋势',
                type: 'line',
                areaStyle: {
                    normal: {
						//前四个参数代表位置 左下右上，如下表示从上往下渐变色 暗青色到亮青色，
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: 'rgba(12,180,250, 1)' }, 
                                { offset: 1, color: 'rgba(63, 208, 249, 0)' }
                            ]
                        )
                    }
                },
                data: [10,20,40,30],
                lineStyle: {
                    normal: {
                        color: "#2493d7"
                    }
                }
            }
        ]
    };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		
    </script>
	
</body>
</html>

 

leo_qiu_s
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts折线图实现渐变效果
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
01-10 1万+
先看下效果图是这个样子的 ，和普通的折线图最明显的区别就是需要做成渐变效果。 目录 1、官网找例子 2、初步改造示例，有个雏形 3、细节改造和优化 4、全部代码 5、原始效果和完成效果对比 1、官网找例子 样例地址：https://echarts.apache.org/examples/zh/editor.html?c=area-basic 官网初始option 复制到项目中，得到的效果如下图（width:424px;height:200px;）： 2、...
Echarts 折线图加渐变色
Geek-Haoyu
12-27 1839
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。可用于直角坐标系和极坐标系上...
echarts折线图曲线图分段用不同颜色显示，曲线改变颜色例子，Y轴超过某一数值曲线变色
05-04
echarts折线图曲线图分段用不同颜色显示，Y轴超过某一数值变色,echarts曲线改变颜色例子,x轴和y轴数据可以自己定义,曲线默认显示黑色(black)，400以上900以下显示成金色(gold)。 核心代码 visualMap: { show: false, dimension: 1, pieces: [], //pieces的值由动态数据决定 outOfRange: { color: 'black' } //上面是按官方文档固定格式，主要是配置样式布局，实际的x轴和y轴数据可以通过ajax在后台取得 //x轴数据 var datax = ['1月', '2月', '3月', '4月', '5月','6月', '7月', '8月', '9月','10月']; //模拟动态数据 option.xAxis.data = datax; //y轴数据 var datay = [160, 280, 350, 500, 200, 250, 800, 600, 550, 200]; option.series[0].data = datay; //400以上,900以下显示成金色(gold) option.visualMap.pieces[0] = {gte: 400, lte: 900, color: 'gold'};
echarts实践总结（常用二）：折线图（特点：渐变、面积区域）
最新发布
qq_45796592的博客
03-17 721
折线图实现渐变、面积区域
echarts折线图颜色渐变
weixin_41796860的博客
09-09 4536
series-line.areaStyle. color = “#000” 填充的颜色。 颜色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，也可以使用十六进制格式，比如 ‘#ccc’。除了纯色之外颜色也支持渐变色和纹理填充 // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCo
echarts 折线图实现渐变效果
文龙刚的博客
03-03 6515
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document.
Echarts 折线图【渐变色】
52.0Hz的博客
01-03 5732
通过echarts生成电量统计折线图，并配置线条的颜色样式--渐变色
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
echarts 双折线图 实现 与虚线
05-15
echarts 双折线图 实现 与虚线
带渐变色 效果的柱形图
04-13
带渐变色 效果的柱形图 可以直接开启渐变颜色渐变 自定义颜色不同颜色
jQuery插件Echarts实现的渐变色柱状图
10-20
本文主要介绍了jQuery插件Echarts实现渐变色柱状图的实例。具有很好的参考价值。下面跟着小编一起来看下吧
echarts 设置地图外边框、地图背景渐变以及在地图上打点.js
05-13
主要配置 echart 中 地图的外边框和地图整体背景颜色渐变以及在对应的地图上做标记等功能。详细效果图：https://blog.csdn.net/qq_36437172/article/details/106099547
Echarts折线图实现区域颜色渐变
shsyzhzhgn的博客
08-22 1681
Echarts折线图区域颜色渐变
echarts三段渐变色 折线图
ET_ing的博客
07-29 463
将折线分三段： 1、大于8cm的线段为红色，并且波峰部分为红色。 2、大于5cm的线段为橙色，并且渐变为橙色。 3、大于1cm的线段为黄色，并且渐变成黄色。 4、小于1cm的线段为灰色。 5、数字、标记名称分别局图形左右。............
echart渐变折线图
qq_41191401的博客
05-06 1236
效果图，以及代码。关键点在于渐变，后面代码中有注释说明。上下左右四个渐变方向，加上渐变的色彩偏移，既可以完成带渐变的折线图。需要与后端对接，只要改变X轴Y轴的数据，还有一些小的细节就可以了。比较简单实用。 let option={ color:'#38d7b7', tooltip: { trigger: 'axis', ax...
echarts- 渐变折线图
qq_40905132的博客
07-31 426
2. 折线区域是渐变色。3. 显示折线小圆点。
echarts渐变折线图
weixin_42752532的博客
12-21 671
option = { grid: { // 直角坐标系内绘图网格 left: '10', //grid 组件离容器左侧的距离, //left的值可以是80这样具体像素值， //也可以是'80%'这样相对于容器高度的百分比 top: '10', .
Echarts 渐变折线图
HelloWord176的博客
01-29 433
图例： 代码： <template> <div class="policPic"> <div id="chart_example" ref="chart_example"></div> </div> </template> <script> export default { data() { return {}; }, created() {}, mounted() {
echarts折线图面积图渐变色
09-22
Echarts是一款开源的数据可视化库，它提供了多种不同类型的图表，包括折线图和面积图。在Echarts中，我们可以通过设置渐变色来实现折线图和面积图的渐变效果。 要实现折线图的渐变色效果，我们可以使用渐变色配置项gradientColor。通过设置gradientColor为数组形式的渐变色值，我们可以让折线图中的每一个折线段都使用不同的渐变色，从而增强可视化效果。 例如，我们可以设置gradientColor为['#FF0000', '#00FF00']，这样折线图中的每个折线段都会从红色渐变到绿色。我们还可以设置更多的渐变色值，来实现更复杂的渐变效果。 对于面积图，Echarts同样提供了渐变色配置项areaStyle。通过设置areaStyle的color属性为数组形式的渐变色值，我们可以让面积图中的每个面积段都使用不同的渐变色，实现更丰富的可视化效果。 除了基本的渐变色功能，Echarts还提供了更多的样式配置项，如透明度配置项opacity，可以让渐变色更加柔和。此外，我们还可以通过设置不同的渐变类型（例如线性渐变或径向渐变），来实现不同的渐变效果。 总之，通过Echarts的渐变色配置项，我们可以轻松地给折线图和面积图添加渐变效果，从而增强数据的可视化效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值