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

前言

     实现如下效果图

解决方法

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]
        }
    ]
};