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

vue3 + ts + echart 实现柱形图表

news 2025/6/23 11:58:51

首先封装Echart一个文件代码如下

<script setup lang="ts">
import { ECharts, EChartsOption, init } from 'echarts';
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';// 定义props
interface Props {width?: string;height?: string;option: EChartsOption;
}
const props = withDefaults(defineProps<Props>(), {width: '100%',height: '100%',option: () => ({})
});const myChartsRef = ref<HTMLDivElement>();
let myChart: ECharts;
// eslint-disable-next-line no-undef
let timer: string | number | NodeJS.Timeout | undefined;// 初始化echarts
const initChart = (): void => {if (myChart !== undefined) {myChart.dispose();}myChart = init(myChartsRef.value as HTMLDivElement);// 拿到option配置项，渲染echartsmyChart?.setOption(props.option, true);
};// 重新渲染echarts
const resizeChart = (): void => {timer = setTimeout(() => {if (myChart) {myChart.resize();}}, 500);
};onMounted(() => {initChart();window.addEventListener('resize', resizeChart);
});onBeforeUnmount(() => {window.removeEventListener('resize', resizeChart);clearTimeout(timer);timer = 0;
});watch(props.option,() => {initChart();},{deep: true}
);
</script>
<template><div ref="myChartsRef" :style="{ height: height, width: width }" :option="option" />
</template>

第一一个案例代码如下需要引入我们封装好的 Echart.vue文件

<script setup lang="ts">
import { reactive } from 'vue';
import Echarts from './index.vue';const option = reactive({tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',label: {show: true}}},grid: {left: '6%',top: '15%',right: '0',bottom: '10%'},legend: {data: ['昨日总人数', '今日实时人数'],top: '0',color: '#4ADEFE',fontSize: 14,selected: { 昨日使用率: false }, // 不需要显示的设置为falsetextStyle: {color:'#4ADEFE',},x : 'right',y : 'top',},xAxis: {data: ['会议室1','会议室2','会议室3','会议室4','会议室5','会议室6','会议室7','会议室8','会议室9'],axisLine: {show: true, //隐藏X轴轴线lineStyle: {color: '#4ADEFE',width: 1}},axisTick: {show: true, //隐藏X轴刻度alignWithLabel: true},axisLabel: {show: true,color: '#4ADEFE', //X轴文字颜色fontSize: 12}},yAxis: [{type: 'value',name: '人数',nameTextStyle: {color: '#4ADEFE',fontSize: 12},splitLine: {show: true,lineStyle: {width: 1,color: '#4ADEFE'}},axisTick: {show: false},axisLine: {show: false},axisLabel: {show: true,color: '#4ADEFE',fontSize: 12}}],series: [{name: '昨日总人数',type: 'bar',barWidth: 10,itemStyle: {color: {type: 'linear',x: 0, // 右y: 1, // 下x2: 0, // 左y2: 0, // 上colorStops: [{offset: 0,color: '#f3db5c' // 0% 处的颜色},{offset: 1,color: '#f3db5c' // 100% 处的颜色}]}},data: [240, 145, 43, 35, 76, 154, 360, 42, 168]},{name: '今日实时人数',type: 'bar',barWidth: 10,itemStyle: {color: {type: 'linear',x: 0, // 右y: 1, // 下x2: 0, // 左y2: 0, // 上colorStops: [{offset: 0,color: '#4adefe' // 0% 处的颜色},{offset: 1,color: '#4adefe' // 100% 处的颜色}]}},data: [133, 23, 114, 67, 89, 35, 67, 96, 90]}]
});
</script><template><div :style="{ width: '100%', height: '90%' }"><Echarts :option="option" /></div>
</template>

第二个案例同上

<script setup lang="ts">
import { reactive } from 'vue';
import Echarts from './index.vue';const data = {"orderNum":["39","77","96","41","24","17","0","10"],"categoryArr":["订购附属","新装","拆机","改客户资料","补换卡","过户","换挡","移机"],"avgTime":["10.79","17.05","14.84","10.07","5.58","10.36","0.00","4.43"],"legendArr":["耗时时间","订单量"]
}
let maxOrder=Math.max.apply(null,data.orderNum);
const option = reactive({title : {text:'',subtext:'',top:'3',right:'0'},tooltip: {trigger: 'axis'},grid: {left: '8%',right: '8%',bottom: '10%'},xAxis: {type: 'category',axisLine: {lineStyle: {color: '#57617B'}},axisLabel: {interval:0,textStyle: {color:'#fff',}},data: data.categoryArr},yAxis:[{type: 'value',name: '',axisLine: {lineStyle: {color: '#57617B'}},axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}分'},splitLine: {show: false}},{type: 'value',name: '',max:maxOrder+parseInt(maxOrder*0.2),axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}笔'},splitLine: {show: true,lineStyle:{type:'dashed',color: ['#25CEF3']}}}],series: [{name:'耗时时间',type:'line',yAxisIndex:0,smooth: false,symbolSize:5,lineStyle: { normal: {width: 2}},areaStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(230, 48, 123, 0.8)'},{offset: 0.8,color: 'rgba(230, 48, 123, 0)'}],globalCoord: false // 缺省为 false},shadowColor: 'rgba(0, 0, 0, 0.1)',shadowBlur: 10}},itemStyle: {normal: { color: '#DA2F78'}},data:data.avgTime},{name:'订单量',type:'bar',barWidth:12,yAxisIndex:1,itemStyle : {normal: {barBorderRadius:[10, 10, 0, 0],color: {type: 'linear',x: 0,y: 1,x2: 0,y2: 0,colorStops: [{offset: 0,color: "#4033F9"},{offset: 0.8,color: "#BA97F9"}],globalCoord: false // 缺省为 false},shadowColor: 'rgba(0, 0, 0, 0.1)',}},data:data.orderNum}]
});
</script><template><div :style="{ width: '100%', height: '90%' }"><Echarts :option="option" /></div>
</template>

更多案例可以查看我的个人网站会持续更新相关案例 人间且慢行 | 前端网站大全 | web前端开发

查看全文

http://www.lryc.cn/news/303447.html