echart 柱状图和折线图一起

 

<div id="mainqa" style="width: 100%; height: 280px"></div>
 
data(){
      return{
        suqiuList:[120, 200, 150, 880, 70, 110, 330, 70, 110, 330]
      }
  },
  mounted() {
    var chartDom = document.getElementById("mainqa");
    var myChart = echarts.init(chartDom);
    var option = {
      color: ["#0F97FF", "#FFDF06", "#FFC851", "#5A5476", "#1869A0", "#FF9393"],
      title: {
        textStyle: {
          color: "#303133",
          fontStyle: "normal",
          fontWeight: "500",
          fontSize: 14,
        },
      },
      legend: {
        data: [{ name: "受理件" }, { name: "近七日平均工单" }],
        top: "5%",
        itemHeight: 13,
        itemGap: 30,
      },
      xAxis: {
        type: "category",
        axisLine: {
          //单独隐藏坐标线
          show: false,
        },
        axisTick: {
          //单独隐藏刻度线：
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        axisPointer: {
          type: "shadow",
        },
        data: [
          "积分入户",
          "疫苗接种",
          "网络色情",
          "自动售货机",
          "景观灯",
          "古树名木",
          "家禽屠宰",
          "邮筒",
          "报刊亭",
          "民用水井",
        ],
      },
      yAxis: {
        name: "受理量(件)",
        type: "value",

        nameTextStyle: {
          padding: [0, 20, 0, 0],
          color: "#303133",
        },
      },
      grid: {
        top: "20%",
        left: "1%",
        right: "4%",
        bottom: "2%",
        containLabel: true,
      },
      series: [
        {
          name: "受理件",
          data: this.suqiuList,
          type: "bar",
          barWidth: 13, //柱图宽度
          itemStyle: {
            normal: {
              //柱形图圆角，初始化效果
              barBorderRadius: [15, 15, 0, 0],
            },
          },
          // barGap:'0%'
        },
        {
          name: "近七日平均工单",
          type: "line",
          smooth: true, //显示
          symbol: "circle", //折线节点为小圆点
          symbolSize: "6", //折线点大小
          itemStyle: {
            /*设置折线颜色*/
            borderColor: new echarts.graphic.LinearGradient(10, 0, 0, 10, [
              {
                offset: 0,
                color: "#FFBB02", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#FEDE84", // 100% 处的颜色
              },
            ]), //折线点边框色
            // color: "#ffffff",
          },

          lineStyle: {
            width: 2,
            type: "solid",
            color: "#FFBB02", //折线的颜色
          },
          data: [20, 150, 200, 250, 150, 100, 95, 160, 50, 45],
        },
      ],
    };
    option && myChart.setOption(option);
  },