首页 > 编程学习 > echarts制作图表同时有3d柱状图与折线图

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

发布时间:2022/12/10 18:00:45

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

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

工作遇到,小可爱们可直接抄作业,使用的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>
  • 最终效果
    在这里插入图片描述

本文链接:https://www.ngui.cc/zz/1569095.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000