2. 程式人生 > >Echarts圖表庫。餅圖 pie 圖表元件的使用。餅圖元件API使用規則--DOME

Echarts圖表庫。餅圖 pie 圖表元件的使用。餅圖元件API使用規則--DOME

阿新 • • 發佈：2019-01-15
var myChart = echarts.init(document.getElementById('main')); var option = { baseOption:{ //調色盤顏色列表 // color:['#015196','#0084f1', '#6abaff','#d6d6d6'], title:{ //標題元件，包含主標題和副標題。 show:true, left:'48%'
, //標題元件距離 圖表元件走邊的距離 bottom:'80%', itemGap:5, text:'可用額度', textStyle:{ color:'#464646', fontWeight:'normal', fontSize:15, }, subtext:'17,000,000,00人民幣'
, subtextStyle:{ color:'#000000', fontSize:15, fontWeight:'bold', }, }, tooltip: { //提示框元件 show:true, trigger: 'item', formatter:function
(params) { console.log(params); //系列名稱 var seriesName = params.seriesName; //類目名稱 var name = params.name; //百分比 var percent = params.percent; return seriesName+'<br/>類別：'+name + '<br/>' + '所佔百分比例：'+percent+'%'; }, }, legend: { //圖例元件 type:'scroll', left:'48%', //圖列元件距離 圖表元件走邊的距離 (% or px) top:'20%', orient: 'vertical', align:'left', itemGap:13, selectedMode:true, itemWidth:15, itemHeight:15, height:210, //圖例元件的高度，設定指定高度確定顯示圖例出來的個數。 textStyle:{fontWeight:'bold',fontSize:12}, scrollDataIndex:0, //預設選中，暫未實現 selected:genData().selected, formatter:function(name) { var arrays = option.baseOption.series[0].data; for(var i = 0;i<arrays.length;i++) { //名稱 var type_name = arrays[i].name; //人民幣佔比 var price = arrays[i].price; if(type_name == name) { return name+'\n'+price; break; } } }, data:['合金貿易1','合金貿易2','合金貿易3','合金貿易4','合金貿易5','合金貿易6','合金貿易7'], // data:['合金貿易1','合金貿易2','合金貿易3','合金貿易4'], }, //圖表系列元件 series: [ { type:'pie', name:'圖表詳情', center: ['25%','40%'], radius: ['23%', '50%'], //圖形上的文字標籤 label: { normal:{ /** * outside:餅圖扇區外側，通過視覺引導線連到相應的扇區。 * inside:餅圖扇區內部。 * center:在餅圖中心位置 */ position: 'inside', formatter: '{d}%', }, }, data:[ {value:20, name:'合金貿易1',price:'6,000,000.00人民幣'}, {value:20, name:'合金貿易2',price:'6,000,000.00人民幣'}, {value:20, name:'合金貿易3',price:'1,000,000.00人民幣'}, {value:20, name:'合金貿易4',price:'2,000,000.00人民幣'}, {value:20, name:'合金貿易5',price:'6,000,000.00人民幣'}, {value:20, name:'合金貿易6',price:'6,000,000.00人民幣'}, {value:20, name:'合金貿易7',price:'6,000,000.00人民幣'}, ] }, ], }, //針對移動端適應的引數的自定義調整 //一般手機代表解析度請參考 media:[ { query:{ //小於等於240px時發生 maxWidth:240, }, option:{ title:{ }, series:{ }, legend:{ }, } }, { query:{ //小於等於320px時發生 maxWidth:320, }, option:{ title:{ }, series:{ }, legend:{ }, } } ] } myChart.setOption(option); function genData() { return { selected: {'合金貿易1':true,'合金貿易2':true,'合金貿易3':true,'合金貿易4':true,'合金貿易5':true,'合金貿易6':false,'合金貿易7':false} }; }

相關推薦

Echarts圖表庫。餅圖 pie 圖表元件的使用。餅圖元件API使用規則--DOME

var myChart = echarts.init(document.getElementById('main')); var option = { baseOption:{ //調色盤顏色列表 //

Echarts/highcharts:圖表庫的模型框架---pie/bar折線圖

1.匯入 Echarts/highcharts資原始檔   2.在html中準備一個層 <div id="container" style="min-width:700px;height:400px"></div> 3. 找到折線圖的靜態程

ECharts圖表常用屬性參考 -- 餅圖Pie

option = { color: ['#5697d0', '#56cfd0', '#56d078', '#a9d056', '#d0b856', '#d07b56', '#a656d0', '#d056a1', '#d05656', '#5673d0'],

echarts圖表庫 實現簡單 雷達圖

<script type='text/javascript' src="js/echarts.js" charset='utf-8'></script> 2.核心程式碼

HelloCharts圖表庫之餅狀圖

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.andro

android開源圖表庫MPAndroidChart（曲線圖、直方圖、餅狀圖）

一個可以拖動縮放的圖表庫，包含曲線圖、直方圖、餅狀圖，其中直方圖支援3d效果。 該庫的可擴充套件性強，程式碼相對規範，最近一次更新有很大改進，如果不喜歡AChartEngine的過於複雜可以考慮在此庫的基礎上開發自己的圖表類。 linechart 填充式lineCha

【視覺化】DataV接入ECharts圖表庫 視覺化利器強強聯手

DataV接入ECharts圖表庫 視覺化利器強強聯手  摘要： 兩個扛把子級產品的結合，而且文末有彩蛋。 DataV 資料視覺化是搭建每年天貓雙十一作戰大屏的幕後功臣，ECharts 是廣受資料視覺化從業者推崇的開源圖表庫。從今天開始

vue專案中使用Echarts 動態更改圖表資料 ， Vue 折線圖、柱狀圖等圖表動態重新整理 ，

問題：在vue元件中，用echarts外掛 動態獲取、修改圖表資料 解決：已解決！ 第一步：開啟cmd命令視窗 安裝echarts依賴 安裝：npm install echarts -S 第二步：在main.js中全域性引入   //引入echarts的圖表外掛

安卓 使用開源AChartEngine圖表庫畫折線圖

安卓 使用開源AChartEngine圖表庫畫折線圖 一、簡述        記--使用AChartEngine開源圖表庫繪製簡單的折線圖。        AChartEngine是一個開源的Android圖

ECharts圖表外掛(4.x版本)使用（一、關係圖force節點顯示為自定義影象/圖片，帶分類選擇）

導讀 ECharts，一個使用 JavaScript 實現的開源視覺化庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的向量圖形庫 ZRender，提供直觀，互動豐富，可高度個性化定製的資料視覺

三大圖表庫：ECharts 、 BizCharts 和 G2，該如何選擇？

ECharts 、 BizCharts 和 G2，該如何選擇？ 最近阿里正式開源的BizCharts圖表庫基於React技術棧，各個圖表項皆採用了元件的形式，貼近React的使用特點。同時BizCharts基於G2進行封裝，Bizcharts也繼承了G2相關特性。公

echarts之柱狀圖(bar)、餅狀圖(pie)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echartsLineTest</title>

JS 餅圖/環形圖表

js 圓形/環形圖表 最近公司專案要求開發環形圖表客戶端（Android/IOS）元件，一開始想使用原生實現，但是需要開發2套程式碼，最後決定使用js來實現圖表，原生呼叫html程式碼展示。 效果如下： 直接上程式碼： html程式碼： <html

ECharts圖表元件之關係圖

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body>

15.純 CSS 創作條形圖，不用任何圖表庫

畫出 uppercase line 單個 gradient span 間距 mar hover 原文代碼：https://segmentfault.com/a/1190000014768534#articleHeader1 HTML代碼： <html>

Android自定義圖表庫（一）：圓形進度圖

效果預覽 自定義View第一步：確認View的大小 無論是自定義一個View還是ViewGroup我們必須得先為其制定在不同MeasureSpecMode下的大小，我這裡就不講解什麼繪製原始碼了什麼的，我們就直接實戰。 我們在onMeasure中需要呼叫se

HelloCharts圖表庫之折線圖

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" an

DataV接入ECharts圖表庫 視覺化利器強強聯手

摘要： 兩個扛把子級產品的結合，而且文末有彩蛋。DataV 資料視覺化是搭建每年天貓雙十一作戰大屏的幕後功臣，ECharts 是廣受資料視覺化從業者推崇的開源圖表庫。從今天開始，DataV 企業版接入了 ECharts 圖表元件，當你使用 DataV 搭建視覺化

js圖表庫——ECharts

先收藏這篇文章。 原文地址：http://www.cnblogs.com/zrtqsk/p/4019412.html?utm_source=tuicool 　　不貼地址了，想要了解的看一下特性就好了，想要入門的繼續往下看。 　　ECharts 底層依賴於 Htm

AchartEngine圖表庫之動態折線圖(多條)

炫酷效果圖 實現步驟 1 設定點集 <span style="font-size:18px;">public void addXYSeries(XYMultipleSeriesDataset dataset, String[] titles,