当前位置: 首页> 房产> 家装 > 大连美建科技有限公司_海南网上申请营业执照步骤_百度网页版下载安装_b2b电商平台有哪些

大连美建科技有限公司_海南网上申请营业执照步骤_百度网页版下载安装_b2b电商平台有哪些

时间:2025/7/9 7:37:27来源:https://blog.csdn.net/m0_72030584/article/details/143587588 浏览次数:0次
大连美建科技有限公司_海南网上申请营业执照步骤_百度网页版下载安装_b2b电商平台有哪些

效果:

起由:

需求设计大大觉得EChart图表的折线图太过于死板,没有交互感,希望可以实现上图的效果,经过一顿摸索发现EChart折线图effect属性可以让光点沿着折线的路径移动,从而实现动态效果,注意这个“波动的光条”的轨迹这会走两点间的最短距离

学习啦:

EChart的effect属性:

 show:控制是否显示动态效果,类型:Boolean

   constantSpeed:设置动态效果的流动速度(单位为像素/秒)。设置该属性后,动画速度将固定为该值,而不是随着图表的大小变化,类型:Number

 trailLength控制光点拖尾的长度。取值范围为 [0, 1],值越大,拖尾越长;值越小,拖尾越短,类型:Number

 symbol:设置光点的形状。可以使用预定义的形状(如 'circle''arrow ''rect'),或者指定图片路径作为自定义图标,类型:String

 symbolSize:设置光点的大小,可以是数字或数组(如 [width, height]

   shadowBlur:设置光点的阴影模糊半径,适合用来增强光点的发光效果.

   shadowColor:设置光点的阴影颜色

代码一:

<template><!-- 图表容器 --><div ref="chartContainer" style="width: 800px; height: 400px;"></div>
</template><script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';// 定义图表容器的引用
const chartContainer = ref(null);onMounted(() => {// 初始化 ECharts 实例const myChart = echarts.init(chartContainer.value);// 配置图表的选项const option = {backgroundColor: '#0a2e36', // 深色背景xAxis: {type: 'category',data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],boundaryGap: false, // 不留白axisLine: { lineStyle: { color: '#aaa' } }},yAxis: {type: 'value',axisLine: { lineStyle: { color: '#aaa' } }},series: [{type: 'line',data: [20, 50, 35, 70, 90, 40, 65, 30, 50, 60],lineStyle: {width: 3,color: {type: 'linear',x: 0,y: 0,x2: 1,y2: 0,colorStops: [{ offset: 0, color: 'rgba(0, 255, 255, 0.6)' },{ offset: 1, color: 'rgba(0, 100, 255, 0.6)' }]}},areaStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, color: 'rgba(0, 150, 255, 0.2)' },{ offset: 1, color: 'rgba(0, 150, 255, 0)' }]}}},{type: 'lines',coordinateSystem: 'cartesian2d',polyline: true,effect: {show: true,constantSpeed: 80,    // 较低速度让移动更平滑trailLength: 0.7,     // 较长拖尾以增加流动感symbol: 'circle',     // 使用圆形光点symbolSize: 10,       // 光点的大小color: 'rgba(255, 255, 255, 0.8)', // 光点的颜色shadowBlur: 0, //光条背景轨迹宽度shadowColor: 'rgba(255, 255, 255, 0.1)' //光条背景轨迹颜色},lineStyle: {opacity: 0 // 隐藏 `lines` 的线,只显示光点效果},data: [{coords: [[0, 20], [1, 50], [2, 35], [3, 70], [4, 90],[5, 40], [6, 65], [7, 30], [8, 50], [9, 60]] // 跟随折线图的坐标轨迹}]}]};// 设置图表的配置选项myChart.setOption(option);
});
</script><style scoped>
/* 为图表组件设置样式 */
</style>

代码二:

<template><div ref="chartRef" style="width: 800px; height: 400px;"></div>
</template><script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';const chartRef = ref(null); // 用于引用图表 DOM 元素onMounted(() => {// 初始化数据const data = [[0, 820],[1, 932],[2, 901],[3, 934],[4, 1290],[5, 1330],[6, 1320]];const xAxisData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];// 配置选项const option = {xAxis: {type: 'category',data: xAxisData},yAxis: {type: 'value'},series: [{type: 'line',data: data.map(item => item[1]), // 仅用作背景的折线图smooth: true,lineStyle: {width: 2,color: 'rgba(100, 100, 255, 0.3)' // 浅蓝色,低透明度的线段},areaStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, color: 'rgba(100, 150, 255, 0.2)' },{ offset: 1, color: 'rgba(100, 150, 255, 0)' }]}}},{type: 'lines',coordinateSystem: 'cartesian2d',polyline: true,effect: {show: true,constantSpeed: 100, // 光点的移动速度trailLength: 0.3, // 光点的拖尾长度symbol: 'circle', // 光点的形状symbolSize: 10, // 光点的大小color: 'rgba(255, 255, 0, 1)', // 亮黄色光点shadowBlur: 10, // 增加光点的光晕效果shadowColor: 'rgba(255, 255, 0, 0.8)' // 光点光晕颜色},lineStyle: {opacity: 0 // 隐藏原本的线条,只显示光点效果},data: [{coords: data}]}]};// 初始化 ECharts 实例并设置选项const chart = echarts.init(chartRef.value);chart.setOption(option);
});
</script><style scoped>
/* 你可以在这里添加样式 */
</style>

关键字:大连美建科技有限公司_海南网上申请营业执照步骤_百度网页版下载安装_b2b电商平台有哪些

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: