1. 程式人生 > >echart柱形堆積圖-同一組堆積柱子設定同一種顏色

echart柱形堆積圖-同一組堆積柱子設定同一種顏色

//許可權申請人員增長柱狀圖
personCountOption = {
    backgroundColor:'#fff',
tooltip : {
        trigger: 'axis',
padding:10,
axisPointer : {
            type : 'none'
}
    },
// color:['#E50216'],
calculable : true,
grid: {
        x: 45,
x2: 15,
y: 0,
y2: 15,
backgroundColor:'#fff',
borderWidth: 0
},
yAxis : [
        {
            type 
: 'value', axisLine:{ show:false, lineStyle:{ color:'#DDDDDD', width:1 } }, splitLine:{ show:false }, axisLabel:{ show:false, textStyle:{ color:'#999' } } } ], xAxis : [ { type
: 'category', axisLine:{ show:false, lineStyle:{ color:'#DDDDDD', width:0 } }, splitLine:{ show:false }, axisTick:{ show:false }, axisLabel:{ show:false, textStyle:{ color:'#999' } },
data: function () { var list = []; for(var i = 1;i<=12;i++){ list.push(i+'月份'); } return list; }() } ], series : [ { name:'回收授權', type:'bar', stack: '總量', // barWidth:20, itemStyle : { normal: { barBorderRadius: [0, 0, 4, 4], label : {show: false}, color: function(params) { var colorList = [ //柱子顏色 '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001' ]; return colorList[params.dataIndex] } } }, data:[1, 1, 2, 2, 3, 5,1, 1, 2, 3, 3, 5] }, { name:'已拒絕', type:'bar', stack: '總量', // barWidth:20, itemStyle : { normal: { label : {show: false}, color: function(params) { var colorList = [ //柱子顏色 '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001' ]; return colorList[params.dataIndex] } } }, data:[1, 2, 2, 1, 3, 5,1, 2, 2, 1, 3, 5] }, { name:'已授權', type:'bar', stack: '總量', // barWidth:20, itemStyle : { normal: { label : {show: false}, color: function(params) { var colorList = [ //柱子顏色 '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001' ]; return colorList[params.dataIndex] } } }, data:[11, 15, 5, 8, 4, 6,11, 15, 5, 8, 4, 6] }, { name:'待處理', type:'bar', stack: '總量', // barWidth:20, itemStyle : { normal: { label : {show: false}, color: function(params) { var colorList = [ //柱子顏色 '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001' ]; return colorList[params.dataIndex] } } }, data:[9, 8, 5, 9, 2, 10,9, 8, 5, 9, 2, 10] }, { name:'總數', type:'bar', stack: '總量', // barWidth:20, itemStyle : { normal: { barBorderRadius: [4, 4, 0, 0], label : {show: false}, // color:'#E50216' color: function(params) { var colorList = [ //柱子顏色 '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001' ]; return colorList[params.dataIndex] } } }, data:[20, 30, 25, 35, 50, 60,20, 30, 25, 35, 50, 60] } ] };
附圖:

相關推薦

echart堆積-同一堆積柱子設定同一顏色

//許可權申請人員增長柱狀圖 personCountOption = { backgroundColor:'#fff', tooltip : { trigger: 'axis', padding:10, axisPointer : {

echart-一條柱子顯示多個數據

personCountOption = { backgroundColor:'#fff', tooltip: { trigger: 'item', axisPointer: {

Android canvas繪制統計

ext.get hit 選擇 etc new 工廠模式 imp 設計模式 layout 如今非常多應用都須要一些統計圖。眼下第三方的統計圖也有非常多。可是在自己看來僅僅要不是特別耽誤時間還是選擇用canvas自己繪制比較合理。依賴於第三方的繪制在需求上也

折線和綜合,漸變色,造成tooltip小標籤顏色取值不按照series.color顯示

折線和柱形綜合圖,均設定漸變色,此時tooltip小標籤顏色取值不按照series.color顯示 1、series.color=[ 'red' , 'yellow' ],不設定漸變色,折線和柱子依次取值 2、柱子設定漸變色後,柱子的tooltip小標籤顏色取設定的漸變色; 3、折線

Poj 2559 Largest Rectangle in a Histogram(統計中的最大矩形面積)

 給出一個柱形統計圖中,求其中的最大矩形面積 做完這道題,搜了一下題解大部分基本都是單調棧......然而做之前並不知道這是什麼,其實用遞推也可以做這道題,理解起來比較容易。 用兩個陣列l,r記

JAVA報表之JasperReport+iReport5.6 stacked堆積及stacked堆積3D的實現(七)

stacked堆積圖可以對多個類別進行展示,多用於類別多,且需要進行對比的場合。Series指定類別進行分組,即顯示幾塊堆積圖,Category指定X軸的類別欄位,Value指定具體值的欄位。首先建立一個新的空白模板,新增資料來源,拖放一個stacked堆積圖。如圖所示:選擇

32、python繪製、單個、多個、堆積、雙向

目錄 一、繪圖函式 二、案例 第一、單個柱形圖 第二個、多個柱形圖 第三、堆積柱形圖 第四、雙向柱形圖   柱形圖:一種長方形的單位長度,根據資料大小回繪製的統計圖,用來比較兩個或以上的資料(時間或類別) 一、繪圖函式 bar(left,right,

Origin8畫圖:畫百分比堆積

1.簡介    用Origin8繪製百分比堆積柱形圖。圖中的資料Type1和Type2分別表示兩個型別的資料所佔的比例。    2.畫圖步驟(1)新建worksheet表,新增相關資料。然後選中全部資料(一個X多個Y),plot-Columns/Bars-Stack Colu

Excel史上最好看的堆積

前言作為小魔方的隊友,我真的驚呆了,Excel竟能繪製這麼好看的堆積柱形圖和百分比堆積柱形圖,很佩服小魔方的學習能力與創新能力。我的Excel水平感覺遠遠不如小魔方啊,佩服之極!很高興能成為小魔方的隊友!---張傑前天看到DP(Excel繪圖發燒友)在本平臺授權釋出的華爾街日報面積圖

Echart--單個

normal osi width data inter nor itl body char 效果圖: dom: <div class="chartAll" ref="chartAll"></div> js: let chartAll = t

Echart--多個

http cat center itemstyle pre img tip item idt 設置數據: 效果圖: optionAll: { title: { text: ‘營收情況‘, left: ‘

echart修改在上顯示為0的情況

function genBar(id){ var myChart = echarts.init(document.getElementById(id)); myChart.title = '正負條形圖';

echart折線 資料格式化 動態繫結資料 frame處理

var myChart; var eCharts; require.config({ paths : { 'echarts' : '${pageContext.reques

echart動態載入多個

前臺 service層 @Service("hosdeptStatusService") @Transactional public class HosdeptServiceImpl implements HosdeptStatusService {     @Auto

d3 畫簡單的

pen oca func vba head 高度 turn cti ret <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-3

,餅狀JavaScript

column 註意 文件 label max number span item pointf <script type="text/javascript"> $(function () { $(‘#container_2‘).highcharts({

在Echarts 的單擊事件中寫入自定義的參數

cnblogs img ges == innerhtml .com echart 通過 code

ECHARTS和餅數值顯示

echartsECHARTS柱形圖和餅圖數值顯示,官方文檔寫的很不錯,這裏自己單獨梳理一下,以後可能會用的到。1、柱形圖數值顯示 在option添加: label:{ normal:{ show: true, position: ‘to

d3.js——給添加事件出現的問題總結

htm 代碼 lac ring tle log 顏色 out edge 首先做出一個動態的柱形圖(這兒用的d3.js的版本是v3,用v4的話有些函數會發生變化) 效果圖: 代碼: <!DOCTYPE html> <html lang="en">

利用echarts highcharts 實現自定義地圖 關系效果 側邊3D散點

技術 ges 散點圖 chart blog 餅圖 git 分享 charts github 地址: https://https://github.com/Gengshaoxuan/medataMap github 地址: https://https://github.c