2. 程式人生 > >1.Echarts餅狀圖詳解及示例

1.Echarts餅狀圖詳解及示例

阿新 • • 發佈：2019-01-20
var myChart1 = echarts.init(document.getElementById('pie1')); option1 = { title:{ text:'按型別統計', top:'bottom', left:'center', textStyle:{ fontSize: 14, fontWeight: '', color: '#333' }, },//標題
tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)"， /*formatter:function(val){ //讓series 中的文字進行換行 console.log(val);//檢視val屬性，可根據裡邊屬性自定義內容 var content = var['name']; return content;//返回可以含有html中標籤 },*/
//自定義滑鼠懸浮互動資訊提示，滑鼠放在餅狀圖上時觸發事件 },//提示框，滑鼠懸浮互動時的資訊提示 legend: { show: false, orient: 'vertical', x: 'left', data: ['50%-學生', '25%-老師', '25%-家長'] },//圖例屬性，以餅狀圖為例，用來說明餅狀圖每個扇區，data與下邊series中data相匹配 graphic:{ type:'text', left:'center'
, top:'center', style:{ text:'使用者統計\n'+'100', //使用“+”可以使每行文字居中 textAlign:'center', font:'italic bolder 16px cursive', fill:'#000', width:30, height:30 } },//此例餅狀圖為圓環中心文字顯示屬性，這是一個原生圖形元素元件，功能很多 series: [ { name:'使用者統計',//tooltip提示框中顯示內容 type: 'pie',//圖形型別，如餅狀圖，柱狀圖等 radius: ['35%', '65%'],//餅圖的半徑，陣列的第一項是內半徑，第二項是外半徑。支援百分比，本例設定成環形圖。具體可以看文件或改變其值試一試 //roseType:'area',是否顯示成南丁格爾圖，預設false itemStyle: { normal:{ label:{ show:true, textStyle:{color:'#3c4858',fontSize:"18"}, formatter:function(val){ //讓series 中的文字進行換行 return val.name.split("-").join("\n");} },//餅圖圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等。可以與itemStyle屬性同級，具體看文件 labelLine:{ show:true, lineStyle:{color:'#3c4858'} }//線條顏色 },//基本樣式 emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)',//滑鼠放在區域邊框顏色 textColor:'#000' }//滑鼠放在各個區域的樣式 }, data: [ {value: 50, name: '50%-學生'}, {value: 25, name: '25%-老師'}, {value: 25, name: '25%-家長'}, ],//資料，資料中其他屬性，查閱文件 color: ['#51CEC6','#FFB703','#5FA0FA'],//各個區域顏色 },//陣列中一個{}元素，一個圖，以此可以做出環形圖 ],//系列列表 }; myChart1.setOption(option1);

相關推薦

1.Echarts餅狀圖詳解及示例

var myChart1 = echarts.init(document.getElementById('pie1')); option1 = { title:{ text:'按型別統計', top:'bottom',

【eCharts】echarts餅狀圖資料重疊導致指示線及顯示文字重疊解決

轉載自：https://www.cnblogs.com/minjh/p/9081893.html   先看他的，再看我的，不看我的也行 1. 解決前   2.解決後 3.程式碼 function makePie(id, title, name,

ECharts之柱狀圖詳解

1、引入echarts.js檔案<!-- 引入echarts 圖形化展示 --> <script type="text/javascript" src="${ctxStatic}/common/yuzhong/js/echarts/echarts.js"&g

echarts餅狀圖

使用echarts實現個人月消費統計，下面是我寫的一個案例： 效果圖： html程式碼： <html> <head> <meta charset="UTF-8"> <title>扇形圖</title> <

Echarts學習筆記1——echarts柱狀圖講解

做資料視覺化時，Echarts是很好用的。這裡來一個學習筆記系列。 一、引用echarts Echarts可以用npm進行安裝，也可以直接匯入到web專案進行引用，博主採用了引用方式直接分析它的使用。 匯入相關js： <script src="js/ec

Echarts餅狀圖預設顯示lable

Echarts餅狀圖預設顯示指定lable // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('graph-donut')); // 指定圖表的配置項和資料

echarts餅狀圖隱藏標示線和標示文字

//在建專案分佈餅狀圖 proHoursPieOption = { title : { // text: '材價來源佔比分析', x: 15, y: 15, textStyle

ER圖詳解及例項解析

ER圖分為實體、屬性、關係三個核心部分。 實體是長方形，屬性是橢圓形，關係為菱形。 實體（entity）： 即資料模型中的資料物件（即資料表），用長方體來表示，每個實體都有自己的實體成員（entity member）或者說實體物件（entity instance），例如

Python畫柱狀圖詳解(matplotlib)

matplotlib是python最著名的繪相簿，它提供了一整套和matlab相似的命令API，十分適合互動式地進行製圖。而且也可以方便地將它作為繪圖控制元件，嵌入GUI應用程式中。它的文件相當完備，並且Gallery頁面中有上百幅縮圖，開啟之後都有源程式。因此如果你需要

MpAndroid 柱狀圖詳解

1. 問題出現    最近專案資料繁多，要做一些圖示實現資料視覺化。自己寫可以實現但耗費時間長，所以找了下各種Charts的開源專案，最後找到了MpAndroidChart。它的文件比較詳細，擴充套

Android總結篇——Intent機制詳解及示例總結

ets mp3 pro domain 一般來說 ssa star wrap 無線 一.Intent介紹： Intent的中文意思是“意圖，意向”，在Android中提供了Intent機制來協助應用間的交互與通訊，Intent負責對應用中一次操作的動 作、動作涉及

JPA註解詳解及示例

文章出處：https://blog.csdn.net/zhengchao1991/article/details/70236919 1、用例項介紹JPA 使用JPA，肯定是有ORM的意思在裡面，當然我們首先要定義一個實體類（要將 Java 類指定為 JPA 實體，請使用 @Entity 批註

Java基礎：&與&&，|與| |的聯絡與區別（詳解及示例）

&與&& 的聯絡與區別 一、&與&&的相同點   &與&& 都可作為 邏輯“與”的運算，即當運算子兩邊表示式結果都為True時，運算結果返回True；否則當某一表達式為False時，運算結果返回False 。

python學習之網站的編寫（HTML，CSS，JS）（三）----------input系列的標籤詳解及示例程式碼（可上傳到伺服器form標籤）

文章編排，我們首先來講一下input系列的各種內容，然後用一個示例程式碼來清晰的理解其中特定的含義 input系列： 1.輸入文字內容： <input type="text" name="user"/>起個名字易於在伺服器端進行處理 2.輸入密碼內容:

JS中Cookie詳解及示例展示

Cookie的作用 cookie機制將資訊儲存於使用者硬碟，因此可以作為全域性變數，這是它最大的一個優點。它可以用於以下幾種場合。 （1）儲存使用者登入狀態。例如將使用者id儲存於一個cookie內，這樣當用戶下次訪問該頁面時就不需要重新登入了，現在很多

mybatis xml詳解及示例

說明：主要介紹mybatis   xml檔案的一般屬性。 <select id="findUserAll" parameterType="com.zpkj.space.model.query.UserQuery" resultType="com.zpkj.spac

JPA使用詳解及示例

1、用例項介紹JPA 使用JPA，肯定是有ORM的意思在裡面，當然我們首先要定義一個實體類（要將 Java 類指定為 JPA 實體，請使用 @Entity 批註）： package com.creditcloud.lending.entities; import com.

Java排序演算法詳解及示例彙總——超詳細

氣泡排序、選擇排序、直接插入排序、二分法排序、希爾排序、快速排序、堆排序、歸併排序、基數排序，共9中排序演算法詳解和程式碼示例。示例中全部採用從小到大排序，編碼方式為本人理解的思路，演算法思想也是自己理解的口語表達方式，若想檢視更準確的演算法思想和程式碼示例可直接搜尋各演算法

C# sort 方法詳解及示例

諸如List<T>等泛型集合類，直接提供了sort（）方法用於將集合中的元素進行排序。 但是，其前提是集合中存放的是可直接排序的基本型別，如List<int>, List<double>，如果 我們定義了一個自定義型別 Class MyClass,並建立一個自定義型別

Oracle建立表語句(Create table)語法詳解及示例

8. 較複雜的建立表例子SQL> CREATE TABLE s_emp(id NUMBER(7)CONSTRAINT s_emp_id_pk PRIMARY KEY,last_name VARCHAR2(25)CONSTRAINT s_emp_last_name_nn NOT NULL,first_na