echarts制作图表同时有3d柱状图与折线图

工作遇到，小可爱们可直接抄作业，使用的pictorialBar

• echarts封装，使用了mixin(这个方式向大佬取经获得)，下面是目录结构
  

• 在main.js引入

• index.js代码

import * as echarts from "echarts"; // 引入echarts
import Vue from "vue"
Vue.prototype.$echarts = echarts
// 引入封装好的图表组件
import VillageWaterAccumulation from "@/utils/s-charts/VillageWaterAccumulation";
// 导出
export default {
  install(Vue) {
    Vue.mixin({
      methods: {
        initChart(container, option) {
          let myChart = echarts.getInstanceByDom(container)
          if (myChart == null) { // 如果不存在，就进行初始化
            myChart = echarts.init(container);
          }
          myChart.setOption(option);
          window.addEventListener('resize', function () {
            myChart.resize();
          });
        },
      }
    })
    // 注册为全局组件
    Vue.component('s-VillageWaterAccumulation', VillageWaterAccumulation)
  }
}

• 图表组件代码

<template>
  <div ref="VillageWaterAccumulation" :style="{ width, height }"></div>
</template>
<script>
export default {
  props: {
    width: {
      type: String,
      default: "500px",
    },
    height: {
      type: String,
      default: "300px",
    },
    data: {
      type: Object,
      required: true,
    },
  },
  watch: {
    //监听data值的变化,避免接口过慢页面不发生更新
    data: function (newVal, oldVal) {
      this.data = newVal; //发生变化时，重新赋值
      newVal && this.draw(); //newVal存在的话执行draw函数，重新绘图
    },
  },
  data() {
    return {
      blueBar: require("../../assets/villagebigscreen/blue_bar.png"),
    };
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      let barList = this.data.water.map((v, k) => {
        return {
          value: v,
          symbol: "image://" + this.blueBar,
          symbolSize: [10, "100%"],
        };
      });
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.data.create_time,
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#00ddff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "吨",
            axisLabel: {
              formatter: "{value}",
            },
            axisLine: {
              lineStyle: {
                color: "#00ddff",
              },
            },
          },
        ],
        series: [
          {
            name: "水量",
            type: "pictorialBar",
            data: barList
          },
          {
            name: "水量累计",
            type: "line",
            data: this.data.r2094,
            lineStyle: {
              normal: {
                color: "#5afe8c",
                width: 2,
              },
            },
            itemStyle: {
              normal: {
                color: "#5afe8c",
              },
            },
          },
        ],
      };
      this.initChart(this.$refs.VillageWaterAccumulation, option);
    },
  },
};
</script>
<style lang="less" scoped>
</style>

• 最终效果