使用echarts绘制一个比率的饼状图，饼状图颜色渐变
效果图
代码如下
let dataSeries = 80 let chartDom = document.querySelector(".mpsq")// html页面获取dom方法 vue直接使用ref就可以 let myChart = echarts.init(chartDom); let option = { // 底部标题 title: { text: '占比', left: "50%", top: "90%", textAlign: "center", textStyle: { fontSize: "16", color: '#CCCCCC', fontWeight: "bold", textAlign: "center", }, }, series: [ { name: '占比', type: "pie", clockWise: false, radius: [70, 90], itemStyle: { // 设置颜色渐变 normal: { color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 0, color: "#207565", }, { offset: 1, color: "#68D5EA", }, ]), shadowColor: '#68D5EA', shadowBlur: 0, label: { show: false, }, labelLine: { show: false, }, }, }, hoverAnimation: false, center: ["50%", "50%"], data: [ { value: dataSeries, label: { normal: { formatter: function (params) { return params.value + "%"; }, position: "center", show: true, textStyle: { fontSize: 26, fontWeight: "bold", color: '#FFF', }, }, }, }, // 剩余环形百分比颜色 { value: 100 - dataSeries, name: "invisible", itemStyle: { normal: { color: '#2c3e50', }, emphasis: { color: '#2c3e50', }, }, }, ], }, // 中间的圆环 { type: "pie", radius: [60, 65], hoverAnimation: false, labelLine: { normal: { show: false, }, emphasis: { show: false, }, }, data: [ { name: "", value: 0, itemStyle: { normal: { color: "#2c3e50", }, }, }, ], }, ] } myChart.setOption(option)
