real3d-portalsite/src/components/echartsTemplate/bar.vue

<template>
  <div id="bar_echart" ref="echart"></div>
</template>

<script>
import { cloneDeep } from "lodash";
let option = {
  backgroundColor: "rgba(0,0,0,0)",
  tooltip: {
    backgroundColor: "RGBA(20, 106, 178, 0.4)",
    trigger: "axis",
    textStyle: {
      fontSize: 14,
      color: "#fff",
    },
  },
  grid: {
    left: "5%",
    right: "4%",
    bottom: "5%",
    top: "20%",
    containLabel: true,
  },
  legend: {
    data: [], //"收储面积", "收储个数"
    left: "7%",
    top: "5%",
    textStyle: {
      color: "#666666",
    },
    itemWidth: 15,
    itemHeight: 10,
    itemGap: 25,
    show: false,
  },
  xAxis: {
    axisTick: { show: false },
    axisLine: { lineStyle: { color: "#BCD3E5" } },
    axisLabel: {
      textStyle: { fontSize: 12, color: "#BCD3E5" },
    },
    axisLabel: {
      interval: 0,
      formatter: function (value) {
        // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
        if (value.length > 4) {
          return `${value.slice(0, 4)}...`;
        } else {
          return value;
        }
      },
    },
    data: [],
  },
  yAxis: [
    {
      type: "value",
      name: "",
      nameTextStyle: {
        color: "#ffffff",
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "rgba(163, 163, 163, 0.5)",
          type: "dashed",
        },
      },
      axisLabel: {
        color: "#A0A4AA",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(65, 97, 128, 0.5)",
        },
      },
    },
    {
      // name: obj.yAxis ? obj.yAxis[0].name : "项目个数/个",
      //       nameTextStyle: {
      //         color: "#fff",
      //         fontSize: 12,
      //         padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
      //       },
      type: "value",
      name: "",
      nameTextStyle: {
        color: "#ffffff",
      },
      position: "right",
      axisLine: {
        lineStyle: {
          color: "#cdd5e2",
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
        formatter: "{value} %", //右侧Y轴文字显示
        textStyle: {
          color: "#666666",
        },
      },
    },
  ],
  series: [],
};
// 柱体
let seriesItem = {
  name: "", //收储面积
  type: "bar",
  barWidth: "12px",
  itemStyle: {
    normal: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: "#409EFF",
        },
        {
          offset: 1,
          color: "rgba(24, 253, 255, 0)",
        },
      ]),
    },
  },
  data: [],
};
let lineItem = {
  name: "", //收储个数
  type: "line",
  smooth: true,
  itemStyle: {
    normal: {
      color: "#FFCC64", // 折线的颜色
    },
  },
  data: [],
};
export default {
  name: "bar_echart",
  props: {
    unit: {
      type: String,
      default: "km²", //"平方千米",
    },
  },
  components: {},
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    setOptions(v) {
      let _this = this;
      if (!this.myChart) {
        // var dom = document.getElementById("bar_echart");
        this.myChart = echarts.init(this.$refs.echart);
      }
      option.legend.data = v.legend;
      option.xAxis.data = v.xData;
      option.yAxis[0].name = "变化面积/km²";
      option.series = [];
      v.yData.forEach((item, k) => {
        let o = cloneDeep(seriesItem); // JSON.parse(JSON.stringify(seriesItem));
        o.name = v.xData[k];
        o.data = item;
        // alldata = [...alldata, ...o.data];
        // if (v.interval) {
        //   option.xAxis.axisLabel.interval = 0;
        //   option.xAxis.axisLabel.rotate = 0;
        // }
        option.series.push(o);
      });
      this.myChart.resize();
      this.myChart.setOption(option);

      this.myChart.on("click", function (params) {
        _this.$emit("echartClick", params.name, { color: params.color });
      });
    },
  },
  mounted() {
    // this.setOptions();
  },
};
</script>
<style lang="scss" scoped>
.bar_echart {
  width: 100%;
  height: 100%;
}
</style>