zoukankan      html  css  js  c++  java
  • echarts-柱状图-渐变分隔图

    先看效果图:

      <div style=" 462px; height: 230px" id="energyRightTopShui2"></div>
    

      

    //自适应字体大小变化
    WidthAdaptive(res) {
          var windth = window.innerWidth;
          let fontSize = windth / 1920;
          return fontSize * res;
        },
        drawLine() {
          // 基于准备好的dom,初始化echarts实例
          let myChart = this.$echarts.init(
            document.getElementById("energyRightTopShui2")
          );
          let datas = [510, 510, 900, 1100, 510, 510, 510, 510];
          let option = {
            backgroundColor: "transparent",
            animation: true,
            grid: {
              top: "15%",
              bottom: "10%",
              right: "5%",
            },
            xAxis: {
              data: ["02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00"],
              axisLine: {
                show: true, //隐藏X轴轴线
                lineStyle: {
                  type: "solid",
                  color: "rgba(255,254,253,.5)",
                },
              },
              axisTick: {
                show: false, //隐藏X轴轴线
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "rgba(77, 128, 254, 0.2)",
                   this.WidthAdaptive(2),
                },
              },
              axisLabel: {
                show: true,
                fontSize: this.WidthAdaptive(12),
                textStyle: {
                  color: "#ccc", //X轴文字颜色
                },
              },
            },
            yAxis: [
              {
                name: "单位(KWH)",
                nameTextStyle: {
                  color: "#CCCCCC",
                  fontSize: this.WidthAdaptive(12),
                  margin: 10,
                },
                type: "value",
                gridIndex: 0,
                interval: 250,
                // splitNumber: 4,
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: "dashed",
                    color: "rgba(122,112,112,.5)",
                     this.WidthAdaptive(2),
                  },
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: "solid",
                    color: "rgba(255,254,253,.5)",
                  },
                },
                axisLabel: {
                  show: true,
                  fontSize: this.WidthAdaptive(12),
                  textStyle: {
                    color: "#ccc",
                  },
                },
              },
            ],
            series: [
              {
                name: "设备在线率",
                type: "bar",
                barWidth: this.WidthAdaptive(26),
                itemStyle: {
                  normal: {
                    color: function (params) {
                      if (params.data > 1000) {
                        console.log("sadasdsad");
                        return new vm.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: "rgba(255, 128, 0, 1)",
                          },
    
                          {
                            offset: 1,
                            color: "rgba(255, 128, 0, 0)",
                          },
                        ]);
                      } else if (params.data > 800 && params.data < 1000) {
                        return new vm.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: "rgba(255, 221, 1, 1)",
                          },
    
                          {
                            offset: 1,
                            color: "rgba(255, 221, 1, 0)",
                          },
                        ]);
                      } else {
                        return new vm.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: "rgba(19,152,107, 1)",
                          },
    
                          {
                            offset: 1,
                            color: "rgba(19,152,107, 0)",
                          },
                        ]);
                      }
                    },
                  },
                },
                data: datas,
                z: 10,
                zlevel: 0,
              },
              {
                // 分隔
                type: "pictorialBar",
                itemStyle: {
                  normal: {
                    color: "#0F375F",
                  },
                },
                symbolRepeat: "fixed",
                symbolMargin: 2,
                symbol: "rect",
                symbolClip: true,
                symbolSize: [26, 2],
                symbolPosition: "start",
                symbolOffset: [6, 1],
                data: datas,
                 this.WidthAdaptive(2),
                z: 0,
                zlevel: 1,
              },
              {
                name: "外框",
                type: "bar",
                barGap: "-110%", // 设置外框粗细
                data: [100, 100, 100, 100, 100, 100, 100],
                barWidth: 16,
                itemStyle: {
                  normal: {
                    color: "transparent", // 填充色
                    // barBorderRadius: 0, //圆角半径
                    label: {
                      // 标签显示位置
                      show: false,
                      position: "top", // insideTop 或者横向的 insideLeft
                    },
                  },
                },
                z: 0,
              },
            ],
          };
          window.onresize = function () {
            myChart.resize();
          };
          myChart.setOption(option);
        },
  • 相关阅读:
    JavaScript数组去重(12种方法,史上最全转载)
    数组从大到小排序的两种方式
    jquery.inArray()和splice()使用小记
    HbuilderX 线上打包Android9.0版本无法更新
    常见的移动端H5页面开发遇到的坑和解决办法
    监听点击物理返回键及mui.fire父子页面传参
    深入理解DOM事件类型系列第三篇——变动事件
    jquery监听div等元素的内容变化
    寒假进度3
    寒假进度2
  • 原文地址:https://www.cnblogs.com/a973692898/p/15423935.html
Copyright © 2011-2022 走看看