1. 程式人生 > >echarts餅圖如何修改百分比位數

echarts餅圖如何修改百分比位數

今天工作中要求echarts生成的餅圖需要顯示百分比並保留一位小數,在echarts的series.lable.formatter中可以設定該屬性。

值得注意的是 自帶的{d}%預設保留兩位小數,如需修改小數位數,需要自己寫一個函式。

<script type="text/javascript">
        // 基於準備好的dom,初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項和資料
var option = {
    title : {
        text: '住院醫療品質',
        //2.重大疾病醫療、
        //3.癌症醫療、
        //4.意外傷殘醫療
        //------------------
        //xx先生養老需求、xx女士養老需求(環形)
        // subtext: '純屬虛構',
        x:'center'
    },
    tooltip : {
        // trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        top: 'center',
        left: 'right',
        // 圖例名字和資料的名字一定要一致,滑鼠懸停圖例和單擊圖例有功能
        data: ['已購買日額型險種','缺口金額']
    },
    series : [
        {
            name: '訪問來源',
            type: 'pie',
            radius : ['50%', 0],
            // 水平位置,垂直位置
            // center: ['50%', '60%'],
            label:{            //餅圖圖形上的文字標籤
                normal:{
                    show:true,
                    position:'inner', //標籤的位置
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 16    //文字的字型大小
                    },
                   
 formatter:function(data){ return data.percent.toFixed(1)+"%";} 

使用這段程式碼後,效果如下圖所示。特此記錄。

相關推薦

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

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

echarts如何修改百分比位數

今天工作中要求echarts生成的餅圖需要顯示百分比並保留一位小數,在echarts的series.lable.formatter中可以設定該屬性。值得注意的是 自帶的{d}%預設保留兩位小數,如需修改小數位數,需要自己寫一個函式。<script type="text/

Echarts更改顏色、顯示數據且換行

gen val tex png es2017 trigge nbsp charts 代碼 var option = { title : { text: ‘數據來源‘, x:‘center‘ }, tooltip : { tri

解決echarts不顯示資料為0的資料

如圖所示 餅圖資料為0但是還是會顯示lableline和lable 解決方法 var echartData = [{ value: data_arry[0]==0?null:data_arry[0], name: '常駐人口' }] 傳資料時判斷資料是否為空,如果為空的話 就填入null

【程式碼】用Python玩轉微信,echarts,WordCloud雲圖,自動回覆訊息,好友地區熱

參考用Python玩轉微信(一),做了一些修改 import re import os import time import itchat from echarts import Echart, Legend, Pie import wordcloud from wordcloud im

echarts

 1、引入js <script src="echarts.min.js"></script> 2、js <div id="main" style="width: 600px;height: 400px;background: #F2F2F2;"&g

vue.js echrts實現百分比

顯示效果 元件呼叫 <template> <div> 總數1<el-input-number v-model="total1"></el-input-number> 數量1<el-input-number v

echarts角度起始角度位置和生長方向

想改變餅圖生長起始角度,用startAngle屬性,但是找不到餅圖的起始位置和生長方向,研究半天終於找到了 舉個栗子 資料: series: [{ name:‘專案’, type:‘pie’, radius: [‘32%’, ‘50%’], minAngle:

echarts如何設定懸浮提示框在中間顯示?

http://www.echartsjs.com/option.html#tooltip.position   tooltip.position string, Array, Function   提示框浮層的位置,預設不設定時位置會跟隨滑鼠的位置。 可選:

echarts 結合thinkphp 的使用

首先看看echars官網上餅圖用法的例項(如下圖): 然後來說說這個餅圖結合Thinkphp的用法。 思路是這樣的: 1.控制器先查詢出要的資料包括:legend裡data的資料,series裡data的資料。 2.把得到的資料處理成json資料,分配到檢視。 3.利用分

echarts不顯示資料為0的資料

首先闡述下為什麼會有這個需求,這個和echarts自身的顯示效果有關。 如果你選擇的展示圖形為餅圖,然後你的資料裡有一條資料為0,那麼展示的資料就為一條直線,看上去效果並不好, 會很突兀。 當然如果你的業務需求就算是直線的話也要展示出來,那麼下面的文章你可以略過了,對你畫圖

Echarts柱形調整文字大小(java程式碼)

1.餅圖:    Pie pie = new Pie();         pie.center("50%", "50%").radius(100);         ItemStyle style = new ItemStyle();         Normal nor

資料視覺化:(echarts入門手冊:vue+echarts+demo詳解)

1.示例截圖 1.1vue前端框架做基礎 1.2餅圖的Demo   2.怎麼引入 2.1用npm新增相關依賴檔案 在當前前端檔案為路徑的命令列中輸入: npm install echarts --save 等待安裝完畢 2.2在main.js

echarts常用配置項

let myChart2 = this.$echarts.init( document.getElementById("Index-echart") ); myChart2.setOption({ color: ["#4F96E2",

如何給eCharts區域指定顏色

在option中增加屬性color,並指定幾種顏色,此顏色將根據餅圖的區域個數迴圈,程式碼段如下: option = { title : { text: '全域性指標狀態分佈圖', x:'left',

ECharts從後臺動態獲取資料並展示

$.post( url, {'id' : gridStationSeq  },function(result) {if (result != null) {var label=[];var data = JSON.parse(result);var arr=[];alert

Echarts各項數值和佔比顯示,以及字型大小調整

series : [ {//name : '',name:'',type : 'pie',radius : '65%',center : [ '50%', '50%' ],label : {normal : {formatter: '{b}:{c}: ({d}%)',tex

ECharts屬性的學習

簡介 ECharts,縮寫來自Enterprise Charts,商業級資料圖表,一個純Javascript的圖表庫,可以流暢的執行在PC和移動裝置上,相容當前絕大部分瀏覽器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底層

echarts 引導線周圍文字位置的改變

app.title = '巢狀環形圖'; option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, leg

vue2.0實現echarts(pie)效果展示

最近做的專案需要餅狀圖展示資料的功能,於是便引入echarts做了一個餅狀圖的效果展示。由於只用到echarts其中的餅圖,所以就單獨在需要的模組引用,避免全域性引用影響效能,減少不必要的載入。一.使用 cnpm 安裝 Echartscnpm install echarts