echarts入门双y轴折线图

效果图

双y轴折线图设置背景色主要是在series设置areaStyle

areaStyle: {
    normal: {
        color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [    
                { offset: 0, color: "rgba(0,0,128,0.5)" },
                { offset: 0.5, color: "rgba(0,0,128,0.3)" },
                { offset: 1, color: "rgba(0,0,128,0.1)" },
            ]
        )
     }
},

完整代码

!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="../lib/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
        var  option = {
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'item',
                axisPointer:{       //坐标轴指示器
                type:'none',   //十字准星指示器
            },
            },
            legend: {
                data: ['温度', '湿度']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: ['周一', '周二', '周三', '周四', '周五']
            },
            yAxis: [
                {
                    type: 'value',
                    name: '℃',
                //坐标轴最大值、最小值、强制设置数据的步长间隔
                    interval: 5,
                    axisLabel: {
                        //y轴上带的单位
                        formatter: '{value}'
                    },
                    //轴线
                    axisLine: {
                        show: true
                    },
                    //分割线
                    splitLine: {
                        show: false
                    }
                },
                {
                    type: 'value',
                    name: 'RH%',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    //轴线
                    axisLine: {
                        show: true
                    },
                    //分割线
                    splitLine: {
                        show: false
                    }

                }
            ],
            series: [
            {
                    name: '温度',
                    type: 'line',
                    symbolSize: 5, // 设置折线上圆点大小
                    symbol: 'circle', // 设置拐点为实心圆
                    yAxisIndex: 0,
                    data: [10,23,30,50,50],
                    itemStyle: {
                        color: 'rgba(0,0,128, 0.4)',
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [    
                                    { offset: 0, color: "rgba(0,0,128,0.5)" },
                                    { offset: 0.5, color: "rgba(0,0,128,0.3)" },
                                    { offset: 1, color: "rgba(0,0,128,0.1)" },
                                ]
                            )
                        }
                    },
                }, {
                    name: '湿度',
                    type: 'line',
                    symbolSize: 5, // 设置折线上圆点大小
                    symbol: 'circle', // 设置拐点为实心圆
                    yAxisIndex: 1,
                    data: [15,10,20,25,30],
                    itemStyle: {
                        color: 'rgba(84,112,198, 0.4)',
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [    
                                    { offset: 0, color: "rgba(84,112,198,0.5)" },
                                    { offset: 0.5, color: "rgba(84,112,198,0.3)" },
                                    { offset: 1, color: "rgba(84,112,198,0.1)" },
                                ]
                            )
                        }
                    },
                }
            ]
        };
        
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

echarts入门 双y轴折线图

猜你喜欢

echarts入门双y轴折线图