2. 程式人生 > >【百度echarts】實現圓環進度條-程式碼示例

【百度echarts】實現圓環進度條-程式碼示例

阿新 • • 發佈：2019-01-13
//柱狀圖 var asd =document.getElementById('pie'); var pieChart = echarts.init(asd); var labelTop = {//上層樣式 normal : { color :'#0099cc', label : { show : true, position : 'center', formatter : '{b}'
, textStyle: { baseline : 'bottom', fontSize:26 } }, labelLine : { show : false } } }; var labelFromatter = {//環內樣式 normal : {//預設樣式
label : {//標籤 formatter : function (a,b,c){return 100 - c + '%'}, // labelLine.length：30, //線長，從外邊緣起計算，可為負值 textStyle: {//標籤文字樣式 color:'black', align :'center', baseline : 'top'
//垂直對其方式 } } }, }; var labelBottom = {//底層樣式 normal : { color: '#99ccff', label : { show : true, position : 'center', fontSize:22 }, labelLine : { show : false } }, emphasis: {//懸浮式樣式 color: 'rgba( 0,0,0,0)' } }; var radius = [80,122];// 半徑[內半徑，外半徑] var pieChartOption = { title : { text: 'echarts實現圓環進度條', subtext: '易唐雲網智慧科技', x:'center', //正標題樣式 textStyle: { fontSize:44, fontFamily:'Arial', fontWeight:100, //color:'#1a4eb0', }, //副標題樣式 subtextStyle: { fontSize:28, fontFamily:'Arial', color:"#1a4eb0", }, }, animation:false, tooltip : { // 提示框. Can be overwrited by series or data trigger: 'axis', //show: true, //default true showDelay: 0, hideDelay: 50, transitionDuration:0, borderRadius : 8, borderWidth: 2, padding: 10, // [5, 10, 15, 20] }, series : [ { type : 'pie', center : ['50%', '70%'],//圓心座標（div中的%比例） radius : radius,//半徑 x: '0%', // for funnel itemStyle : labelTop,//graphStyleA,//圖形樣式 // 當查到的資料不存在（並非為0），此屬性隱藏 data : [ {name:'達成率', value:79,itemStyle : labelTop}, {name:'79%', value:21, itemStyle : labelBottom} ] } ] }; pieChart.setOption(pieChartOption);

相關推薦

【百度echarts】實現圓環進度條-程式碼示例

//柱狀圖 var asd =document.getElementById('pie'); var pieChart = echarts.init(asd); var labelTop = {//上層樣式 normal

【百度地圖】JS實現 百度地圖窗體InfoBox開啟當前窗體時關閉上一個窗體

在地圖中如果存在多個label或marker,當我們點選其中一個label開啟其資訊窗體時，為了能清除的展示資訊，我們往往希望只打開當前的內容窗體，百度地圖api上沒有介紹相關的方法，親測以下方法可行：

【百度圖表】頁面引入多個圖表，讓其只適應

++ i++ top color win setoption 實例 get logs 【百度圖表】頁面引入多個圖表，讓其只適應 網上發現有個這樣的方法讓圖表自適應，window.onresize = myChart.resize; 但是發現好像只有最後一個有效，於是就有了

【百度AR】【Android】demo工程使用手記

AR【百度AR】【Android】demo工程使用手記 demo工程獲取和註意事項 百度AR平臺地址：https://ar.baidu.com/testapply 技術文檔地址：https://ai.baidu.com/docs#/DuMixAR-Android-SDK/top AR內容管理地址：https

【百度地圖】百度地圖指定省市進行描邊處理，省市外進行半透明遮蓋。

//指定省市進行描邊處理，省市外進行半透明遮蓋。 function getBoundary2(map,city){ var bdary = new BMap.Boundary(); bdary.get(city, function(rs){//獲取行政區域

【百度地圖】在百度地圖上框出邊界線

程式碼： 一、建立地圖 建立地圖物件；設立中心點以及地圖級別。 var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 12); 二、新增地圖事件

【百度地圖】製作多途經點的線路導航,模擬運動 (vue,typescript)

  網上有從起點到終點的模擬線路和運動，途經點的比較少。 結合網上demo，再進行了一下修改。 VUE （Typescript），先在index.html裡引用 <!DOCTYPE html> <html lang="en"> <head>

紅帽 Red Hat Linux相關產品iso映象下載【百度雲】【更新7.4】

不為什麼，就為了方便搜尋，特把紅帽EL 5、EL6、EL7 的各版本整理一下，共享出來。正式釋出 7.4 ：RedHat Enterprise Server 7.4 for x86_64：rhel-server-7.4-x86_64-dvd.isoSHA-256 Checks

無責任共享 Coursera、Udacity 等課程視訊【百度雲】

無責任共享 Coursera、Udacity 等課程視訊 【百毒雲群組】 這個帖子是我三年前發的，當時還是學生黨收集了不少資源，現在工作後時間越來越少，沒法再更新資源和及時回覆大家的留言。 大家不要再加我百毒雲了，以後直接開啟 [百毒雲]/mb

漸變圓環進度條實現

      閱讀本文章也不需要太多的自定義View基礎，懂一點即可，這裡的實現方式主要是邏輯，邏輯明白了，效果就很好做了。 上個效果圖，給大家看一下： 是不是挺好看的，好的，下面開始實現。 說到環形進度條，我們必不可少的要用到的一個方法就是drawAr

React + css3 實現circle圓環進度條載入

【需求效果圖：如上圖所示】 需求：動態獲取不同的分數，圓環展示對應的百分比分數值: 正確率 70%以下提示文案：還需要繼續加油哦~ 正確率 70% - 90%以下提示文案：不錯，再加把勁~ 正確率 90%及以上提示文案：真棒！ 資料描述：不同的測試

【拓普微】炫酷的進度條效果

 1. 使用 拓普微科技開發有限公司的 組態介面編輯軟體 製作介面： 2.  模擬效果  （20%時 進度條顯示狀態） （75%時 進度條顯示狀態） （100%時 進度條顯示狀態） > 支援觸控按鈕、文字顯示、數字、變數圖示、進度條、曲線、錶盤、動畫、二維碼、日期時間、自定義繪圖等控制元件。

自定義控制元件Android圓環進度條

Android自定義控制元件學習之圓環進度條，學習了一段時間，自定義控制元件，對一些自定義所需要的Api，基本上也掌握了，但是對於比較複雜的自定義控制元件，他們的座標計算 一直比較噁心（可能，我數學比較差~），記錄自定義控制元件學習過程。    對於圓環進度條的自定義

Android繪圖：自定義View之——矩形進度條、圓環進度條、填充型進度條、時鐘

主函式 這幾種進度條的主函式都是類似的，所以下面我只給出了一個填充型進度條的主函式，其他幾個主函式只是在這基礎上改動一下按鈕id(即與各自佈局裡面的id相同即可)，還有改動一下相對應的類即可。 public class MainActivity

安卓自定義圓環進度條的顯示

效果如上圖所示關鍵點：1.需要解決的問題是 自定義view的 適配問題 在不同的 手機上 顯示出來的效果一致2.所需要的 工具類  一個轉換工具 px與dp之間的互轉package com.shenlei.servicemoneynew.util; import androi

Android自定義控制元件之百分比圓環進度條

首先我們先來看一下效果 分析 我們來看這個進度條應該分為3個小部分 1.中間的圓 2.外邊的圓環 3.中間的文字 分開畫 這3部分就是需要我們自己畫出來的，因此我們需要3根畫筆 //設定中心園的畫筆

自定義圓環進度條

一：動畫效果： 二：原始碼： (1)res/values/attrs.xml： <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable

使用 Android Studio自定義View03——圓環進度條

整理總結自鴻洋的部落格：http://blog.csdn.net/lmj623565791/article/details/24500107 要實現的效果如圖： 分析一下，需要這麼幾個屬性：兩個顏色、一個速度、一個圓環寬度 com.cctvjiatao.customvie

Android自定義帶動畫圓環進度條

1.首先是自定義類 package com.yx.yxcustomprogress; import android.content.Context; import android.content.res.TypedArray; import android.graphi

canvas繪製圓環進度條出現模糊效果解決方案

問題 近期用canvas繪製了圓環進度條，但是進度條出現周圍模糊的現象，針對這種現象，網上搜了搜，有人提問，但是貌似沒有很好的解決方案，針對這種情況，提出幾種解決方案，僅供參考！ 模糊效果如下： 解決方案 針對這種情況，我提出幾種解決思路。 一、運用hidpi-canvas-polyfill 的js