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);
    }
  • 相关阅读:
    为什么要前后端分离?有什么优缺点
    剑指offer-面试题21.包含min函数的栈
    操作系统典型调度算法
    那些年的那些事CISC和RISC发展中的纠缠
    基于MFC与第三方类CWebPage的百度地图API开发范例
    Linux进程通信----匿名管道
    续前篇-关于逆波兰表达式的计算
    逆波兰表达式的实现(也叫后缀表达式)
    剑指offer-面试题20.顺时针打印矩阵
    剑指offer-面试题.二叉树的镜像
  • 原文地址:https://www.cnblogs.com/minjh/p/9068261.html
Copyright © 2011-2022 走看看