当前位置：首页 > article >正文

ECharts折线图背景渐变设置

article 2024/11/8 13:07:55

引入

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

2.渐变背景

引入

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

一个例子：

1.在一个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部分】

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

查看全文

http://www.kler.cn/a/384422.html