1. 程式人生 > >Echarts bar圖示怎麼顯示百分比

Echarts bar圖示怎麼顯示百分比

將程式碼更改為如下程式碼:

option = {
    title: {
        x: 'center',
        text: 'Age',
        subtext: 'Rainbow bar for Age',
        link: 'http://echarts.baidu.com/doc/example.html'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}:\n{c}%'
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    grid: {
        borderWidth: 0,
        y: 80,
        y2: 60
    },
    xAxis: [
        {
            type: 'category',
            show: true,
            data: ['4-14', '15-24', '25-34', '35-44', '45-54', '55-64', '65以上']
        }
    ],
    yAxis: [
        {
            type: 'value',
          	axisLabel: {
                  show: true,
                  interval: 'auto',
                  formatter: '{value} %'
                },
            show: true
        }
    ],
    series: [
        {
            name: 'Age',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                        ];
                        return colorList[params.dataIndex]
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{b}\n{c}%'
                    }
                }
            },
            data: [12,21,10,4,12,5,6,5,25,23,7],
            markPoint: {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0)',
                    formatter: function(params){
                        return '<img src="' 
                                + params.data.symbol.replace('image://', '')
                                + '"/>';
                    }
                },
                data: [
                    {xAxis:0, y: 350, name:'4-14', symbolSize:20, symbol: 'image://../asset/ico/折線圖.png'},
                    {xAxis:1, y: 350, name:'15-24', symbolSize:20, symbol: 'image://../asset/ico/柱狀圖.png'},
                    {xAxis:2, y: 350, name:'25-34', symbolSize:20, symbol: 'image://../asset/ico/散點圖.png'},
                    {xAxis:3, y: 350, name:'35-44', symbolSize:20, symbol: 'image://../asset/ico/K線圖.png'},
                    {xAxis:4, y: 350, name:'45-54', symbolSize:20, symbol: 'image://../asset/ico/餅狀圖.png'},
                    {xAxis:5, y: 350, name:'55-64', symbolSize:20, symbol: 'image://../asset/ico/雷達圖.png'},
                    {xAxis:6, y: 350, name:'65以上', symbolSize:20, symbol: 'image://../asset/ico/和絃圖.png'},
                    //{xAxis:7, y: 350, name:'Force', symbolSize:20, symbol: 'image://../asset/ico/力導向圖.png'},
                    //{xAxis:8, y: 350, name:'Map', symbolSize:20, symbol: 'image://../asset/ico/地圖.png'},
                    //{xAxis:9, y: 350, name:'Gauge', symbolSize:20, symbol: 'image://../asset/ico/儀表盤.png'},
                    //{xAxis:10, y: 350, name:'Funnel', symbolSize:20, symbol: 'image://../asset/ico/漏斗圖.png'},
                ]
            }
        }
    ]
};
                    

樣例圖:


相關推薦

Echarts bar圖示怎麼顯示百分比

將程式碼更改為如下程式碼: option = { title: { x: 'center', text: 'Age', subtext: 'Rainbow bar for Age', link: 'h

解決echarts餅圖顯示百分比,和顯示內容字體及大小

fonts mat 好的 pan har tle title log option // 基於準備好的dom,初始化echarts實例 var pieEchart = echarts.init(document.getElementById(‘pi

Echarts bar顯示百分比

-s nbsp 漏鬥 chart spa saveas bow -1 漏鬥圖 1 option = { 2 title: { 3 x: ‘center‘, 4 text: ‘ECharts例子個數統計‘, 5

Echarts-之顯示百分比

對於使用echarts要顯示百分比,要改兩個地方,第一個地方時座標軸顯示為百分比的格式,第二個是讓值以百分比的形式顯示,如50,在圖上面顯示為50%。 yAxis: [ { type: 'value',

echarts中使用餅狀圖顯示百分比

如圖:需要在標題顯示所佔百分比 使用方式:圖中標記部分 series : [{ name: '型別', type: 'pie', radius : '55%

progressBar顯示百分比

class brush har log csharp sha gpo highlight body this.lab_AllFiles.Text = progressBarAllFile.Value * 100 / progressBarAllFile.Maximum +

ECharts x軸顯示正負極

一、問題 要求顯示的柱狀圖有正負值,如圖效果: 二、經過 找官網上關於正負極的例子,再通過查詢配置選項,美化為客戶需要的樣式。 三、結果 // FDIOption let FDIOption = { color: ['#004a79

hicharts堆疊柱狀圖堆疊資料標籤顯示百分比

HTML <div id="container" style="min-width: 500px; height: 400px"></div> <script src="./js/highcharts.js"></script> 這個應該都看的

App Shortcuts實現長按圖示顯示快捷入口

文章目錄 App Shortcuts 使用Shortcut 動態使用 靜態使用 App Shortcuts App Shortcuts是Andro

select框預設樣式去除(隱藏的小圖示顯示

CSS程式碼 /*清除ie的預設選擇框樣式清除,隱藏下拉箭頭*/           select::-ms-expand { display: none; }            

(圖文)SVN檔案/資料夾圖示顏色不顯示問題解決辦法、SVN資料夾和檔案狀態圖示顯示不正常

svn檢出的資料夾上沒有綠色的對號,或者紅色的感嘆號標識。仍然是windows預設的資料夾。 解決方法: 首先,用win+R鍵開啟 執行 視窗,裡面輸入regedit(登錄檔),確定進入 首先我們找到localmachine,點選進入,下面找到software,展開下面的節點 在sof

Canvas實現多個圓形進度條顯示百分比,並繫結各自的click事件

Canvas實現多個圓形進度條顯示百分比,並繫結各自的click事件 目錄 Canvas實現多個圓形進度條顯示百分比並繫結各自的click事件 目錄 實現效果 製

Excel、PPT圖示顯示異常問題

1.造成該問題的原因是,WPS和Office同時安裝以後,解除安裝了WPS,造成Office的圖示找不到 2.解決方案   a.首先重新安裝WPS,然後找到配置工具->高階設定->修改預設開啟方式   b.從網上下載“FileTypesMan(管理系統檔案關聯)”   c.開啟後會自動掃描

android環狀顯示百分比、環狀百分比檢視實現

效果圖: 百分比下帶文字 只顯示百分比 實現: 自定義一個View,重寫onDraw方法: @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas);

db2使用sql語句查詢表空間使用率(直接顯示百分比

  ----檢查表空間使用率1---- select char(TBSP_NAME,50) as TBSP_NAME, TBSP_USABLE_PAGES, TBSP_USED_PAGES, rtrim(100*TBSP_USED_PAGES/TBSP_USABLE_PAGES)||'

圖示顯示之bmp資料提取

        在Windows下,任何各式的圖片檔案(包括視訊播放)都要轉化為點陣圖個時候才能顯示出來,各種格式的圖片檔案也都是在點陣圖格式的基礎上採用不同的壓縮演算法生成的(Flash中使用了適量圖,是按相同顏色區域儲存的)。 一、下面我們來看看點陣圖檔案(*.BMP)

Vue專案中引入iconfont 圖示庫 和 圖示顯示成小方塊的問題解決

這兩天弄了個vue的小demo ,引入了iconfont 的圖示,沒想到是噩耗的開始,一直顯示的是小方塊,一步步排查踩坑把問題解決。 首先看看官方對專案引入iconfont 的介紹。 unicode引用 unicode是字型在網頁端最原始的應用方式,特點是: 相容性最

基於echarts圖示庫的構建(產品方案構思篇)

沒想到有生之年會自己來構思產品,唏噓之餘不禁感慨,果然人們都活成了自己討厭的樣子嗎:-(    按專案的需求,我們需要實現一個圖表庫,那麼這個圖表庫是幹嘛的呢,首先他是可配置的,其次他是靈活的,在你配置完某一個模組的圖表之後,相應的模組就會產生相應的圖表,聽起來好像

react + webpack使用阿里iconfont,解決:圖示顯示小方塊

問題 使用 create-react-app 腳手架建立的專案,在使用iconfont時,一直不成功,效果顯示為小方塊 前置 為了解決元件間樣式的汙染,使用CSS Modules,附上阮大神教程, CSS Modules 很容易學,因為它的規則少,同時又非常有

libcurl庫實戰之下載ftp檔案並實時顯示百分比

前言 說實話,就這種東西我居然搞了快兩個小時,一開始沒有搞懂curl函式中設定的回撥函式用法以及將引數傳入回撥函式的意義,經過我查閱官網並融合官網與某些網路知識,寫出這個可以在下載時顯示下載百分比的程式碼(其實主要是網路例項不多,其實一旦看過例項,理解起來就很容易) 相關