• echarts柱状图Demo


    echarts链接:http://gallery.echartsjs.com/editor.html?c=xB1Sfo5JbX

    代码:

    var xData = ['a', 'b', 'c', 'd', 'e'];
    var yData = [80, 87, 51, 81, 23];
    option = {
        backgroundColor: 'black',
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                lineStyle: {
                     5 //显示提示线
                }
            },
           /* axisPointer: { //不显示提示线
                type: 'line',//none
                lineStyle: {
                    opacity: 0
                }
            },*/
            formatter: function(prams) {
                return "数量:" + prams[0].data
            }
            //formatter: "{a} <br/>{b} : {c} "
        },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '7%',
            containLabel: true,
            z: 22
        },
        xAxis: [{
            type: 'category',
            gridIndex: 0,
            data: xData,
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                lineStyle: {
                    color: 'white',
                }
            },
            axisLabel: {
                show: true,
                color: 'white',
                textStyle: {
                    fontSize: 18
                }
            }
        }],
        yAxis: [{
            type: 'value',
            gridIndex: 0,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'white',
                }
            },
            axisLabel: {
                color: 'white',
                formatter: '{value}',
                textStyle: {
                    fontSize: 18
                }
            }
        }],
        series: [{
                name: '数量',
                type: 'bar',
                barWidth: '30%',
                xAxisIndex: 0,
                yAxisIndex: 0,
                label: {
                    normal: {
                        show: true,
                        position: "top",
                        textStyle: {
                            color: "#ffc72b",
                            fontSize: 20
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00feff'
                                },
                                {
                                    offset: 0.5,
                                    color: '#027eff'
                                },
                                {
                                    offset: 1,
                                    color: '#0286ff'
                                }
                            ]
                        )
                    }
                },
                data: yData,
                zlevel: 11
    
            },
    
        ]
    };
  • 相关阅读:
    Turtlebot-导航
    Turtlebot-创建地图-Gmapping-Kinect
    Gflags
    Linux Driver 入门
    Linux Kernel 入门
    Linux Driver 入门
    Linux Driver 入门
    Linux Driver 入门
    Win10 复制文件路径
    vs2010 nuget 基础连接已经关闭:发送时发生错误
  • 原文地址:https://www.cnblogs.com/raitorei/p/9933625.html
Copyright © 2020-2023  润新知