zoukankan      html  css  js  c++  java
  • echarts横向倒叙柱状图

    activityRankBar(type) {
    let xAxis = [];
    let yData = [];
    let current = [];
    let name = "";
    let myChart = "";
    if (type == "partyActivity") {
    current = this.PartyActivityRank;
    name = "党组织党建活动排名";
    myChart = echarts.init(_document.getElementById("partyActivityRank"));
    } else {
    current = this.VolunteerActivityRank;
    name = "党组织志愿活动排名";
    myChart = echarts.init(
    _document.getElementById("volunteerActivityRank")
    );
    }
    for (let i = 0; i < current.length; i++) {
    xAxis.push(current[i].text);
    yData.push(current[i].count);
    }
    let option = {
    tooltip: {
    trigger: "axis",
    axisPointer: {
    type: "shadow"
    }
    },
    grid: {
    left: "3%",
    right: "4%",
    bottom: "2%",
    top: "3%",
    containLabel: true
    },
    xAxis: {
    axisLine: {
    show: false
    },
    axisTick: {
    show: false
    },
    splitLine: {
    show: false //不显示分割线
    },
    minInterval: 1,
    show: false
    },
    yAxis: {
    type: "category",
    data: xAxis,
    inverse: true,//倒叙
    splitLine: {
    show: false
    },
    axisLine: {
    show: false
    },
    axisTick: {
    show: false
    },
    axisLabel: {
    interval: 0
    },
    offset: 10,
    nameTextStyle: {
    fontSize: 12
    }
    },
    series: [
    {
    name: "数量",
    type: "bar",
    data: yData,
    barWidth: 14,
    barGap: 10,
    smooth: true,
    label: {
    normal: {
    show: true,
    position: "right",
    offset: [5, -2],
    textStyle: {
    color: "black",
    fontSize: 12
    }
    }
    },
    itemStyle: {
    normal: {
    color: function(params) {
    var colorList = ["#9b0b11", "#777777"];
    var index = 0;
    if (params.dataIndex > 2) {
    index = 1;
    }
    return colorList[index];//前三列与之后列颜色区分
    }
    }
    }
    }
    ]
    };
    myChart.setOption(option);
    }

    如图:

  • 相关阅读:
    linux内存和swap
    Linux awk sort
    redis aof和rdb区别
    STL中的map、unordered_map、hash_map
    mysql 冷热备份
    redis
    linux 几个命令
    linux erase
    group by
    现在很多技术知识点缺乏来龙去脉的介绍
  • 原文地址:https://www.cnblogs.com/yyjspace/p/11645800.html
Copyright © 2011-2022 走看看