echarts图表效果
以实际项目中需求到的一些echarts效果图作为展示,重点是用于数据可视化大屏
坐在办公室的咸鱼
咸鱼一条
展开
-
3D环状饼图加引导线,使用echarts实现
这个代码使用vue2写的,其中还有一个nowSize()函数是我写来做适配的,3280指的是屏宽或者是分辨率的宽;可以不调用这个函数,直接改为数值。在mounted中还加入了屏幕大小监听,屏幕大小变化时重新渲染图表使其大小跟随屏幕大小变化。其中,echarts需要时5.4.x版本以上的,不然样式显示会有影响。实现原理主要是在一个3D图上叠加一个饼图,饼图只保留引导线。需要先下载echarts、echarts-gl依赖包。原创 2024-01-17 09:50:25 · 3259 阅读 · 11 评论 -
echarts实现折线图颜色分层区分不同程度
然后我们就可以进行分区了,重点是使用了areaStyle的配置,根据我们上面计算的数值进行颜色的配置达成分区的效果。先完成正常的折线图绘制代码,然后我们需要在series上加上markLine的配置,这个配置就是标准线的配置。上面对应的offset也可以根据自己的需要进行修改,最终达成自己想要的效果。这里为了方便展示我把x轴和y轴都进行了隐藏,展示出来的效果就是如图所示。我们需要准备一组数据,并且提前获取我们的标准值,比如图上的。,我们可以计算出标准值应该存在图表的位置。原创 2024-02-02 16:25:05 · 637 阅读 · 0 评论 -
echarts实现栅栏式柱状图
因为我这里仅做教程展示使用,所以颜色和数据都是默认写死的,可以根据自己的需求进行改进,改成动态配置的。,有时候会发现效果不尽人意,总是存在偏差,这时候我们可以使用两个工具来帮助我们调整他的位置。是使用的背景图的label来设置的,为了使他的位置在右上角。这里的设计就是象形柱图加上作为背景的柱状图,重点其实是位置的调整。其实我们看着像栅栏的图表是echarts中的象形柱图。没什么难点,重点就是小的修改上。原创 2024-02-02 16:39:46 · 504 阅读 · 0 评论