当前位置：首页 > news >正文

Vue2实战场景：图表组件 + Grid 布局

news 2025/9/17 7:42:03

echarts下载

npm install echarts

图表组件

代码

src\components\Charts\MyBarChart.vue

<template><div ref="chartRef" class="chart-container"></div>
</template><script>
import * as echarts from "echarts/core";
import { GridComponent } from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";echarts.use([GridComponent, BarChart, CanvasRenderer]);
let resizeTimer = null;
export default {name: "BarChart",props: {theme: {type: String,default: "light",},},data() {return {chartInstance: null,};},mounted() {this.$nextTick(() => {setTimeout(() => {this.initChart();window.addEventListener("resize", () => {clearTimeout(resizeTimer);resizeTimer = setTimeout(() => {this.chartInstance.resize();}, 200); // ✅ 200ms后执行，用户停止拖动才触发});}, 300);});},beforeDestroy() {window.removeEventListener("resize", this.resizeChart);if (this.chartInstance) {this.chartInstance.dispose();}},methods: {initChart() {this.chartInstance = echarts.init(this.$refs.chartRef, this.theme);const option = {toolbox: {feature: {saveAsImage: {},},},grid: {left: "20px",right: "20px",top: "40px",bottom: "40px",},xAxis: {type: "category",data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",],},yAxis: {type: "value",},series: [{data: [120, 200, 150, 80, 70, 110, 130, 160, 180, 140, 100, 90],type: "bar",},],};this.chartInstance.setOption(option);},resizeChart() {if (this.chartInstance) {this.chartInstance.resize();}},},
};
</script><style scoped>
.chart-container {width: 100%;height: 100%;
}
</style>

src\components\Charts\MyLineChart.vue

<template><div ref="chartRef" class="chart-container"></div>
</template><script>
import * as echarts from "echarts/core";
import {TitleComponent,ToolboxComponent,TooltipComponent,GridComponent,LegendComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";echarts.use([TitleComponent,ToolboxComponent,TooltipComponent,GridComponent,LegendComponent,LineChart,CanvasRenderer,UniversalTransition,
]);
let resizeTimer = null;
export default {name: "LineChart",props: {theme: {type: String,default: "light",},},data() {return {chartInstance: null,};},mounted() {this.$nextTick(() => {setTimeout(() => {this.initChart();window.addEventListener("resize", () => {clearTimeout(resizeTimer);resizeTimer = setTimeout(() => {this.chartInstance.resize();}, 200); // ✅ 200ms后执行，用户停止拖动才触发});}, 300);});},beforeDestroy() {window.removeEventListener("resize", this.resizeChart);if (this.chartInstance) {this.chartInstance.dispose();}},methods: {initChart() {this.chartInstance = echarts.init(this.$refs.chartRef, this.theme);const option = {grid: {left: "0px",right: "0px",top: "60px",bottom: "60px",},tooltip: {trigger: "axis",axisPointer: {type: "cross",label: {backgroundColor: "#6a7985",},},},legend: {data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],},toolbox: {feature: {saveAsImage: {},},},xAxis: [{type: "category",boundaryGap: false,data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},],yAxis: [{type: "value",},],series: [{name: "Email",type: "line",stack: "Total",areaStyle: {},emphasis: { focus: "series" },data: [120, 132, 101, 134, 90, 230, 210],},{name: "Union Ads",type: "line",stack: "Total",areaStyle: {},emphasis: { focus: "series" },data: [220, 182, 191, 234, 290, 3