vue echarts 甘特图功能

index.vue

<template><div ref="echart" id="echart" class="echart"></div>
</template><script setup>import { nextTick, onMounted, ref } from "vue";import * as echarts from "echarts";let colorTheme = ["#4150d8","#28bf7e","#ed7c2f","#ff0000","#f9cf36","#4a5bdc","#7b04f4","#ee04f4","#04a0f4","#1af404","#d4f404","#f404f1",];const YData = ["示例1", "示例2", "示例3", "示例5", "示例6", "示例6", "示例7"];// 0 代表y轴索引（示例的下标）   后面0 代表 甘特图一个数据有多行  0 代表1个 1 代表2个// [0, "2021-07-19 03:29:19", "2021-07-19 08:38:50", 0]**多个数组代表多组数据，即每种“示例”会在多个时间段分布**let showData = [[{value: [0, "2021-07-19 03:29:19", "2021-07-19 08:38:50", 0],},{value: [1, "2021-07-19 03:53:07", "2021-07-19 21:00:08", 0],},{value: [4, "2021-07-19 03:29:19", "2021-07-19 08:38:50", 0],},],[{value: [0, "2021-07-19 05:00:00", "2021-07-19 06:08:02", 0],},{value: [1, "2021-07-19 00:00:00", "2021-07-19 05:08:02", 0],},{value: [3, "2021-07-19 00:00:00", "2021-07-19 05:08:02", 0],},],];// 分配y值const produceSeries = (data) => {let len = data.length;let step = len % 2 == 1 ? -5 : 2;let series = [];data.map((val, index) => {// if (step == -5) {series.push(configSeriec(val, index, 0));step = step + 30;// return;// }// if (index % 2 == 0) {//   series.push(configSeriec(val, index, step));//   step = step + 20;// } else {//   series.push(configSeriec(val, index, -step));//   step = step + 10;// }});function configSeriec(val, index, step) {return {type: "custom",renderItem: (params, api) => {//开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。var end = api.coord([api.value(2), categoryIndex]);var height = 10;return {type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。y: step,shape: echarts.graphic.clipRectByRect({// 矩形的位置和大小。x: start[0],y: start[1] - height / 2,width: end[0] - start[0],height: height,},{// 当前坐标系的包围盒。x: params.coordSys.x,y: params.coordSys.y,width: params.coordSys.width,height: params.coordSys.height,}),style: api.style(),};},encode: {x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴y: 0, // data 中『维度0』对应到 Y 轴},itemStyle: {normal: {color: function (params) {//return colorTheme[params.value[0]];return colorTheme[index];},},},data: val,};}return series;};let option = {title: {text: "",top: "1%",x: "center",textStyle: {fontSize: 20,color: "#333333",},},tooltip: {enterable: true,backgroundColor: "rgba(255,255,255,1)", //背景颜色（此时为默认色）borderRadius: 5, //边框圆角padding: 10, // [5, 10, 15, 20] 内边距textStyle: {color: "#000",},position: function (point, params, dom, rect, size) {dom.innerHTML = params.name + '<br/>' +'开始时间：' + params.value[1] + '<br/>' +'结束时间：' + params.value[2];},},legend: {auto: true//   //图例//   data: "我是图例",//   left: "90px",//   top: 22,//   itemWidth: 16,//   itemHeight: 16,//   selectedMode: false, // 图例设为不可点击//   textStyle: {//     color: "#333333",//     fontSize: 16,//   },},// grid: {//   top: 10,//   bottom: 10,//   left: 100,//   right: 20,//   containLabel: true// },xAxis: {name: "",nameTextStyle: {color: "#333333",fontSize: 18,},position: 'top',type: "time",splitNumber: 6,max: "2021-07-20 00:00:00",min: "2021-07-19 00:00:00", //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增axisLabel: {show: true,formatter: function (value) {//在这里写你需要的时间格式var t_date = new Date(value);let month = t_date.getMonth() + 1;let day = t_date.getDate();let hours = t_date.getHours();let minutes = t_date.getMinutes();return ([t_date.getFullYear(),month < 10 ? '0' + month : month,day < 10 ? '0' + day : day,].join("-") +"\n" +[hours < 10 ? '0' + hours : hours, minutes < 10 ? '0' + minutes : minutes].join(" : "));},},splitLine: {show: true,lineStyle: {color: "#333333",},},axisLine: {show: true,color: "#333333",// symbol: ["none", "arrow"],lineStyle: {color: "#333333",width: 1,type: "solid",},},},yAxis: {name: "",nameTextStyle: {color: "#333333",fontSize: 18,},axisLine: {color: "#333333",lineStyle: {color: "#333333",},},axisLabel: {show: true,textStyle: {color: "#333333", //这里用参数代替了},},data: YData,},dataZoom: [// {//   show: true,//   realtime: true,//   start: 0,//   end: 100,//   height: 20,//   borderColor: "rgba(43,48,67,0.5)",//   fillerColor: "#269cdb", //滑动块的颜色//   backgroundColor: "rgba(44, 92, 170, 0.35)", //两边未选中的滑动条区域的颜色//   xAxisIndex: [0, 1],//   width: "86%",// },// {//   type: "inside",//   realtime: true,//   start: 30,//   end: 70,//   // xAxisIndex: [0, 1],// },{type: "slider",show: true,// 设置组件控制的y轴yAxisIndex: 0,right: 15,// top: 60,// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%// 也可以用 startValue设置起始值// start: "0",// end: "50",maxSpan: 20,maxValueSpan: 5, // 最大显示y轴的条数width: 10, //滚动条的粗细// height: 450,// 组件的背景颜色// left: 600, //左边的距离// right: 8,//右边的距离borderRadius: 8,borderColor: "rgba(43,48,67,0.5)",fillerColor: "#269cdb", //滑动块的颜色backgroundColor: "rgba(44, 92, 170, 0.35)", //两边未选中的滑动条区域的颜色// 是否显示detail，即拖拽时候显示详细数值信息showDetail: false,// 控制手柄的尺寸handleSize: 16,// 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。showDataShadow: false,// zoomLock: true, //禁止拖拽   y轴固定，不能拉长滚动条},{type: "inside",yAxisIndex: [0],start: 1,end: 36,// 鼠标滚轮Y轴能触发缩放  false  禁止滚轮缩放   true  滚轮可以缩放// zoomOnMouseWheel: false,// 不按任何功能键，鼠标移动能触发数据窗口平移moveOnMouseMove: true,moveOnMouseWheel: true},],series: produceSeries(showData),};let echart = ref();let myChart;const setDatas = (XData, YData) => {option.yAxis.data = YData;option.series = produceSeries(XData);myChart.setOption(option);myChart.resize();}onMounted(() => {nextTick(() => {myChart = echarts.init(echart.value);option.yAxis.data = YData;option.series = produceSeries(showData);myChart.setOption(option);});});const watchResize = () => {setTimeout(() => {myChart.resize();}, 200)}//暴露方法，父组件才能调用defineExpose({setDatas,watchResize,})
</script>
<style lang="less">.echart {width: 100%;height: 1000px;}
</style>