1.案例1

1.1代码

option = {
  textStyle: {
    color: '#fff' // 标题文字颜色为白色
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    textStyle: {
      color: 'white'
    }
  },
  grid: {
    top: '15%',
    left: '4%',
    right: '4%',
    bottom: '7%',
    containLabel: true
  },
  xAxis:
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false // 隐藏Y轴的横线
      },
    },
  ],
  series: [
    {
      name: '供能',
      type: 'bar',
      barWidth: 8,
      data: [90, 50, 120, 132, 101, 134, 90, 230, 210, 150, 180, 220],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {offset: 1, color: '#42495d'},
            {offset: 0, color: '#f9564b'},
          ],
        },
        barBorderRadius: [10, 10, 0, 0],
      },
    },
    {
      name: '发电',
      type: 'bar',
      barWidth: 8,
      data: [80, 40, 220, 182, 191, 234, 290, 330, 310, 250, 280, 320],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {offset: 1, color: '#42495d'},
            {offset: 0, color: '#f3810d'},
          ],
        },
        barBorderRadius: [10, 10, 0, 0],
      },
    },
    {
      name: '供热',
      type: 'bar',
      barWidth: 8,
      data: [200, 210, 190, 222, 188, 233, 170, 165, 172, 200, 210, 211],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {offset: 1, color: '#414a5f'},
            {offset: 0, color: '#c1238d'},
          ],
        },
        barBorderRadius: [10, 10, 0, 0],
      },
    },
    {
      name: '供冷',
      type: 'bar',
      barWidth: 8,
      data: [0, 0, 0, 100, 150, 180, 200, 500, 420, 200, 0, 0],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {offset: 1, color: '#414a5f'},
            {offset: 0, color: '#06c9e1'},
          ],
        },
        barBorderRadius: [10, 10, 0, 0],
      },
    },
  ],
  barGap: '20%',
  barCategoryGap: '30%',
}

1.2效果展示

Echarts-柱状图-LMLPHP

2.案例2

2.1代码

option = {
  xAxis: {
    axisTick: {
      show: false
      // 不显示坐标轴刻度线
    },
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        width: 2
        // 设置坐标轴线粗细为2px
      },
      color: '#F5F5F5',
    },
    type: 'category',
    data: [
      '尖',
      '峰',
      '平',
      '谷'
    ],
    axisLabel: {
      color: 'white',
      // 设置 x 轴标签字体颜色为白色
      fontSize:16//调整坐标轴字体大小
    },
    
  },
  yAxis: {
    show: false,
    // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
    axisTick: {
      show: false
      // 不显示坐标轴刻度线
    },
    axisLine: {
      show: false,
      // 不显示坐标轴线
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    type: 'value'
  },
  grid: {
    top: '14%',
    left: '2%',
    right: '2%',
    bottom: '10%',
    containLabel: true
  },
  series: [
    {
      data: [
        {
          value: 200,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#bd0201'
                },
                {
                  offset: 0.5,
                  color: '#8f201a'
                },
                {
                  offset: 1,
                  color: '#59373b'
                }
              ]
            }
          }
        },
        {
          value: 300,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#fc5622'
                },
                {
                  offset: 0.5,
                  color: '#b6482c'
                },
                {
                  offset: 1,
                  color: '#723b32'
                }
              ]
            }
          }
        },
        {
          value: 210,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#1780fb'
                },
                {
                  offset: 0.5,
                  color: '#0968b8'
                },
                {
                  offset: 1,
                  color: '#0b4a74'
                }
              ]
            }
          }
        },
        {
          value: 150,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#09c60b'
                },
                {
                  offset: 0.5,
                  color: '#067f19'
                },
                {
                  offset: 1,
                  color: '#0e422d'
                }
              ]
            }
          }
        }
      ],
      type: 'bar',
      barWidth: 20,
      // 设置柱子的宽度
      smooth: true,
      barGap: '20%',
      colorBy: 'data',
      label: {
        show: true,
        position: 'top',
        formatter:'{c}kWh',
        //  position: 'inside',
            color: '#A0FBFF'
      }
    }
  ],
  color: [
    '#1ED6FF',
    '#FFB135',
    '#999999',
    '#CCFFFF'
  ],
  tooltip: {
    // 鼠标悬浮提示框显示 X和Y 轴数据
    trigger: 'axis',
		    backgroundColor: 'rgba(32, 33, 36,.7)',
    borderColor: 'rgba(32, 33, 36,.7)',
    borderWidth: 10,
    textStyle: {
      // 文字提示样式
      color: 'white',
      fontSize: '10'
    },
    axisPointer: {
      // 坐标轴虚线
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    },
  }
}

2.2效果展示

Echarts-柱状图-LMLPHP

3.案例3

3.1代码

option ={
    "color": "#8CCBFF", 
    "xAxis": {
        "axisTick": {
            "show": false
        }, 
        "axisLine": {
            "lineStyle": {
                "width": 2
            }
        }, 
        "type": "category", 
        "data": [
            "1月", 
            "2月", 
            "3月", 
            "4月", 
            "5月", 
            "6月"
        ], 
        "axisLabel": {
            "color": "white"
        }
    }, 
    "yAxis": {
        "show": false, 
        "axisTick": {
            "show": false
        }, 
        "splitLine": {
            "show": false
        }, 
        "axisLabel": {
            "show": false
        }, 
        "type": "value"
    }, 
    "grid": {
        "top": "15%", 
        "left": "2%", 
        "right": "2%", 
        "bottom": "0%", 
        "containLabel": true
    }, 
    "series": [
        {
            "data": [
                4, 
                5, 
                6, 
                3, 
                5, 
                4
            ], 
            "type": "bar", 
            "barGap": "20%", 
            "barWidth": 20, 
            "smooth": true, 
            "itemStyle": {
                "color": {
                    "type": "linear", 
                    "x": 0, 
                    "y": 0, 
                    "x2": 0, 
                    "y2": 1, 
                  "colorStops": [
    {
        "offset": 0.01,
        "color": "rgba(0, 85, 255, 0.0001)"
    },
    {
        "offset": 1,
        "color": "#0783FA"
    }
],

                    "global": false
                }
            }, 
            "label": {
                "show": true, 
                "position": "top", 
                "color": "white",
								 "formatter":"{c}kWh",
            }
        }
    ],  
    "tooltip": {
        "trigger": "axis", 
        "backgroundColor": "rgba(32, 33, 36,.7)", 
        "borderColor": "rgba(32, 33, 36,0.20)", 
        "borderWidth": 10, 
        "textStyle": {
            "color": "#fff", 
            "fontSize": "10"
        }, 
        "axisPointer": {
            "type": "cross", 
            "label": {
                "backgroundColor": "#6a7985"
            }
        }
    }
}

3.2效果展示

Echarts-柱状图-LMLPHP

4.案例4

4.1代码

option ={
  title: {
    // text: 'World Population'
  },
  tooltip: {
    backgroundColor: 'rgba(32, 33, 36,.7)',
    borderColor: 'rgba(32, 33, 36,0.20)',
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    textStyle: {
      color: '#ffffff',
      fontSize: '10'
    }
  },
  legend: {
    textStyle: {
      color: 'white'
    },
    top:-1,
    icon: 'roundRect',
    itemHeight: 2,

  },
  grid: {
    top: '15%',
    left: '4%',
    right: '4%',
    bottom: '7%',
    containLabel: true
  },
  xAxis: {
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#FFFFFF'
    },
    type: 'category',
    data: [
      'Brazil',
      'Indonesia',
      'USA',
      'India',
      'China',
      'World'
    ]
  },
  yAxis: {
    boundaryGap: [
      0,
      0.01
    ],
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    type: 'value'
  },
  series: [
    {
      itemStyle: {
        normal: {
          // 柱形图圆角,初始化效果
          //          barBorderRadius: [
          //            30,
          //            30,
          //            0,
          //            0
          //          ],
          // 设置颜色渐变
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#2199fa'
              },
              {
                offset: 0.5,
                color: '#126AB2FF'
              },
              {
                offset: 1,
                color: '#013B65FF'
              }
            ]
          },

        }
      },
      name: '2012',
      type: 'bar',
      stack: 'Ad',//多个柱子合并在一起
      data: [
        19325,
        23438,
        31000,
        121594,
        134141,
        681807
      ],
      barWidth: '40%'
    },
    {
      itemStyle: {
        normal: {
          // 柱形图圆角,初始化效果
          //          barBorderRadius: [
          //            30,
          //            30,
          //            0,
          //            0
          //          ],
          // 设置颜色渐变
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#02D883FF'
              },
              {
                offset: 0.5,
                color: '#029C5FFF'
              },

              {
                offset: 1,
                color: '#037044FF'
              }
            ]
          },
        }
      },
      name: '2013',
      type: 'bar',
      stack: 'Ad',//多个柱子合并在一起
      data: [
        18000,
        20000,
        39034,
        100000,
        100000,
        600000
      ],
      barWidth: '40%'
    }
  ]
}



4.2效果展示

Echarts-柱状图-LMLPHP

5.案例5

5.1代码

option ={
    "grid": {
        "top": "20%", 
        "bottom": "17%"
    }, 
    "tooltip": {
        "trigger": "axis", 
        "backgroundColor": "rgba(32, 33, 36,.7)", 
        "borderColor": "rgba(32, 33, 36,0.20)", 
        "borderWidth": 10, 
        "textStyle": {
            "color": "#fff", 
            "fontSize": "8"
        }, 
        "axisPointer": {
            "type": "cross", 
            "label": {
                "backgroundColor": "#6a7985"
            }
        }
    }, 

    "xAxis": {
        "type": "category", 
        "boundaryGap": true, 
        "axisLabel": {
            "interval": 0, 
            "color": "white", 
            "fontSize": 8
        }, 
        "data": [
            "设计", 
            "实际"
        ]
    }, 
    "yAxis": {
        "type": "value", 
        "splitLine": {
            "show": false
        }, 
        "axisLabel": {
            "show": false
        }
    }, 
    "series": [
        {
            "name": "发电时长", 
            "barWidth": 20, 
            "type": "bar", 
                      "data": [
               3.34,12
            ], 
              "color": {
                            "type": "linear", 
                            "x": 0, 
                            "y": 0, 
                            "x2": 0, 
                            "y2": 1, 
                            "colorStops": [
                                {
                                    "offset": 0, 
                                    "color": "rgba(24, 130, 255, 1)"
                                }, 
                                {
                                    "offset": 1, 
                                    "color": "rgba(54, 235, 202, 1)"
                                }
                            ]
                        }
        }
    ]
}

5.2效果展示

Echarts-柱状图-LMLPHP 

07-03 05:55