这里提供的模板都是可以直接复用的。不同的图表，无非就是 option 配置不同，props接受传递过来的数据按需设置即可
这里我使用了一个 fontChart 的方法，这是为了让图表的字体在浏览器变化时能够达到自适应
fontChart 方法
// 字体转换 px -> remexport function fontChart(res) {let docEl = document.documentElement,clientWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;if (!clientWidth) return;// 此处的3840 为设计稿的宽度，记得修改！let fontSize = clientWidth / 1920;return res * fontSize;}
模板（Vue2）
<template><div :id="id" style="width: 100%; height: 100%"></div></template><script>import * as echarts from "echarts";import { fontChart } from "@/utils/echartPxToRem.js";export default {data() {return {charts: "",};},props: {id: {type: String,required: true},xValue: {type: Array,default: () => [],},yValue: {type: Array,default: () => [],},yname: {type: String,default: "人",},rotate: {type: Number,default: 0,},offsetX: {type: Number,default: 0,},},watch: {yValue() {this.drawBar();},},mounted() {this.drawBar();},destroyed() {window.removeEventListener("resize", this.selfAdaption);},methods: {drawBar() {this.charts = echarts.init(document.getElementById(this.id));let option = {tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "shadow", // 默认为直线，可选为：'line' | 'shadow'},},legend: {show: false,data: ["违章指挥"],textStyle: {fontSize: fontChart(12),color: "#7e8390",},// itemWidth: fontChart(25), //修改图例宽度// itemHeight: fontChart(12),//修改图例高度// itemGao: fontChart(12), //设置图例间距// itemStyle: {// borderType: 'dashed',// borderColor: '#0182d6',// borderWidth: 1// }},grid: {left: "3%",right: "8%",bottom: "10%",top: "12%",containLabel: true,},xAxis: {type: "category",name: "(区域)",nameTextStyle: {color: "rgba(255, 255, 255, 0.8)",verticalAlign: "top",fontSize: fontChart(13),},offset: fontChart(this.offsetX),data: this.xValue,axisTick: {show: false,alignWithLabel: true,},axisLine: {lineStyle: {color: "#0f5681",},},axisLabel: {show: true,interval: 0,rotate: fontChart(this.rotate),align: "center",textStyle: {color: "rgba(255, 255, 255, 0.8)", //更改坐标轴文字颜色fontSize: fontChart(14), //更改坐标轴文字大小},},},yAxis: {type: "value",name: "(" + this.yname + ")",nameTextStyle: {color: "rgba(255, 255, 255, 0.8)",fontSize: fontChart(13),align: "right",},axisLabel: {show: true,align: "center",textStyle: {color: "rgba(255, 255, 255, 0.8)", //更改坐标轴文字颜色fontSize: fontChart(14), //更改坐标轴文字大小},},splitLine: {lineStyle: {color: "#0f5681",type: "dotted",},},},series: [{// name: '违章指挥',type: "bar",barWidth: "30%",label: {show: true,position: "top",},itemStyle: {normal: {label: {show: true, //是否显示position: "top", //显示位置textStyle: {color: "#fff",fontSize: fontChart(13),},formatter: (params) => {//核心部分 formatter 可以为字符串也可以是回调if (params.value) {//如果当前值存在则拼接// console.log(params,'echarts---->')// return params.value + '/' //拼接上限return params.value; //拼接上限} else {//否则返回个空return "";}},},color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#32befe" },{ offset: 1, color: "#016cf4" },]),},},emphasis: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#32befe" },{ offset: 1, color: "#016cf4" },]),},data: this.yValue,},],};this.charts.setOption(option);window.addEventListener("resize", this.selfAdaption);},// 自适应selfAdaption() {if (!this.charts) return;this.charts.resize();this.drawBar();},},};</script>
模板（Vue3,setup语法糖）
<template><div :id="id" style="width: 100%; height: 100%"></div></template><script setup>import { fontChart } from '@/utils/echartPxToRem'import * as echarts from "echarts";import { onMounted, watch, onUnmounted } from "vue";const props = defineProps({id: {type: String,required: true,},xValue: {type: Array,default: () => ['区域1', '区域2', '区域3', '区域4', '区域5'],},yValue: {type: Array,default: () => [4,2,3,4,5],},yname: {type: String,default: "人",},rotate: {type: Number,default: 0,},offsetX: {type: Number,default: 0,},});watch(() => props.yValue,(newValue) => {drawBar()},{deep: true})let charts = ""; // 这里不要让它成为响应式onMounted(() => {drawBar();});onUnmounted(() => {window.removeEventListener('resize', selfAdaption)})// 初始化echartsconst drawBar = () => {charts = echarts.init(document.getElementById(props.id));let option = {tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "shadow", // 默认为直线，可选为：'line' | 'shadow'},},legend: {show: false,data: ["违章指挥"],textStyle: {fontSize: fontChart(12),color: "#7e8390",},// itemStyle: {// borderType: 'dashed',// borderColor: '#0182d6',// borderWidth: 1// }},grid: {left: "3%",right: "10%",bottom: "5%",top: "12%",containLabel: true,},xAxis: {type: "category",name: "(区域)",nameTextStyle: {color: "rgba(255, 255, 255, 0.8)",verticalAlign: "top",fontSize: fontChart(13),},offset: fontChart(props.offsetX),data: props.xValue,axisTick: {show: false,alignWithLabel: true,},axisLine: {lineStyle: {color: "#0f5681",},},axisLabel: {show: true,interval: 0,rotate: fontChart(props.rotate),align: "center",textStyle: {color: "rgba(255, 255, 255, 0.8)", //更改坐标轴文字颜色fontSize: fontChart(14), //更改坐标轴文字大小},},},yAxis: {type: "value",name: "(" + props.yname + ")",nameTextStyle: {color: "rgba(255, 255, 255, 0.8)",fontSize: fontChart(13),align: "right",},axisLabel: {show: true,align: "center",textStyle: {color: "rgba(255, 255, 255, 0.8)", //更改坐标轴文字颜色fontSize: fontChart(14), //更改坐标轴文字大小},},splitLine: {lineStyle: {color: "#0f5681",type: "dotted",},},},series: [{// name: '违章指挥',type: "bar",barWidth: "30%",label: {show: true,position: "top",},itemStyle: {normal: {label: {show: true, //是否显示position: "top", //显示位置textStyle: {color: "#fff",fontSize: fontChart(13),},formatter: (params) => {//核心部分 formatter 可以为字符串也可以是回调if (params.value) {//如果当前值存在则拼接// console.log(params,'echarts---->')// return params.value + '/' //拼接上限return params.value; //拼接上限} else {//否则返回个空return "";}},},color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#32befe" },{ offset: 1, color: "#016cf4" },]),},},emphasis: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#32befe" },{ offset: 1, color: "#016cf4" },]),},data: props.yValue,}]}charts.setOption(option)window.addEventListener('resize', selfAdaption)};// 自适应function selfAdaption() {if(!charts) returncharts.resize()drawBar()}</script>
