快速修改echarts图表样式,复制直接使用

echarts图表样式

 以下代码可以在vue中直接复制使用,如果需要修改图表的展示样式,只需要修改option的配置项就可以快速实现,具体代码如下

在template标签中,定义一个echarts容器,可以自行修改容器的样式

<template>
  <div class="container">
    <div class="time">
      <span>设备昨日电量 TOP 5</span>
    </div>
    <div id="topFive" class="echarts"></div>
  </div>
</template>

ecahrts图表建议封装成一个组件

<script>
export default {
  name: "warning",
  props: ["yesterday"],//父组件传递的值
  data() {
    return {
      yesterdayData: [],
      equipment: [], //设备名称
      sumData: [], //电量
    };
  },
  mounted() {
    this.drawChart();
  },
  watch: {
    //监听父组件传递的值是否有变化,将最新值进行渲染
    yesterday(newValue, oldValue) {
      this.yesterdayData = newValue;
      this.yesterdayData.map((item) => {
        this.equipment.push(item.name);
        this.sumData.push(item.sumData);
      });
      this.drawChart();
    },
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("topFive"));
      // 指定图表的配置项和数据,每次修改图echarts表样式只修要重新配置option即可
      let option = {
        backgroundColor: "#041820",
        tooltip: {
          show: false,
          confine: true,
        },
        legend: {
          icon: "rect",
          orient: "horizontal",
          left: "right",
          itemWidth: 14,
          itemHeight: 12,
          padding: [
            5, // 上
            10, // 右
            5, // 下
            10, // 左
          ],
          itemStyle: {
            color: "#00CBFF",
          },
          formatter: ["{a|{name}}"].join("\n"),
          textStyle: {
            fontSize: 12,
            color: "#fff",
            height: 8,
            rich: {
              a: {
                verticalAlign: "bottom",
              },
            },
          },
          data: ["电量(度)"],
        },
        grid: {
          left: "17%",
          right: "0",
          bottom: "0",
          top: "10%",
        },
        xAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.15)",
            },
          },
          splitArea: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: [],
            axisLabel: {
              fontSize: 13,
              align: "left",
              color: "#fff",
              // formatter(value, index) {
              //   let str = "",
              //     num = index + 1;
              //   if (index < 3) {
              //     str = "{a|" + num + "} {title| " + value + "}";
              //   } else {
              //     str = "{b|" + num + "} {title| " + value + "}";
              //   }
              //   return str;
              // },
              rich: {
                a: {
                  align: "center",
                  padding: [0, 0, 2, 0],
                  width: 15,
                  height: 15,
                  color: "#fff",
                  // backgroundColor: { image: ranka },
                },
                b: {
                  padding: [0, 0, 2, 0],
                  align: "center",
                  width: 15,
                  height: 15,
                  color: "#fff",
                  // backgroundColor: { image: rankn },
                },
              },
            },
            offset: 80,
            data: this.equipment,
          },
          {
            type: "category",
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              color: "rgba(255, 255, 255, 0.85)",
              inside: false,
            },
            data: [],
          },
          {
            type: "category",
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              fontSize: 14,
              color: "#F53F3F",
              inside: false,
            },
            data: [],
          },
        ],
        series: [
          {
            z: 2,
            name: "电量(度)",
            type: "bar",
            zlevel: 1,
            barWidth: 30,
            itemStyle: {
              normal: {
                barBorderRadius: 20,
                label: {
                  show: true,
                  position: "top",
                  color: "#00CBF1",
                  fontFamily: "Bebas",
                  fontSize: 16,
                },
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(32, 75, 255, 0.07)", //  0%  处的颜色
                    },
                    {
                      offset: 0.7,
                      color: "rgba(83, 203, 255, 0.92)", //  100%  处的颜色
                    },
                    {
                      offset: 1,
                      color: "#56ACFF", //  100%  处的颜色
                    },
                  ],
                  global: false, //  缺省为  false
                },
              },
            },
            data: this.sumData,//图表动态数据
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

样式内容如下

<style scoped>
.container {
  overflow: hidden;
  background-color: #041820 !important;
  height: 100%;
}
.time {
  text-align: center;
  font-size: 25px;
  font-family: Myriad Pro;
  font-weight: bold;
  color: #00cbff;
  line-height: 36px;
}
.echarts {
  width: 100%;
  height: calc(100% - 36px);
}
</style>