ECharts3实例定制图例、XY轴、折线柱状混合图

矫情吗；* 2021-07-26 11:01 406阅读 0赞

### 前言 ###

实现如下效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70_pic_center]

### 解决方法 ###

option = { 
        // tooltip: { 
        // trigger: 'axis',
        // axisPointer: { 
        // type: 'cross',
        // crossStyle: { 
        // interval:false,
        // color: '#999'
        // }
        // }
        // },
        legend: { 
            data: ['蒸发量', '降水量', '平均温度'],
            icon: "roundRect", 
            itemWidth: 10,  // 设置宽度
            itemHeight: 10, // 设置高度
            left: '50px' ,
            textStyle: { 
                color: 'red' 
            }
        },
        xAxis: { 
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: { 
                type: 'shadow'
            },
            axisLabel: { 
                color: 'red'
            },
            axisTick: {  show: false },
            //设置轴线的属性
            axisLine:{ 
                lineStyle:{ 
                    color:'#ddd'
                }
            } 
    
        },
        yAxis: [
            { 
            type: 'value',
            // min: 0,
            // max: 250,
            // interval: 50,
            axisLabel: { 
                formatter: '{value} ml',
                color: 'red'
            },
            splitLine:{ 
        　　　　show:false
        　　},
            axisTick: {  show: false },
                //设置轴线的属性
                axisLine:{ 
                    lineStyle:{ 
                        color:'#ddd'
                    }
                } 
            },
            { 
                show: false,
                type: 'value',
                name: '温度',
                // min: 0,
                // max: 25,
                // interval: 5,
            }
        ],
        series: [
            { 
                name: '蒸发量',
                type: 'bar',
                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                itemStyle: { 
                    normal: { 
                        //柱形图圆角，初始化效果
                        barBorderRadius:[10, 10, 0, 0]
                    }
                }
            },
            { 
                name: '降水量',
                type: 'bar',
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                itemStyle: { 
                    normal: { 
                        //柱形图圆角，初始化效果
                        barBorderRadius:[10, 10, 0, 0]
                    }
                }
            },
            { 
                name: '降水量11',
                type: 'bar',
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                itemStyle: { 
                    normal: { 
                        //柱形图圆角，初始化效果
                        barBorderRadius:[10, 10, 0, 0]
                    }
                }
            },
            { 
                name: '平均温度',
                type: 'line',
                symbol: 'none',
                smooth: true,
                lineStyle: { 
                    color: 'red'
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70_pic_center]: /images/20210726/0190be027fc548859309bb04e95d0df6.png