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

相关推荐
DataGear1 天前
DataGear 5.2.0 发布,数据可视化分析平台
javascript·信息可视化·数据分析·html·echarts·数据可视化
DataGear1 天前
DataGear 企业版 1.3.0 发布,数据可视化分析平台
javascript·信息可视化·数据分析·html·echarts·数据可视化
追光少年33223 天前
前后端交互之动态列
spring boot·vue·echarts
小李飞刀李寻欢3 天前
背景替换大模型图像处理gradio部署服务
图像处理·人工智能·图像·gradio·背景
琪露诺大湿3 天前
JavaEE-多线程初阶(5)
java·开发语言·jvm·java-ee·idea·多线程·基础
苦逼的猿宝3 天前
React中使用echarts写出3d旋转扇形图
前端·react.js·echarts
GOTXX4 天前
【MySQL】MySQL数据库入门:构建你的数据基石
linux·数据库·mysql·开发工具·基础
新中地GIS开发老师5 天前
GIS开发到底能应用在哪些行业 ?
java·javascript·arcgis·前端框架·echarts
漆黑的莫莫5 天前
使用 Vue 和 ECharts 创建交互式图表
前端·vue.js·echarts
谁呛我名字7 天前
大数据应用开发——数据可视化
javascript·vue.js·echarts