zoukankan      html  css  js  c++  java
  • echarts画柱状图

    drawLeftHistogram(){
              let Histogram = echarts.init(document.getElementById('data-left-bottom-table-wrap'));
              let option = null;
              option = {
                tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                // color:['#00C0FF','#FFDC5C'],
                icon: "circle",
                legend: {
                    x:'200px',
                    y:'10px',
                    data:['总人数','刷脸人数'],
                    textStyle:{
                      fontSize: 14,//字体大小
                      color: '#BBF6FF'//字体颜色
                    },
    
                },
                grid: {
                    left: '0px',
                    // right: '0px',
                    bottom: '0px',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    name:'人数',
                    nameGap:'15',
                    show:true,
                    axisLabel:{
                      textStyle:{
                        color:'white'
                      }
                    },
                    splitArea : {
                      show : false,
                    },
                    splitLine : {
                      show :false,
                    },
                    axisLine:{
                      lineStyle:{
                          color:'#BBF6FF',
                          2,
                      },
                      symbol:['none','arrow']
                    },
                },
                yAxis: {
                    type: 'category',
                    data: ['运营部','研发部','品牌部','人事部'],
                    name:'部门',
                    show:true,
                    axisLabel:{
                      textStyle:{
                        color:'white'
                      }
                    },
                    splitArea : {
                      show : false,
                    },
                    splitLine : {
                      show :false,
                    },
                    axisLine:{
                      lineStyle:{
                          color:'#BBF6FF',
                          2,
                      },
                      symbol:['none','arrow']
                    },
                },
                series: [
                    {
                        name: '总人数',
                        barWidth : 12,
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                textStyle: {
                                  color: 'white'
                                }
                            }
                            },
                        itemStyle: {
                                emphasis: {
                                    barBorderRadius: 7
                                },
                                normal: {
                                    barBorderRadius: 7,
                                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        color: "#2A86FF" // 0% 处的颜色
                                    }, {
                                        offset: 0.6,
                                        color: "#22A8FF" // 60% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: "#1BCBFF" // 100% 处的颜色
                                    }], false)
                                }
                        },
                        data: [53, 55, 84, 32]
                    },
                    {
                        name: '刷脸人数',
                        barWidth : 12,
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                textStyle: {
                                  color: 'white'
                                }
                            }
                            },
                          itemStyle: {
                                  emphasis: {
                                      barBorderRadius: 7
                                  },
                                  normal: {
                                    barBorderRadius: 7,
                                      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                          offset: 0,
                                          color: "#1CA485" // 0% 处的颜色
                                      }, {
                                          offset: 0.6,
                                          color: "#35C980" // 60% 处的颜色
                                      }, {
                                          offset: 1,
                                          color: "#50F279" // 100% 处的颜色
                                      }], false)
                                  }
                          },
                        data: [43, 45, 35, 26]
                    }
                ]
            };
            if (option && typeof option === "object") {
                Histogram.setOption(option);
            }
          }

  • 相关阅读:
    人机猜拳
    M1分数分配
    postmortem report of period M1
    视频文档分享网站场景测试说明书
    功能规格说明书
    11.9Daily Scrum
    11.6Daily Scrum
    需求博客
    11.5Daily Scrum
    11.3Daily Scrum
  • 原文地址:https://www.cnblogs.com/sweeeper/p/11957158.html
Copyright © 2011-2022 走看看