ECharts3实例定制XY轴、柱状图

电玩女神 2021-07-27 00:42 526阅读 0赞

### 前言 ###

实现如下效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70_pic_center]

### 解决方法 ###

option = { 
        
        xAxis: { 
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {  
                type: 'shadow'
            },
            axisLabel: { 
                color: 'red'
            },
            axisTick: {  show: false },
            //设置轴线的属性
            axisLine:{ 
                lineStyle:{ 
                    color:'#ddd'
                }
            } 
        },
        yAxis: { 
            type: 'value',
            axisLabel: { 
                formatter: '{value} ml',
                color: '#fff'
            },
             axisLine:{ 
                lineStyle:{ 
                    color:'#fff'
                }
            },
            splitLine:{ 
                lineStyle: { 
                    type: 'dashed',
                    width: 2,
                    color: 'red'
                }
        　　}
        },
        series: [{ 
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barMaxWidth: 40,
            itemStyle: { 
                normal: { 
                    color: 'blue',
                    //柱形图圆角，初始化效果
                    barBorderRadius:[20, 20, 0, 0]
                }
            },
        }]
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70_pic_center]: /images/20210726/98c744a9b3e0460594285eb8d937dbb4.png