这里提供的模板都是可以直接复用的。不同的图表，无非就是 option 配置不同，props接受传递过来的数据按需设置即可
这里我使用了一个 fontChart 的方法，这是为了让图表的字体在浏览器变化时能够达到自适应
fontChart 方法
// 字体转换 px -> rem
export 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)
})
// 初始化echarts
const 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) return
charts.resize()
drawBar()
}
</script>
