zoukankan      html  css  js  c++  java
  • Echarts 背景渐变柱状图

    var dom = document.getElementById("container");
    var myChart1 = echarts.init(dom);
    var app = {};
    option1 = null;
     //初始化数据
        var category = ['深圳市', '东莞市', '广州市', '惠州市', '北京市', '上海市', '武汉市'];
        var barData = [7913, 4910, 3810, 2054, 988, 3979, 818];
    
        var option1 = {
            title: {
                text: '柱状图示例',
                    textStyle: {
                        color: '#03a9f4'
                    }
            },
                    legend: {
                        data:['用户数']
                    },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '16%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#ff0"
                    }
                },
                axisLabel: {
                    rotate:45,      //倾斜度 -90 至 90 默认为0
                    show: false
                },
                axisTick: {
                    show: false
                },
                 splitLine: {           // 分隔线
                    show: false,        // 默认显示,属性show控制显示与否
                },
            },
    
    
            yAxis: {
                type: 'category',
                data: category,
    
                splitLine: {           // 分隔线
                    show: false,        // 默认显示,属性show控制显示与否
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#ff0"
                    }
                },
                axisTick: {
                    show: false
                },
                offset: 10,
            },
            series: [
                {
                    name: '数量',
                    type: 'bar',
                    data: barData,
                    barWidth: 14,
                    // barGap: 10,
                    // smooth: true,
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            offset: [5, -2],
                            textStyle: {
                                color: '#F68300',
                                fontSize: 13
                            }
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            barBorderRadius: 7
                        },
                        normal: {
                            barBorderRadius: 7,
                            color: function(params){
                                var colorList = [
                                    ['#3977E6','#37BBF8'],
                                    ['#E8576C','#661C5A']
                                ]
                                for(let i=0;i<barData.length;i++){
                                    if(barData[params.dataIndex] <= 3000){
                                        return new echarts.graphic.LinearGradient(
                                            0, 0, 1, 0,
                                            [
                                                {offset: 0, color: '#3977E6'},
                                                {offset: 1, color: '#37BBF8'}
                                            ])
                                    }else{
                                        return new echarts.graphic.LinearGradient(
                                            0, 0, 1, 0,
                                            [
                                                {offset: 0, color: '#E8576C'},
                                                {offset: 1, color: '#661C5A'}
    
                                            ])
                                    }
                                }
                            }
                        },
                    },
                },
    
            ]
        };
    
    if (option1 && typeof option1 === "object") {
        myChart1.setOption(option1, true);
    }
  • 相关阅读:
    mysql 导入导出
    spring3.1 profile 配置不同的环境
    <context:annotation-config />和 <context:component-scan
    NPM 使用介绍
    产品每生产一个消费一个
    通过Lock对象以及Condition对象实现多线程同步
    Spring定时任务的几种实现
    详解java定时任务
    设计模式-享元模式
    堆栈简析
  • 原文地址:https://www.cnblogs.com/minjh/p/9068261.html
Copyright © 2011-2022 走看看