Echarts实现环形图的渐变颜色效果

最新推荐文章于 2024-11-28 09:41:41 发布

芝麻油yy

最新推荐文章于 2024-11-28 09:41:41 发布

阅读量4.5k

点赞数 3

分类专栏：前端 vue.js 文章标签： echarts vue.js

本文链接：https://blog.csdn.net/weixin_45622628/article/details/120272199

版权

本文介绍如何在Vue.js项目中利用Echarts库封装环形图组件，并实现环形图的颜色渐变效果。通过引入Echarts并在data中配置相关代码，最终呈现出具有渐变色的环形图。

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

已经封装好的环形图组件

直接在要用的vue文件中引用：

              <circleChart
                :id="chart4.id"
                :width="chart4.width"
                :height="chart4.height"
                :bgColor="chart4.bgColor"
                :circleData="chart4.circleData"
                :color="chart4.color"
                :echartData="chart4.echartData"
                :title="chart4.title"
                :series="chart4.series"
              />

引入echarts

import * as echarts from "echarts"; //引入echarts

data中的代码：

 chart4: {
        id: "chart4",
        width: "100%",
        height: "270px",
        bgColor: "#fff",
        color: [
          new echarts.graphic.LinearGradient