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

相关推荐
uppp»6 小时前
echarts在前后端分离项目中的实践与应用
前端·javascript·echarts
小白的代码日记6 小时前
使用 ECharts 实现小区住户数量统计柱状图
前端·javascript·echarts
Pocker_Spades_A6 小时前
AI 对话高效输入指令攻略(四):AI+Apache ECharts:生成各种专业图表
人工智能·echarts
GIS学姐嘉欣18 小时前
无偿分享120套开源数据可视化大屏H5模板
信息可视化·echarts
Suppose19 小时前
[echarts]横向柱状图
echarts
全宝1 天前
🎯 ECharts实现水平嵌套气泡图
前端·javascript·echarts
sakoba3 天前
Docker学习其二(容器卷,Docker网络,Compose)
运维·网络·学习·docker·容器·基础
xyphf_和派孔明3 天前
关于echarts的性能优化考虑
前端·性能优化·echarts
全宝3 天前
echarts5实现地图过渡动画
前端·javascript·echarts
533_3 天前
[vue3 echarts] echarts 动态数据更新 setInterval
vue.js·echarts