四时宝库

1 方法中设置option

var datamap0 = [];
var datamap1 = [];

var maps = res.data;
var data_A = ['', '', '', '', '', '', '', '', '', '', '', ''];
var data_B = ['', '', '', '', '', '', '', '', '', '', '', ''];

maps.forEach((map, index) => {
  datamap0.push(
          map.时间
  );
  data_A[index] = map.人数
  datamap1.push(
          map.人数
  );
  data_B[index] = map.净增
});

console.log("mapsyear,",datamap1);


var xData = datamap0;
var y1Data = data_A;

var y2Data = data_B;
option = {
  grid: {
    left: "7%",
    right: "5%",
    top: "25%",
    bottom: "19%",
  },

  title: {
    show: true,
    text: "增长统计" || pName,
    left: 'center',

    textStyle: {
      color: "#030303",
    },

  },

  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  legend: {
    data: ["月末","净增"],
    left: "3%",
    top: "10%",
    itemWidth: 11,
    itemHeight: 11,
    textStyle: {
      color: "#100e0e",
      fontSize: 13,
    },
  },
  toolbox: {
    show: false,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: true,
      show: true,
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 13,
        color: "#5b5959",
        margin: 8,
        interval: 0,
        formatter: function (val) {
          return val;
        },
      },
      axisLine: {
        lineStyle: {
          type: "solid",
          color: "#4e608b", //左边线的颜色
          width: "1", //坐标线的宽度
        },
      },
      data: xData,
    },
  ],
  yAxis: [
    {

      axisLabel: {
        formatter: "{value}",
        textStyle: {
          fontSize: 12,
          fontFamily: "PingFang SC",
          fontWeight: 400,
          lineHeight: 17,
          color: "#979A9F", //坐标值的具体的颜色
          opacity: 1,
        },
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          width: 2,
          color: ["#E3E3E3"], //分割线的颜色
          // color: ['#5d5d5d'] //分割线的颜色
        },
      },


      type: "value",
      scale: true,
      name: "",
      axisLine: {
        show: true,
      },
      splitNumber: 4,
      axisTick: {
        show: false,
      },
      // splitLine: {
      //   lineStyle: {
      //     // 使用深浅的间隔色
      //     color: "#4e608b",
      //   },
      // },
      // axisLabel: {
      //   fontSize: 13,
      //   color: "#d0d0d0",
      //   margin: 5,
      // },
      max: 10000,
      min: 0,
      boundaryGap: [0.2, 0.2],
    },
    {
      type: "value",
      scale: true,
      axisLine: {
        show: true,
      },
      splitNumber: 3,
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 13,
        color: "#d0d0d0",
        margin: 12,
      },
      splitLine: {
        lineStyle: {
          // 使用深浅的间隔色
          color: "#4e608b",
        },
      },
      name: "",
      max: 300,
      min: -200,
      boundaryGap: [0.2, 0.2],
    },
  ],
  series: [
    {
      name: "月末",
      type: "bar",
      label: {
        normal: {
          show: true,
          position: "top",
          textStyle: {
            color: "#1dacfe",
          },
        },
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#4889fb", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#15b3ff", // 100% 处的颜色
                    },
                  ],
                  false
          ),
        },
      },
      barWidth: "40%",
      yAxisIndex: 0,
      data: y1Data,
    },
    {
      name: "净增",
      yAxisIndex: 1,
      color: "#f30e0e",
      label: {
        normal: {
          show: true,
          position: "top",
          textStyle: {
            color: "#f30e0e",
          },
        },
      },
      lineStyle: {
        color: "#f30e0e",
      },
      type: "line",
      data: y2Data,
    },
  ],
};

this.myChart4.setOption(option);

2 mounted添加

this.myChart4 = echarts.init(this.$refs.col4year);

3 设置div

      <el-row style="margin-bottom: 1px;-webkit-box-shadow: #666 0px 0px 1px;
-moz-box-shadow: #666 0px 0px 1px;box-shadow: #666 0px 0px 1px;">


        <div id="col4year" ref="col4year" style="width: 800px;height:200px;">

        </div>



      </el-row>