echarts制作图表同时有3d柱状图与折线图
工作遇到，小可爱们可直接抄作业，使用的pictorialBar工作遇到，小可爱们可直接抄作业，使用的pictorialBar
echarts封装，使用了mixin(这个方式向大佬取经获得)，下面是目录结构
在main.js引入
index.js代码
import * as echarts from "echarts"; // 引入echartsimport 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();});},}})// 注册为全局组件ponent('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>
最终效果
