已經封裝好的環形圖組件

直接在要用的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(0, 0, 0, 1, [{ offset: 0, color: "#FC6679 " },{ offset: 1, color: "#FDC581 " }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#AF3ADB" },{ offset: 1, color: "#4E65DD" }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#FC6679" },{ offset: 1, color: "#FDC581" }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#02CEFC" },{ offset: 1, color: "#0272ED" }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#7FC268" },{ offset: 1, color: "#0BBBB7" }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#E7B115" },{ offset: 1, color: "#F5814C" }])],legend: {data: ["行業1", "行業2", "行業3", "行業4", "行業5", "其他"],orient: "vertical"},title: [{text: "{name|" + "行業2" + "}\n{value|" + "25.98%" + "}",top: "center",left: "center",textStyle: {rich: {name: {fontSize: 14,fontWeight: "normal",color: "#455A74",padding: [10, 0]},value: {fontSize: 16,fontWeight: "bold ",color: "#333333"}}}}],circleData: "180",series: [{name: "客戶數量占比",type: "pie",radius: ["30%", "50%"],center: ["50%", "50%"],data: [{name: "行業1",value: 19.54},{name: "行業2",value: 25.98},{name: "行業3",value: 25.98},{name: "行業4",value: 19.54},{name: "行業5",value: 19.54},{name: "其他",value: 1.26}],hoverAnimation: true,itemStyle: {normal: {borderColor: "#fff",borderWidth: 2}},labelLine: {show: true}}]},

其中,下面這段代碼為主要代碼

color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#FC6679 " },{ offset: 1, color: "#FDC581 " }]), ]

最后效果：

?

總結

以上是生活随笔為你收集整理的Echarts实现环形图的渐变颜色效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。