vue结合echarts开发柱状图+折线图合并的图表

接上一篇文章，接下来写的是有关于柱状图+折线图的图表，此图表分为左右两个坐标轴：请看下图

相关配置请看第一篇文章：echarts之饼图配置

以及echarts官网链接：echarts官网

废话不多说请看代码：

这是子组件：

<template>
  //这是子组件
  <div class="mixture_wap">
    <div class="mixture" id="mixtureId"></div>
  </div>
</template>

<script>
let _c = { id: 1 };
let echarts = require("echarts");
export default {
  props: {
    MixtureData: {
      type: Object,
    },
  },
  data() {
    return {
      myHisLevelChart: "",
    };
  },
  created() {
  },
  mounted() {
    let _this = this;
    var chartDom = document.getElementById("mixtureId");
    this.myHisLevelChart = echarts.init(chartDom);
    this.$nextTick(()=>{
      this.initChart();
    })
    window.addEventListener("resize", this.initChart,false);
  },
  methods: {
    initChart() {
      let _this = this;
      this.myHisLevelChart.resize();
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", //鼠标悬停显示样式
            shadowStyle: {
              shadowColor: "rgba(0, 0, 0, 0.5)",
              shadowBlur: 2,
            },
          },
          formatter: "{b0}<br/>{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}%", //展示百分比  五条折线
        },
        legend: this.MixtureData.legend, //标记属性
        grid: this.MixtureData.grid, //绘图区调整
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 400000,
            interval: 100000,
          },
          {
            type: "value",
            min: 0,
            max: 125,
            interval: 25,
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],
        xAxis: {
          //X轴显示数值
          type: this.MixtureData.xAxis.type,
          data: this.MixtureData.xAxis.dataList,
          axisLabel: {
            //坐标轴文字显示样式
            interval: 0,
            lineHeight: this.MixtureData.xAxis.axisLabel.lineHeight,
            rotate: this.MixtureData.xAxis.axisLabel.rotate,
            formatter: function (value) {
              var str = "";
              var num = _this.MixtureData.xAxis.axisLabel.fontNum; //每行显示字数
              var valLength = value.length; //该项Y轴字数
              var rowNum = Math.ceil(valLength / num); // 行数
              if (rowNum > 1) {
                for (var i = 0; i < rowNum; i++) {
                  var temp = "";
                  var start = i * num;
                  var end = start + num;
                  temp = value.substring(start, end) + "\n";
                  str += temp;
                }
                return str;
              } else {
                return value;
              }
            },
          },
        },
        series: this.MixtureData.series,
      };
      this.myHisLevelChart.setOption(option, true);
    },
  },
  beforeDestroy(){
    window.removeEventListener('resize',this.initChart,false)
  }
};
</script>

<style lang="scss" scoped>
.mixture_wap {
  width: 100%;
  .mixture {
    width: 100%;
    height: 220px;
  }
}
</style>

这是父组件：

<template>
  <div class="wrap">
    <div class="income_mid mt16">
      <div class="pub_title lineH1 flexa pt15">
        <p class="side"></p>
        <p class="fb">啦啦啦啦啦啦啦啦</p>
      </div>
      <Mixture :MixtureData="MixtureData" />
    </div>
  </div>
</template>

<script>
import Mixture from "./mixture";
export default {
  name: "wrap",
  components: {
    Mixture,
  },
  data() {
    return {
      // 折柱混合
      MixtureData: {
        title: "啦啦啦啦啦啦啦啦",
        width: 100 + "%", //柱状图盒子宽度
        legend: {
          //图例属性
          data: [
            {
              name: "任务",
              // 图例引用图片。
              icon: "image://" + require("../../assets/img/icozn2.png"),
            },
            {
              name: "完成",
              // 图例引用图片。
              icon: "image://" + require("../../assets/img/icozn1.png"),
            },
            {
              name: "完成进度",
              // 图例引用图片。
              icon: "image://" + require("../../assets/img/icozn.png"),
            },
          ],
          orient: "horizontal", //标记排列显示
          top: 15, //标记位置
          left: 1 + "%", //标记位置
          // icon: "roundRect",
          itemWidth: 24,
          itemHeight: 8,
           //itemGap:5,//图例间距
           //padding:5,//每个图例padding
           //textStyle:{//图例文字样式设置
           //  lineHeight:5,
           //}
        },
        grid: {
          //绘图区调整
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          //X轴显示分类
          type: "category",
          dataList: [
            "北山街道",
            "西溪街道",
            "灵隐街道",
            "翠苑街道",
            "文新街道",
            "古荡街道",
            "转塘街道",
            "留下街道",
            "蒋村街道",
            "三墩镇",
            "双浦镇",
            "云栖小镇",
            "紫金港科技城",
          ],
          axisLabel: {
            //坐标轴文字显示样式
            lineHeight: 18, //字体行高
            fontNum: 8, //每行显示字数
            rotate: 20, //文字旋转角度，0不旋转
            align: "right",
          },
        },

        series: [
          //柱状图数据
          {
            name: "任务",
            type: "bar",
            data: [
              52000,
              86500,
              86500,
              125000,
              63000,
              342500,
              203000,
              203000,
              87500,
              100000,
              45000,
              50500,
              100000,
            ],
            label: {
              show: false,
              position: "top", //数值在右边显示
            },
            labelLine: { show: false }, //是否显示线条
            itemStyle: {
              color: "#1492FF", //柱状图颜色
            },
          },
          {
            name: "完成",
            type: "bar",
            data: [
              10493,
              18631,
              18311,
              34883,
              16442,
              154657,
              33687,
              61340,
              16333,
              48180,
              10458,
              8465,
              18300,
            ],
            label: {
              show: false,
              position: "top", //数值在右边显示
            },
            labelLine: { show: false }, //是否显示线条
            itemStyle: {
              color: "#09C592",
            },
          },
          {
            name: "完成进度",
            type: "line",
            data: [
              20.18,
              21.54,
              21.17,
              27.91,
              26.1,
              45.16,
              16.59,
              30.22,
              18.67,
              48.18,
              23.24,
              16.76,
              18.3,
            ],
            yAxisIndex: 1, //双Y轴，选择折线图对应某个轴
            label: {
              show: true,
              position: "top", //数值在右边显示
              formatter: "{c} %",
            },

            labelLine: { show: false }, //是否显示线条
            itemStyle: {
              color: "#FF9314",
            },
          },
        ],
      }
    };
  },
};
</script>

<style lang="scss" scoped>
.pub_title {
  color: #333;
  font-size: 16px;
  height: 22px;
  margin-top: 15px;
  .side {
    width: 4px;
    height: 16px;
    line-height: 16px;

    background: #1d96ff;
    border-radius: 2px;
    margin-right: 16px;
  }
}
.income_top {
  margin-top: 16px;
  .income_top_left,
  .income_top_right {
    width: calc(50% - 8px);
    height: 294px;
    border-radius: 4px;
    flex: (0, 0, calc(50% - 8px));
    background-color: #fff;
  }
}

.income_bottom,
.income_mid {
  background-color: #fff;
}
</style>

下一篇着重介绍水平柱状图以及旋转90度的柱状图