又到了一波總結(jié)的時(shí)候了轩缤，今天我要總結(jié)的效果要這樣命迈，一個(gè)圖里要有折線圖，柱狀圖火的，然后還要有提示框壶愤，我這里面折線圖和柱狀圖所代表的都是相同的數(shù)據(jù)，如果折線圖和柱狀圖同時(shí)存在馏鹤，那么提示框只取折線或柱狀圖里面的數(shù)據(jù)一種出來(lái)顯示征椒。最后我會(huì)提出gitHub地址
改造前.gif
改造后.gif
從上面我們可以看出來(lái)，改造后的樣子滿足了我們的需求假瞬。
代碼如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
#demo {
margin-top: 100px;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="../script/echarts.min.js"></script>
<script type="text/javascript" src="../script/testData.js"></script>
<script type="text/javascript">
$(function () {
initLinexChart(data.salesQtyPart);
});
/**
* @date:2018/5/4 13:44
* 作者:GaoXiaoXiong
* 功能: 初始化折線圖
* @salesQtyPartList 集合參數(shù)
*/
function initLinexChart(salesQtyPartList) {
var listValue00 = [], listValue01 = [], listValue02 = [];
var zheYearList = [], zhuYearList = [], totalYearList = [];//年份
var isFirat = false;
//從集合中取出value數(shù)據(jù)集
for (var i = 0; i < salesQtyPartList.length; i++) {
var sale = salesQtyPartList[i];
for (var j = 0; j < sale.data.length; j++) {
if (j == 0) {
listValue00.push(sale.data[j].value);
} else if (j == 1) {
listValue01.push(sale.data[j].value);
} else {
listValue02.push(sale.data[j].value);
}
if (!isFirat) {//填寫年份
if (j == sale.data.length - 1) {
isFirat = true;
}
zheYearList.push(sale.data[j].year + "折線圖");
zhuYearList.push(sale.data[j].year + "柱狀圖");
}
}
}
for (var i = 0; i < zheYearList.length; i++) {
totalYearList.push(zheYearList[i]);
}
for (var i = 0; i < zhuYearList.length; i++) {
totalYearList.push(zhuYearList[i]);
}
var dom = document.getElementById("demo");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
tooltip: {//提示框組件
trigger: 'axis',//坐標(biāo)軸觸發(fā)陕靠，主要在柱狀圖，折線圖等會(huì)使用類目軸的圖表中使用脱茉。只有設(shè)置了這個(gè)參數(shù)才會(huì)出現(xiàn)豎直的線條
axisPointer: { // 坐標(biāo)軸指示器剪芥，坐標(biāo)軸觸發(fā)有效
type: 'line' //指示器類型。
},
formatter: function (params) {//提示框自定義
return formatterTip(params);
},
},
toolbox: {
show: false,
},
legend: {//這里定義了折線圖上面那2排的顏色琴许，顯示的樣子
data: totalYearList,
textStyle: {
color: "#92DCFB",
}
},
color: [//定義了線條税肪，柱狀圖的顏色，顏色值的順序你要跟你上面的totalYearList存儲(chǔ)的順序要一直
"#E9B943", "#BA674E", "#CD3E29",
"#205397", "#479AE6", "#57C3FB"
],
grid: {//定義折線圖距離左邊多少右邊多少上邊多少的距離
left: '3%',
right: '4%',
bottom: '3%',
top: '30%',
containLabel: true //grid 區(qū)域是否包含坐標(biāo)軸的刻度標(biāo)簽榜田。如果不寫true益兄，那么縱坐標(biāo)的位置就不會(huì)算進(jìn)上面設(shè)置的坐邊右邊上邊下邊里面去
},
xAxis: [//定義X軸
{
type: 'category',//設(shè)置X軸的類型
name: '月',
axisLabel: {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。
color: "#92DCFB",//設(shè)置顏色
fontSize: '12',//字體大小
interval: 1,//設(shè)置每個(gè)相鄰之間少1個(gè)數(shù)
rotate: 0,//刻度標(biāo)簽旋轉(zhuǎn)的角度
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']//數(shù)據(jù)源
}
],
yAxis: [//定義y軸
{
type: 'value',
name: '噸',
axisLabel: {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置箭券。
color: "#92DCFB",
fontSize: '14',
interval: 0,
},
axisLine: {//坐標(biāo)軸顏色
lineStyle: {//坐標(biāo)軸顏色
color: "#92DCFB",
},
},
},
],
series: [//系列列表净捅。每個(gè)系列通過(guò) type 決定自己的圖表類型
{
name: zheYearList[0],//數(shù)據(jù)項(xiàng)名稱。如果不寫這個(gè)那么上面的2排里面就會(huì)少一個(gè)
type: 'line',//設(shè)置為折線圖
data: listValue00,
showAllSymbol: true,//示折線圖上所有小標(biāo)簽
symbolSize: 5,//標(biāo)記的大小
},
{
name: zheYearList[1],//數(shù)據(jù)項(xiàng)名稱辩块。
type: 'line',
data: listValue01,
showAllSymbol: true,//示折線圖上所有小標(biāo)簽
symbolSize: 5,//標(biāo)記的大小
},
{
name: zheYearList[2],//數(shù)據(jù)項(xiàng)名稱蛔六。
type: 'line',
data: listValue02,
showAllSymbol: true,//示折線圖上所有小標(biāo)簽
symbolSize: 5,//標(biāo)記的大小
},
{
name: zhuYearList[0],
type: 'bar',//設(shè)置為柱狀圖
data: listValue00,
tooltip: {
formatter: function (datas) {
return "";
}
}
},
{
name: zhuYearList[1],
type: 'bar',
data: listValue01,
},
{
name: zhuYearList[2],
type: 'bar',
data: listValue02,
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
/**
* @date:2018/5/9 17:38
* 作者:GaoXiaoXiong
* 功能: 控制提示框的樣式
*/
function formatterTip(params) {
//移除重復(fù)的數(shù)據(jù)
for (var i = 0; i < params.length; i++) {
for (var j = params.length - 1; j > i; j--) {
if (params[j].data == params[i].data) {
params.splice(j, 1);
break;
}
}
}
var tip = '';
for (var i = 0; i < params.length; i++) {//這里是自己定義樣式， params[i].marker 表示是否顯示左邊的那個(gè)小圓圈
if (params[i].value != 0) {
tip = tip + params[i].marker + params[i].seriesName.substring(0, 4) + '年' + ':' + params[i].value + '<br/>';
}
}
return tip;
}
</script>
</html>
一些參數(shù)的說(shuō)明:
tooltip:提示框組件
trigger: 'axis'設(shè)置這個(gè)后會(huì)有豎直的線出來(lái)
axisPointer: { type: 'line' }指示器類型
formatter: function (params) {return formatterTip(params);}//提示框自定義
legend:里面可以定義折線圖上面那2排的顏色废亭，顯示的樣子
color:定義了線條国章，柱狀圖的顏色，顏色值的順序你要跟你上面的totalYearList存儲(chǔ)的順序要一直
grid:設(shè)置折線圖距離上下左右的距離
containLabel:是否將縱坐標(biāo)的值也納入grid設(shè)置的里面計(jì)算
xAxis:這里面可以定義X軸
interval://設(shè)置每個(gè)相鄰之間少XXXXX個(gè)數(shù)
rotate:文字旋轉(zhuǎn)角度
series: 要顯示的樣例表豆村，通過(guò)設(shè)置type等來(lái)控制是否顯示圖標(biāo)液兽，樣式等。
showAllSymbol:示折線圖上所有小標(biāo)簽
