ECharts Liquid Fill Chart-5-背景、文字、邊框設定
阿新 • • 發佈:2019-01-09
1、程式碼
// ECharts 水球圖外掛,需要額外外掛指令碼,參見上方“指令碼” // 完整配置引數參見:https://github.com/ecomfe/echarts-liquidfill //兩種方式的formatter var option = { series: [{ type: 'liquidFill', name: 'series name', //series name radius: '35%', center: ['50%', '20%'], backgroundStyle: { borderWidth: 5, //內邊框寬度 borderColor: 'yellow', //背景內邊框 color: 'white', //背景顏色 shadowColor: 'red', //陰影 shadowBlur: 10, //陰影模糊 }, outline: { borderDistance: 20, //邊框距離 itemStyle: { borderWidth: 5, borderColor: 'yellow', shadowBlur: 10, shadowColor: 'red' } }, data: [{ name: 'data name', //data name value: 0.6 //By default, the text label of liquid fill chart displays percentage of the first data. For example, for a chart with data [0.6, 0.5, 0.4, 0.3], default text is 60%. }, 0.5, 0.4, 0.3], label: { //To change the text, you may use label.formatter, which can be set to a string or function. normal: { formatter: '{a}\n{b}\nValue: {c}', //If it is a string, {a} series name, {b} data name,{c} data value. textStyle: { color: 'red', //波浪上文字顏色 insideColor: 'yellow', //波浪內部字型顏色 fontSize: 30 }, position: ['30%', '50%'], //Text position is at the center by default. label.position can be set to be 'inside', 'left', 'right', 'top', 'bottom', or horizontal and vertical positions like ['10%', '20%'], which means '10%' to the left (controlled by label.align, which can be 'left', 'center', or 'right') and '20%' to the top (controlled by label.baseline, which can be 'top', 'middle', or 'bottom'). // position:'top' // align: 'center', // baseline: 'center' } } }, { type: 'liquidFill', name: 'series name', //series name radius: '35%', center: ['50%', '60%'], data: [{ name: 'data name', //data name value: 0.6 }, 0.5, 0.4, 0.3], label: { show:true, color: tempcolor[2],//和邊框顏色同色 fontSize: 16, normal: { show:true, position: ['50%', '50%'],//圈中文字的位置,If it is a string, {a} refers to series name, {b} to data name, and {c} to data value. formatter: function(param) { return param.value + '/'+allCount+'\n\n' +param.seriesName+ '\n' + '(個)' }, /* textStyle: {//整個wave,則把當前值提出 fontSize: 16, color: tempcolor[2], },*///這種方法不適用了 color: tempcolor[2],//預設背景下的文字顏色 insideColor: tempcolor[2], //水波背景下的文字顏色 fontSize: 16, }, } } ] };