因功能需要,需要體現業務辦理量及環比,故通過echarts的柱狀圖和折線圖結合共同達到該效果;
①柱狀圖因區域數量不確定,爲保證查看的效果,使用dataZoom
組件用於區域縮放;
②折線圖因有正負數,故選擇環比最小和最大值作爲折線圖的起始座標。
另圖例使用漸變色,見option設置
html elecBarChart需設定高度
<div class="full-width">
<div id="elecBarChart" class="elecBarChart"></div>
</div>
js
//顯示業務辦理量趨勢柱形-折線圖
function showBarChart(data){
var elecBarChart = echarts.init(document.getElementById('elecBarChart'));
var elecBarOption = getElecBarOption();
$scope.barMax = parseFloat(data[0].qoq);
$scope.barMin = parseFloat(data[0].qoq);
for(var i = 0;i < data.length;i++){
var cur = parseFloat(data[i].qoq);
var cur2 = parseFloat(data[i].qoq);
cur > $scope.barMax ? $scope.barMax = cur : null;
cur2 < $scope.barMin ? $scope.barMin = cur2 : null;
elecBarOption.xAxis[0].data.push(data[i].area_name);
elecBarOption.series[0].data.push(data[i].biz_num);
elecBarOption.series[1].data.push(data[i].qoq);
}
elecBarOption.yAxis[1].min = Math.floor($scope.barMin);//折線圖y軸的最大座標
elecBarOption.yAxis[1].max = Math.ceil($scope.barMax);//折線圖y軸的最小座標
elecBarChart.setOption(elecBarOption);
}
function getElecBarOption() {
var option = {
legend: {//圖例組件
x: 'center',
y: 'bottom',
show: true,
textStyle: {//圖例的公用文本樣式。
fontSize: 14,
color: "#333",
},
itemGap: 20,//圖例每項之間的間隔。橫向佈局時爲水平間隔,縱向佈局時爲縱向間隔。
data: ['業務辦理量', '環比'],//圖例的數據數組。
inactiveColor: '#ccc',//圖例關閉時的顏色。
},
grid: {//直角座標系內繪圖網格
bottom: '12%',//grid 組件離容器下側的距離。
left: '1%',
right: '10%',
containLabel: true//grid 區域是否包含座標軸的刻度標籤。
},
dataZoom: [//dataZoom 組件 用於區域縮放,從而能自由關注細節的數據信息,或者概覽數據整體,或者去除離羣點的影響。
{
show: true,
start: 0,
end: 100
},
{
type: 'inside',
start: 0,
end: 100
},
],
xAxis: [
{
type: 'category',
data: [],
axisPointer: {
type: 'shadow'
},
axisTick: {
show: true,
interval: 0
},
axisLabel: {
fontSize: 14,
color: "#333",
},
}],
yAxis: [
{
type: 'value',
show:true,
splitNumber: 10,//座標軸的分割段數
axisLabel: {
fontSize: 14,
color: "#333",
},
splitLine: {
show: false//是否顯示分隔線。
},
},
{
type: 'value',
min: '',//最小座標
max: '',//最大座標
axisLabel: {
fontSize: 14,
color: "#333",
formatter: '{value} %'
},
splitLine: {
show: false//是否顯示分隔線。
},
}
],
series: [
{
name:'業務辦理量',
type:'bar',
data:[],
barWidth : '50%',
itemStyle : {
normal : {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//圖例使用漸變色
offset: 0,
color: 'rgb(0, 102, 255)'
}, {
offset: 1,
color: 'rgb(0, 153, 255)'
}]),
label : {
show : true,
position : 'top',
textStyle : {
fontSize : '15',
fontWeight : 'bold',
color: 'rgb(51, 51, 51)',
}
},
},
},
},
{
name:'環比',
type:'line',
yAxisIndex: 1, //這裏要設置哪個y軸,默認是最左邊的是0,然後1,2順序來。
data:[],
symbolSize:10,
itemStyle : {
normal : {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 204, 102)'
}, {
offset: 1,
color: 'rgb(255, 153, 51)'
}]),
label : {
show : true,
position : 'top',
textStyle : {
fontSize : '14',
color: 'rgb(255, 156, 54)',
}
}
},
},
},
]
}
return option;
}
效果
注:此爲個人筆記及總結,有誤或有更好的解決方案請指正!謝謝