echarts 柱状图 - 一条条椭圆形状累计的柱状图

最新推荐文章于 2024-05-16 22:21:23 发布

策码奔腾---嘚驾~

最新推荐文章于 2024-05-16 22:21:23 发布

阅读量745

点赞数

本文链接：https://blog.csdn.net/qq_42489210/article/details/118093747

版权

Echarts 柱状图水质评分图表设计前端开发

关键词由CSDN通过智能技术生成

function waterQualityGrade (){
    var cw = document.body.clientHeight / 70;

    var textStyle = {
        fontSize : cw,
        color: "rgba(255,255,255,0.6)",
    }
    var  axisLabel = {
        show: true,
        textStyle: {
            fontSize:cw,
            color: "rgba(255,255,255,0.6)"
        }
    }
    var axisLine = {
        lineStyle: {
            color:"rgba(221,221,221,0.1)",
        }
    }

    var lineStyle = {
        color: "rgba(221,221,221,0.1)",
    }

    //柱状图、折线图等的用这个
    var tooltipAxis = {
        trigger: 'axis',
        backgroundColor:'rgba(26,34,126,.9)',
        padding:10,
        borderRadius: 4,
        textStyle:{
            fontSize:12,
        },
        extraCssText:'box-shadow:0 0 18px rgba(255,255,255,0.2)'
    }


    var waterQualityGrade = echarts.init(document.getElementById('waterQualityGrade'));

    var option ={
        title: {
            text: '单位：分数',
            textStyle:textStyle ,
            show:true
        },
        tooltip: tooltipAxis,
        legend: {
            data:['得分'],
            inactiveColor :'rgba(92,200,255,0.35)',
            icon:'roundRect',
            top:0,
            right:0,
            textStyle: {
                color: 'rgba(92,200,255,1)'
            },
            itemWidth:1.6*cw,
            itemHeight:0.5*cw,
            show:true
        },
        grid: {
            left: '2%',
            right: '3%',
            bottom: '0',
            top:"18%",
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLabel:axisLabel,
            axisLine:axisLine,
            axisTick:{
                show:true,
                inside:true
            },
            splitLine : {
                show : false
            },
            data: [200, 200, 200, 200, 200, 200, 200, 200, 200, 200],
        },
        yAxis: {
            type: 'value',
            axisLabel:axisLabel,
            axisLine:axisLine,
            axisTick:{ //y轴刻度线
                show:false
            },
            splitLine:{
                show: true,
                lineStyle: lineStyle,
            },
        },
        series: [ {
            name: '得分',
            stack: '总量',
            type: 'pictorialBar',
            symbol: 'roundRect',
            itemStyle: {
                color: 'rgba(72,252,255,1)'
            },
            barWidth: '20%',
            symbolRepeat: true,
            symbolSize: [1*cw, 0.15*cw],
            // symbolBoundingData: 100,
            symbolMargin: 1,
            symbolPosition: 'start',
            z: -20,
            data: [200, 200, 200, 200, 200, 200, 200, 200, 200, 200],
            label: {
                normal: {
                    show: false,
                    position: 'top',
                    verticalAlign: 'top'
                    // formatter: function(value){
                    //   return value && (value.data * 100).toFixed(1) + '%'
                    // }
                }
            }
        },{
            name: '全部',
            type: 'pictorialBar',
            symbol: 'roundRect',
            tooltip:{
                show:false
            },
            itemStyle: {
                color: 'rgba(27,183,255,0.14)'
            },
            barWidth: '20%',
            symbolRepeat: true,
            symbolSize: [1*cw, 0.15*cw],
            // symbolBoundingData: 100,
            symbolMargin: 1,
            symbolPosition: 'start',

            label: {
                show: false
            },
            z: -10,
            data: [200, 200, 200, 200, 200, 200, 200, 200, 200, 200]
        }]
    };

    waterQualityGrade.setOption(option);
}