在vue使用三系列柱状图数据封装，和echarts用官方例子不显示图形问题解决

在使用echarts官网对象数组输入格式和最简单的数据集案例的柱状图时，直接复制官网案例只显示x轴，不管是请求来的数据还是静态数据都一样不显示图形，下图为官网案例

后参考博主weixin_43991257，的文章https://blog.csdn.net/weixin_43991257/article/details/124665703，将serise的数据改写成三系列柱状图的数据格式，终于得以正常显示
代码如下：

option = {
            title: {
                text: '(次)'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ["进","出"],
                right: 1,
            },
            grid: {
                left: '0%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data:["天河停车场","南沙停车场","越秀停车场","白云停车场"],
                axisLabel:{
                    show:true,
                    align:'left',
                    interval:0,
                    rotate:-25,
                    margin:14,
                },
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: "进",
                    type: 'bar',
                    data: [32,24,65,34],
                    barWidth: 16,//柱子粗细
                    barGap:0,//柱子间距
                    itemStyle:{
                        normal:{
                            color:'#c7f9b9'
                        },
                    },
                    smooth: true,
                },
                {
                    name: "出",
                    type: 'bar',
                    barWidth: 16,//柱子粗细
                    data: [18,45,32,43],
                    itemStyle:{
                        normal:{
                            color:'#ff5454'
                        },
                    },
                    smooth: true,
                }
            ]

        };

最后将请求到的数据封装成series需要的数据格式，以下面这段数据为例

[
    {
        "type": "MYSQL",
        "A: 1,
        "B": 7,
        "C": 0
    },
    {
        "type": "ORACLE",
        "A": 5,
        "B": 4,
        "C": 0
    },
    {
        "type": "PGSQL",
        "A": 0,
        "B": 6,
        "C": 0
    }
]

思路：从上面数据可以看出，我们需要3个系列的柱状图，每个系列的数据应该是以每个阶段的分数为一组，比如第一个系列的数据（A）应该为[0,0,0],第二个系列的数据（B）应该为[7,4,6]…，因为我需要在vue中使用echarts，所以在method中和watch都要进行编写代码，以实现前端页面响应式渲染数据。

watch代码：

watch: {
    bardata: {
      immediate: true,
      deep: true,
      handler(nval, oval) {
        let vm = this;
        let xAxis = [];
        let A= [];
        let B= [];
        let C= [];
        nval.forEach((item) => {
          xAxis.push(item.type);
          A.push(item.A);
          B.push(item.B);
          C.push(item.C);
        });

        let series = [];
        let name = ["A", "B", "C"];
        let data = [A, B, C];
        let color = ["#808080", "#c7f9b9", "#ff5454"];
        nval.forEach((item, index) => {
          series.push({
            name: name[index],
            type: "bar",
            data: data[index],
            barGap: 0,
            itemStyle: {
              normal: {
                color: color[index],
              },
            },
            smooth: true,
          });
        });

        let param = {
          xAxis,
          series,
        };
        vm.$nextTick(function () {
          vm.bar(param);
        });
      },
    },
  },

加工整理后的param数据：xAxis为x轴，series为图标所需要的series数据格式

{
    "xAxis": [
        "MYSQL",
        "ORACLE",
        "PGSQL"
    ],
    "series": [
        {
            "name": "A",
            "type": "bar",
            "data": [ 0, 0,0],
            "barGap": 0,
            "itemStyle": {
                "normal": {
                    "color": "#808080"
                }
            },
            "smooth": true
        },
        {
            "name": "B",
            "type": "bar",
            "data": [7, 4, 6],
            "barGap": 0,
            "itemStyle": {
                "normal": {
                    "color": "#c7f9b9"
                }
            },
            "smooth": true
        },
        {
            "name": "C",
            "type": "bar",
            "data": [ 1, 5, 0],
            "barGap": 0,
            "itemStyle": {
                "normal": {
                    "color": "#ff5454"
                }
            },
            "smooth": true
        }
    ]
}

method代码：

methods: {
    bar(param) {
      let vm = this;
      let title = {
        text: "健康得分概览",
        textStyle: {
          color: vm.styleChart.color,
          fontWeight: 400,
        },
        x: "center",
        textAlign: "left",
        top: "10px",
      };
      let textStyle = {
        color: vm.styleChart.color,
      };
      var myChart1 = vm.$echarts.init(document.getElementById("bar"));
      myChart1.setOption({
        title: title,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          x: "center",
          y: "bottom",
          textStyle: textStyle,
        },
        xAxis: {
          name: "类型",
          type: "category",
          data: param.xAxis,
          axisLabel: {
            show: true,
            align: "left",
            interval: 0,
            margin: 14,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}个",
          },
        },
        series: param.series,
      });
    },
  },

最终页面渲染效果：
因A系列数据全部为0，所以没有柱状图显示，最后一组，A，C系列均为0，所以只显示一条柱状图

这篇好文章是转载于：学新通技术网