水波圖+外圈旋轉

4.png

需要引入的第三方插件:
(https://echarts.baidu.com/resource/echarts-liquidfill-latest/dist/echarts-liquidfill.min.js)

echarts配置:

var ratio = 40; //占比數(shù)值  總數(shù)為100
var ratioLength = 3; //波浪數(shù)量
var ratioArr = [];
var ratioColor = ['#1991d2', '#3831f3', '#1991d2']; //波浪內顏色
for (var ratioIndex = 0; ratioIndex < ratioLength; ratioIndex++) {
    ratioArr.push(ratio / 100)
}
let angle =0;

var option = {
    backgroundColor: '#003366',
    title: {
        text: ratio + '%',
        textStyle: {
            fontSize: 50,
            fontFamily: 'Microsoft Yahei',
            fontWeight: 'bold',
            color: '#fff'
        },
        x: 'center',
        y: 'center'
    },
    series: [{
            type: 'liquidFill',
            radius: '40%',
            center: ['50%', '50%'],
            color: ratioColor,
            data: ratioArr,
            backgroundStyle: {
                // borderWidth: 1,
                color: '#1f2c52'
            },
            label: {
                normal: {
                    formatter: '',
                }
            },
            outline: {
                show: false,
            }
        },
        { //細的外圈
            type: "pie",
            center: ["50%", "50%"],
            radius: ["48%", "50%"],
            hoverAnimation: false,
            data: [{
                    name: "",
                    value: 50,
                    labelLine: {
                        show: false
                    },
                    itemStyle: {
                        color: 'transparent'
                    },
                    emphasis: {
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            color: 'transparent'
                        },
                    }
                },
            ]
        },
        { //粗的外圈
            type: "pie",
            center: ["50%", "50%"],
            radius: ["45%", "61%"],
            hoverAnimation: false,
            zlevel: 2,
            data: [


                {
                    name: "",
                    value: 50,
                    labelLine: {
                        show: false
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#00e2fe'
                        }, {
                            offset: 1,
                            color: '#0707ff'
                        }]),
                    },
                    emphasis: {
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00e2fe'
                            }]),
                        },
                    }
                },
            ]
        },
        {
            name: "",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function (params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                        startAngle: (5 + -angle) * Math.PI / 180,
                        endAngle: (115 + -angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#0CD3DB33",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        },
         {
            name: "",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function (params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                        startAngle: (125 + -angle) * Math.PI / 180,
                        endAngle: (235 + -angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#0CD3DB33",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        },
        {
            name: "",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function (params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                        startAngle: (245 + -angle) * Math.PI / 180,
                        endAngle: (355 + -angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#0CD3DB33",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        },
        {
            name: "",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function (params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.67;
                let point = getCirlPoint(x0, y0, r, (0 + -angle))
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4.8
                    },
                    style: {
                        stroke: "#0CD3DB",
                        fill: "#0CD3DB"
                    },
                    silent: true
                };
            },
            data: [0]
        },
         {
            name: "",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function (params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.67;
                let point = getCirlPoint(x0, y0, r, (120 + -angle))
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4.8
                    },
                    style: {
                        stroke: "#0CD3DB",
                        fill: "#0CD3DB"
                    },
                    silent: true
                };
            },
            data: [0]
        },
        {
            name: "",  //綠點
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function (params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.67;
                let point = getCirlPoint(x0, y0, r, (240 + -angle))
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4.8
                    },
                    style: {
                        stroke: "#0CD3DB",  
                        fill: "#0CD3DB"
                    },
                    silent: true
                };
            },
            data: [0]
        },

    ]
}

 
//獲取圓上面某點的坐標(x0,y0表示坐標滞磺,r半徑衷畦,angle角度)
function getCirlPoint(x0, y0, r, angle) {
    let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
    let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
    return {
        x: x1,
        y: y1
    }
}

let timeIntervalPie = setInterval(() => {
    drawTimeIntervalPie()
}, 100);

function drawTimeIntervalPie() {
    angle = angle - 12;
    myChart.setOption(option, true);
}
 timeIntervalPie;
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末谷浅,一起剝皮案震驚了整個濱河市珍手,隨后出現(xiàn)的幾起案子夏志,更是在濱河造成了極大的恐慌害碾,老刑警劉巖喻括,帶你破解...
    沈念sama閱讀 212,686評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件楞泼,死亡現(xiàn)場離奇詭異炮捧,居然都是意外死亡庶诡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,668評論 3 385
  • 文/潘曉璐 我一進店門咆课,熙熙樓的掌柜王于貴愁眉苦臉地迎上來末誓,“玉大人,你說我怎么就攤上這事书蚪±瑁” “怎么了?”我有些...
    開封第一講書人閱讀 158,160評論 0 348
  • 文/不壞的土叔 我叫張陵殊校,是天一觀的道長晴玖。 經常有香客問我,道長,這世上最難降的妖魔是什么呕屎? 我笑而不...
    開封第一講書人閱讀 56,736評論 1 284
  • 正文 為了忘掉前任让簿,我火速辦了婚禮,結果婚禮上榨惰,老公的妹妹穿的比我還像新娘拜英。我一直安慰自己,他們只是感情好琅催,可當我...
    茶點故事閱讀 65,847評論 6 386
  • 文/花漫 我一把揭開白布居凶。 她就那樣靜靜地躺著,像睡著了一般藤抡。 火紅的嫁衣襯著肌膚如雪侠碧。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,043評論 1 291
  • 那天缠黍,我揣著相機與錄音弄兜,去河邊找鬼。 笑死瓷式,一個胖子當著我的面吹牛替饿,可吹牛的內容都是我干的。 我是一名探鬼主播贸典,決...
    沈念sama閱讀 39,129評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼视卢,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了廊驼?” 一聲冷哼從身側響起据过,我...
    開封第一講書人閱讀 37,872評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎妒挎,沒想到半個月后绳锅,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 44,318評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,645評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了骚灸。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,777評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡积蜻,死狀恐怖,靈堂內的尸體忽然破棺而出彻消,到底是詐尸還是另有隱情竿拆,我是刑警寧澤,帶...
    沈念sama閱讀 34,470評論 4 333
  • 正文 年R本政府宣布宾尚,位于F島的核電站丙笋,受9級特大地震影響谢澈,放射性物質發(fā)生泄漏。R本人自食惡果不足惜御板,卻給世界環(huán)境...
    茶點故事閱讀 40,126評論 3 317
  • 文/蒙蒙 一锥忿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧怠肋,春花似錦敬鬓、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,861評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至杈抢,卻和暖如春数尿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背惶楼。 一陣腳步聲響...
    開封第一講書人閱讀 32,095評論 1 267
  • 我被黑心中介騙來泰國打工右蹦, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人歼捐。 一個月前我還...
    沈念sama閱讀 46,589評論 2 362
  • 正文 我出身青樓何陆,卻偏偏與公主長得像,于是被迫代替她去往敵國和親豹储。 傳聞我的和親對象是個殘疾皇子甲献,可洞房花燭夜當晚...
    茶點故事閱讀 43,687評論 2 351

推薦閱讀更多精彩內容