ECharts折线图背景渐变设置

目录

引入

1.在一个HTML文件中编写两个图表

2.渐变背景


引入

如何在一个HTML文件中编写两个图表:(这个例子基于这个篇文章的基础)
一篇搞懂前端获取数据-CSDN博客

一个例子:

1.在一个HTML文件中编写两个图表

重点在于名字的不重复性,和创建后位置的不重叠性:

html 复制代码
 <div id="main02" style="width: 30%;height:40vh;"></div>
 <script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
   var myChart = echarts.init(document.getElementById('main02'));
 </script> 

2.渐变背景

【详见 areaStyle部分】

javascript 复制代码
series: [
       {
         data: [820, 932, 901, 934, 1290, 1330, 1320],
         type: 'line',
         //渐变颜色
         areaStyle: {
            color: {
                type: 'linear', // 线性渐变
                x: 0, // 起始位置
                y: 0,
                x2: 0, // 结束位置
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'rgb(151,248,204)' // 0% 处的颜色
                },{
                    offset: 0.5, color: 'rgb(151,248,204)' // 50% 处的颜色
                },  {
                    offset: 1, color: 'rgb(106,172,252)' // 100% 处的颜色
                }],
            }
        }
       }
     ],

其他部分由于和这篇文章-->一篇搞懂前端获取数据-CSDN博客大差不差,所哟

相关推荐
charlie11451419114 小时前
HTML 理论系统笔记2
前端·笔记·学习·html·基础·1024程序员节·原生
合作小小程序员小小店1 天前
web网页,在线%抖音,舆情%分析系统demo,基于python+web+echart+nlp+知识图谱,数据库mysql
数据库·python·自然语言处理·flask·nlp·echarts·知识图谱
charlie1145141912 天前
现代 Python 学习笔记:Statements & Syntax
笔记·python·学习·教程·基础·现代python·python3.13
一川_3 天前
《Echarts内存泄漏惊魂记:我的页面在导航切换中“炸”了!》
echarts
合作小小程序员小小店3 天前
大屏开发,在线歌词舆情分析系统demo,基于python,flask,web,echart,nlp,自然语言数据库mysql。
后端·python·flask·nlp·echarts
Lsx_4 天前
ECharts 全局触发click点击事件(柱状图、折线图增大点击范围)
前端·javascript·echarts
xiaohe06015 天前
🚀 拥抱 create-uni,一行命令轻松集成 Uni ECharts!
vue.js·uni-app·echarts
charlie1145141915 天前
2D 计算机图形学基础速建——1
笔记·学习·教程·计算机图形学·基础
SteveJrong5 天前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
知识分享小能手7 天前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts