Vue + initEchart：柱状图

1：柱状图在页面的布局：

 （1）：第一步：我们要在页面确定我们需要几个柱状图，且在页面的布局是什么样的，我们需要在<template>里面放几个div，我这边需要四个不同的柱状图，

<template>
        <!-- 图表的容器，一定要有宽高 -->
        <div class="echart1">
          <div id="mychart1" :style="myChartStyle1"></div>
          <div id="mychart2" :style="myChartStyle2"></div>
          <div id="mychart3" :style="myChartStyle3"></div>
          <div id="mychart4" :style="myChartStyle4"></div>
        </div>
      </template>

（2） ：第二步：在return{}里面设置柱状图的位置：

data() {
      return {
        dataForm: {
          shiftData:['',''],
          groupCode: '',
          shiftCode: '',
        },
        tableData: [],
        pageIndex: 1,
        Amount:[],
        Overrun:[],
        Overrun1:[],
        total:[],
        type:[],
        amount2:[],
        productCode: '',
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        myChartStyle1: { float: "left", width: "50%", height: "500px"},
        myChartStyle2: { float: "right", width: "50%", height: "500px"},
        myChartStyle3: { float: "left", width: "50%", height: "500px"},
        myChartStyle4: { float: "right", width: "50%", height: "500px"},

      }
    },

 我这边是需要在一个页面里面放相同大小的四个柱状图：

具体样子如上图所示：

2：initEchart具体的数据绑定及其样式设置：

initEchart1() {
        console.log(this.Amount)
        console.log("this.Amount1111")
        // 多列柱状图
        const mulColumnZZTData = {

          xAxis: {
            //data: this.xData,
            position: 'bottom',
            data:["牛奶"],
            axisLabel: {
              show: true,
              textStyle: {
                color: 'black',
                fontSize:20,//设置X轴的字体颜色和大小：
              }

            },
          },
          title: {
            text: '原料节超量（吨）',
            textStyle:{					//---主标题内容样式
              color:'rgb(34,0,51)',
              fontSize:20,
            },

            left:'center',				//---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
            padding:[10,30,30,30]

          },
          grid:{
            show:false,					//---是否显示直角坐标系网格
            top:80,						//---相对位置，top\bottom\left\right
            containLabel:false,			//---grid 区域是否包含坐标轴的刻度标签
            tooltip:{					//---鼠标焦点放在图形上，产生的提示框
              show:true,
              trigger:'item',			//---触发类型
              textStyle:{
                color:'#666',
                fontSize:30,
              },
            }
          },
          yAxis: {
            inverse:false,
            //show:false,
          },
          series: [
            {
              type: "bar", //形状为柱状图
              data: this.Overrun.map((item)=>{//Amount
                return{
                  value:item.toFixed(2),
                  //name: "直接材料节超对比", // legend属性
                  label: {
                    // 柱状图上方文本标签，默认展示数值信息
                    show: true,
                    position:item>0 ? 'top':'bottom'
                  }
                }
              }),
            }
          ],
          barWidth: "15%", // 每个柱条的宽度就是类目宽度的 10%
        };
        const myChart = echarts.init(document.getElementById("mychart1"));
        myChart.setOption(mulColumnZZTData);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },

上面是我这边对应的所有的样式：下面我们按照XY轴的区分：来仔细说

（1）：X轴：

xAxis: {
            //data: this.xData,
            position: 'bottom',
            data:["牛奶"],
            axisLabel: {
              show: true,
              textStyle: {
                color: 'black',
                fontSize:20,//设置X轴的字体颜色和大小：
              }

            },
          },

 

position: 'bottom'     ：是我们的字体在X轴上面还是在下面：

data:["牛奶"],        ：我们的柱状图需要“几个”，data【】我们可以直接在页面上面写死，也可以我们从后端传过来数据，因为我这边是只有牛奶，我这边就直接写死了：

 

data: this.arrProduct,     ：arrProduct 是我在前面定义的一个数组：

是后端传过来的值：

（2）：标题： 

title: {
  text: '**工厂累计直接材料节超（万元）',
  textStyle:{              //---主标题内容样式
    color:'rgb(34,0,51)',
    fontSize:40,//字体大小
  },

  left:'center',            //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
  padding:[10,30,30,30]

},

 

 

 (3):Y轴：

 yAxis: {
            inverse:false,    //设置柱子的方向：
            //show:false,
          },

（4）：柱状图的字体，小数位数，显示在柱子里面？上面？还是下面？

series: [
            {
              type: "bar", //形状为柱状图
              data:this.arrAuxiliaryAndMaterial.map((item)=>{
                return{
                  value:item.toFixed(2),
                  label: {
                    // 柱状图上方文本标签，默认展示数值信息
                    show: true,
                    //position: 'insideTop',  //数值显示在柱子内
                    position:item>=0?'top':'bottom'
                  }
                }
              }),
              //name: "直接材料节超对比", // legend属性
            }
          ],

data是对应的每个柱子上面的数值：用三目运算符，

item.toFixed(2),    后端传过来的值保留两位小数：

（5）：每个柱子的宽度：

barWidth: "20%", // 每个柱条的宽度就是类目宽度的 10%

（6:）随着屏幕大小调节图表：

console.log(mulColumnZZTData)
        const myChart = echarts.init(document.getElementById("mychart1"));
        myChart.setOption(mulColumnZZTData);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });