vue中使用ECharts制作双柱形图堆叠进度条效果

最新推荐文章于 2024-08-28 13:58:31 发布

蜉蝣&一粟

最新推荐文章于 2024-08-28 13:58:31 发布

阅读量4.3k

点赞数 1

分类专栏：前端爬坑之路 vue echarts

本文链接：https://blog.csdn.net/RJN0814/article/details/90022319

版权

本文介绍了如何在Vue项目中利用ECharts创建具有阴影和圆角的双柱形图堆叠进度条，同时隐藏X轴。通过在data中定义图表配置项，然后初始化图表，设置容器宽高，最终达到预期效果。

摘要由CSDN通过智能技术生成

本篇讲述双柱状图堆叠展示的背景效果

这里主要实现如下效果：
在这里插入图片描述
这里主要实现了阴影和圆角柱状图以及隐藏X轴的效果，项目需求如此，便依此进行图表的自定义，下面直接贴代码，代码中会有实现目前效果的注释。
首先，要确保项目中下载并且引入了echarts

// 在HTML中放置一个容器
<div id="myChart1"></div>

第二步：在data中定义图表配置项（可以在函数中定义配置项，我这里直写在data中的，这个没有什么影响），最终图表展示的效果如何取决于你在这里如何书写的配置。

option: {
        color: ["#157ef5"],// 设置柱状图的颜色
        textStyle: {
          color: "#828282"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: tru