隨便聊聊～～
最近接了新的項目需求，是有關于周報的事情，所以涉及到了各種柱狀圖，餅圖，散點圖以及地圖等等。即便之前也做過圖表，但是好多的配置項總是算查文檔才能搞明白，所以這次趁著有機會，就在這里小小的總結一下遇到的問題吧。
1、基本配置項
餅圖：
var optionPhase = {
// 標題
title: {
text: '上周（' + _this.bannerData.startTimeMd + '-'+
_this.bannerData.endTimeMd + '）'+
_this.industyName + '領域獲投輪次分布',
// 這里標題中加入了變量 展現形式： 上周（7.29-8.4）金融領域獲投輪次分布
x:'center' // 標題居中顯示
},
// 提示框
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} (mnxgye4%)" // 提示框內容
},
// 工具內容
toolbox: {
show: true,
feature: {
saveAsImage: {} // 保存圖片
}
},
series : [
{
name: '輪次',
type: 'pie', // 餅狀圖
radius : '55%',
center: ['50%', '60%'],
data: dataNonull,
itemStyle: {
// 移入展示樣式
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
// 正常展示樣式
normal:{
label:{
show: true,
formatter: '{b} mjjbh6b%',
textStyle: {
color: '#000'
}
},
// 可以自定義展示顏色
color: function (params) {
var colorList = [
'#0076D0', '#43A8E0', '#22BA6F', '#41CC5D', '#FFA300',
'#F2CE00', '#FF6000', '#FF7020', '#A6A6A6', '#D9D9D9',
'#c1beff', '#c2e7ff', '#fabdff'
];
return colorList[params.dataIndex]
},
labelLine :{show:true}
}
}
]
};
柱狀圖
optionIndusty = {
title: {
text: '上周（7.1-7.7）國內各領域獲投數量',
x:'center'
},
color: ['#0076D0'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
xAxis : [
{
type : 'category',
data : ['企業服務', '電商', '消費生活', '文娛傳媒', '教育', '醫療健康', '非MT', '汽車金融', '無人機', '體育'],
axisTick: { //坐標軸刻度相關設置
alignWithLabel: true
},
axisLabel:{ //坐標軸刻度標簽的相關設置
interval:0,
formatter:function(value)
{
return value.split("").join("\n");
},
// rotate:-90,//傾斜度 -90 至 90 默認為0
margin:10,
textStyle:{
color:"#000"
}
},
}
],
yAxis : [
{
type : 'value',
splitLine: { // y軸分割線
show: false
}
}
],
series : [
{
name:'融資數量',
type:'bar',
barWidth: 20,
data:[10, 33, 4, 8, 15, 25, 52, 39, 30, 20],
itemStyle: {
normal:{ // 柱狀圖上的數值顯示
label:{
show: true,
position: 'top',
textStyle: {
color: '#000'
}
}
}
}
]
};
左右雙向柱狀圖（大多其實都在處理數據。。。）
var nameArr = ['百萬級', '千萬級', '億元級'];
var nameArrTemp = [];
var valueArrMTemp = [];
var valueArrRTemp = [];
var valueArrM = [];
var valueArrR = [];
var wplValue = '';
axios.get(接口地址, {params: sendData})
.then(function (response) {
var dataNonull = response.data.data;
for(var i = 0; i < dataNonull.length;i++) {
if (dataNonull[i].name.indexOf('美元') > -1) {
valueArrM.push(dataNonull[i].value);
} else if (dataNonull[i].name.indexOf('人民幣') > -1) {
valueArrR.push(dataNonull[i].value);
} else if(dataNonull[i].name.indexOf('未披露') > -1) {
wplValue = dataNonull[i].value;
}
}
valueArrM.reverse();
valueArrR.reverse();
for(var j = 0; j < nameArr.length; j++) {
if(valueArrM[j] == 0 && valueArrR[j] == 0) {
} else {
nameArrTemp.push(nameArr[j]);
valueArrMTemp.push(-valueArrM[j]);
valueArrRTemp.push(valueArrR[j]);
}
}
var amountChart = echarts.init(document.getElementById('amountChart'));
var optionAmount = {
title: {
text: '上周（' + _this.bannerData.startTimeMd + '-'+ _this.bannerData.endTimeMd + '）' + _this.industyName + '領域獲投金額分布',
x:'center',
subtext: '未披露的融資數量：' + wplValue,
subtextStyle: {
fontSize: '15',
color: '#555'
}
},
legend: {
data:[ '美元', '人民幣'],
bottom: 0
},
toolbox: { // 工具內容
show: true,
feature: {
saveAsImage: {} // 保存圖片
}
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
},
formatter: function (params, ticket, callback) {
var res = '融資數量' ;
// var res = params[0].name ;
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].name + params[i].seriesName + ' : ' + Math.abs(params[i].value) ;
}
setTimeout(function () {
// 僅為了模擬異步回調
callback(ticket, res);
}, 500)
return 'loading...';
}
},
grid: {
left: '3%',
right: '4%',
bottom: '10%', // 圖表距離
containLabel: true
},
xAxis: {
show: true,
type: 'value',
axisTick: { //坐標軸刻度相關設置
show: false
},
axisLabel : {
formatter: function (value){return Math.abs(value);} //坐標軸顯示的數值都取絕對值
}
},
yAxis: {
type: 'category',
axisTick: { //坐標軸刻度相關設置
show: false
},
data: nameArrTemp
},
series: [
{
name: '美元',
type: 'bar',
barWidth: 15,
stack: '總量',
itemStyle: {
normal:{
label:{
show: true,
position: 'left',
textStyle: {
color: '#000'
},
formatter:function(v){return Math.abs(v.data)}
}
}
},
data: valueArrMTemp
},
{
name: '人民幣',
type: 'bar',
barWidth: 15,
stack: '總量', // 數據堆疊，同類目軸上系列配置相同的stack值可以堆疊放置
itemStyle: {
normal:{
label:{
show: true,
position: 'right',
textStyle: {
color: '#000'
}
},
}
},
data: valueArrRTemp
}
]
};
window.onresize = amountChart.resize;
amountChart.setOption(optionAmount);
})
圖表如下：
image.png
2、常用/遇到過的問題
1、提示框組件
tooltip : {
trigger: 'axis', // 'item'數據項圖形觸發，散點圖，餅圖等無類目軸的圖表中使用。'axis'坐標軸觸發,柱狀圖，折線圖等會使用類目軸的圖表中使用。
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
[圖片上傳失敗...(image-43c46d-1565666494102)]
trigger: 'item',
formatter: "{a} <br/>{b} : {c} (c4ama0w%)"
[圖片上傳失敗...(image-6b6e9d-1565666494102)]
2、圖例組件
legend: {
data: ['上上周', '上周'],
orient: 'vertical', // 垂直顯示 ，默認水平
bottom: 0 // 顯示再底部 left:'left' 顯示在左上部
}
3、工具
toolbox: { // 工具內容
show: true,
orient: 'vertical', // 垂直
left: 'right', // 右部
top: 'center' // 上下居中
feature: {
dataView: ｛ readOnly: false},
restore: {},
saveAsImage: {} // 保存圖片
}
}
[圖片上傳失敗...(image-817ae-1565666494102)]
4、坐標軸橫坐標標簽垂直顯示
xAxis : [
{
type : 'category',
data : nameArr,
axisTick: { //坐標軸刻度相關設置
show: false
},
axisLabel:{ //坐標軸刻度標簽的相關設置
interval:0,
formatter:function(value)
{
return value.split("").join("\n");
},
// rotate:-90,//傾斜度 -90 至 90 默認為0
margin:10,
textStyle:{
color:"#000"
}
},
}
],
[圖片上傳失敗...(image-68fa90-1565666494102)]
5、圖表邊距
grid: {
left: '3%',
right: '4%',
bottom: '10%', // 圖表距離
containLabel: true
},
