vue：echarts多条柱状图数据的渲染

需求：对多柱状图进行数据渲染

<template>
  <div>
    <div id="myChart" style="width: 100%; height: calc(100vh - 300px)"></div>
  </div>
</template>

<script>
const labelOption = {
  show: true,
  verticalAlign: "middle",
  formatter: "{a}",
};
export default {
  data() {
    return {
      defectsCategory: [
        "苹果",
        "香蕉",
        "橙子",
        "橘子",
        "菠萝",
        "草莓",
        "梨子",
        "西瓜",
      ],
      tatolEcharts: [
        {
          time: "2020/2/2",
          defects: [],
        },
        {
          time: "2020/2/3",
          defects: [
            {
              name: "草莓",
              count: "1232",
            },
            {
              name: "香蕉",
              count: "1232",
            },
          ],
        },
        {
          time: "2020/2/11",
          defects: [
            {
              name: "西瓜",
              count: "3333",
            },
            {
              name: "苹果",
              count: "5454",
            },
          ],
        },
        {
          time: "2020/3/2",
          defects: [
            {
              name: "苹果",
              count: "4232",
            },
            {
              name: "西瓜",
              count: "3232",
            },
            {
              name: "草莓",
              count: "6232",
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.drawLine(this.tatolEcharts);
  },
  methods: {
    drawLine(value) {
      console.log(value, this.defectsCategory);
      let obj = {};
      let series = [];
      //y轴的数量要与series的data数组长度相等
      let yData = value.map((item) => {
        this.defectsCategory.forEach((name) => {
          // console.log(obj[name])
          //判断obj是否存在name值，如果obj[name]不存在，就加入一个'-'进去
          if (obj[name]) {
            obj[name].push("-");
          }else{
            obj[name]=["-"];
          }
        });
        return item.time;
      });
      console.log(obj);
      //对value进行遍历
      value.forEach((item,index)=>{
        item.defects.forEach((item)=>{
          console.log(item)
          //把count的数量加入进去
          obj[item.name][index]=item.count
        })
      })
      console.log(obj)

      // 对obj对象进行遍历
      Object.keys(obj).map(key=>{
        console.log(key,obj[key])
        //对数组中有全部相同的'-'进行过滤
        let allEqual=obj[key].every(item=>item==obj[key][0])
        console.log(allEqual)
        if(allEqual==false){
          series.push({
            name:key,
            type: "bar",
            stack: "total",
            data: obj[key],
          })
        }
      })
      //初始化echarts实例
      document.getElementById("myChart").removeAttribute("_echarts_instance_");
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // if (value.length == 0) {
      //   document.getElementById("myChart").innerHTML = "暂无数据";
      // }
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          //坐标轴指示器，坐标轴触发有效
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLabel: {
            formatter: function (value) {
              return value + "个";
            },
          },
        },
        yAxis: {
          type: "category",
          data: yData,
        },
        series: series,
      });
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

最后

以上就是迷你鸡翅为你收集整理的vue：echarts多条柱状图数据的渲染的全部内容，希望文章能够帮你解决vue：echarts多条柱状图数据的渲染所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。