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

相关推荐
徊忆羽菲11 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
DataGear2 天前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
Endeavour_T3 天前
ECharts图表怎么做自适应?
前端·echarts
Kier12 天前
🔋 Vue + ECharts 实现分段折线图教学实战:电池趋势图案例
前端·javascript·echarts
@十八子德月生14 天前
第十章——8天Python从入门到精通【itheima】-99~101-Python基础综合案例-数据可视化(案例介绍=JSON格式+pyecharts简介)
大数据·python·信息可视化·pycharm·echarts·数据可视化
天上掉下来个程小白15 天前
Apache ECharts-02.入门案例
前端·spring boot·apache·echarts·苍穹外卖
GIS好难学17 天前
Echarts数据可视化开发教程+120套开源数据可视化大屏H5模板
前端·信息可视化·echarts
小浪努力学前端18 天前
React + ECharts:给tooltip里的按钮绑定事件,我踩过的那些坑
前端·react.js·echarts
elon_z21 天前
【项目实训#08】HarmonyOS知识图谱前端可视化实现
前端·echarts·知识图谱·harmonyos
紫薯馍馍21 天前
Dify创建 echarts图表 (二)dify+python后端flask实现
前端·flask·echarts·dify