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博客大差不差,所哟

相关推荐
吉星9527ABC10 小时前
使用烛线图展示二进制01离散量趋势图
前端·echarts·离散量展示·烛线图
TimelessHaze17 小时前
【ECharts数据可视化】我竟然用Excel回答面试官怎么实现数据可视化?
前端·echarts·trae
dremtri1 天前
ECharts雷达图自定义数据点位置
echarts·trae
码界筑梦坊2 天前
171-基于Flask的笔记本电脑数据可视化分析系统
python·信息可视化·flask·毕业设计·echarts
小码编匠4 天前
物联网数据大屏开发效率翻倍:Vue + DataV + ECharts 的标准化模板库
前端·vue.js·echarts
22jimmy5 天前
JavaWeb(二)CSS
java·开发语言·前端·css·入门·基础
草帽lufei6 天前
3DMap大屏那些事儿
前端·vue.js·echarts
安卓开发者7 天前
Android中RxJava与LiveData的结合使用
android·echarts·rxjava
小小愿望10 天前
ECharts 实战技巧:揭秘 X 轴末项标签 “莫名加粗” 之谜及破解之道
前端·echarts
じòぴé南冸じょうげん11 天前
解决ECharts图表上显示的最小刻度不是设置的min值的问题
前端·javascript·echarts