echarts柱状图大小显示_echarts 折线图，柱状图集一体的tooltip自定义显示

又到了一波总结的时候了，今天我要总结的效果要这样，一个图里要有折线图，柱状图，然后还要有提示框，我这里面折线图和柱状图所代表的都是相同的数据，如果折线图和柱状图同时存在，那么提示框只取折线或柱状图里面的数据一种出来显示。最后我会提出gitHub地址

改造前.gif

改造后.gif

从上面我们可以看出来，改造后的样子满足了我们的需求。

代码如下

content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

Hello APP

#demo {

margin-top: 100px;

width: 100%;

height: 300px;

}

$(function () {

initLinexChart(data.salesQtyPart);

});

/**

* @date:2018/5/4 13:44

* 作者:GaoXiaoXiong

* 功能: 初始化折线图

* @salesQtyPartList 集合参数

*/

function initLinexChart(salesQtyPartList) {

var listValue00 = [], listValue01 = [], listValue02 = [];

var zheYearList = [], zhuYearList = [], totalYearList = [];//年份

var isFirat = false;

//从集合中取出value数据集

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',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。只有设置了这个参数才会出现竖直的线条

axisPointer: { // 坐标轴指示器，坐标轴触发有效

type: 'line' //指示器类型。

},

formatter: function (params) {//提示框自定义

return formatterTip(params);

},

},

toolbox: {

show: false,

},

legend: {//这里定义了折线图上面那2排的颜色，显示的样子

data: totalYearList,

textStyle: {

color: "#92DCFB",

}

},

color: [//定义了线条，柱状图的颜色，颜色值的顺序你要跟你上面的totalYearList存储的顺序要一直

"#E9B943", "#BA674E", "#CD3E29",

"#205397", "#479AE6", "#57C3FB"

],

grid: {//定义折线图距离左边多少右边多少上边多少的距离

left: '3%',

right: '4%',

bottom: '3%',

top: '30%',

containLabel: true //grid 区域是否包含坐标轴的刻度标签。如果不写true，那么纵坐标的位置就不会算进上面设置的坐边右边上边下边里面去

},

xAxis: [//定义X轴

{

type: 'category',//设置X轴的类型

name: '月',

axisLabel: {//坐标轴刻度标签的相关设置。

color: "#92DCFB",//设置颜色

fontSize: '12',//字体大小

interval: 1,//设置每个相邻之间少1个数

rotate: 0,//刻度标签旋转的角度

},

data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']//数据源

}

],

yAxis: [//定义y轴

{

type: 'value',

name: '吨',

axisLabel: {//坐标轴刻度标签的相关设置。

color: "#92DCFB",

fontSize: '14',

interval: 0,

},

axisLine: {//坐标轴颜色

lineStyle: {//坐标轴颜色

color: "#92DCFB",

},

},

},

],

series: [//系列列表。每个系列通过 type 决定自己的图表类型

{

name: zheYearList[0],//数据项名称。如果不写这个那么上面的2排里面就会少一个

type: 'line',//设置为折线图

data: listValue00,

showAllSymbol: true,//示折线图上所有小标签

symbolSize: 5,//标记的大小

},

{

name: zheYearList[1],//数据项名称。

type: 'line',

data: listValue01,

showAllSymbol: true,//示折线图上所有小标签

symbolSize: 5,//标记的大小

},

{

name: zheYearList[2],//数据项名称。

type: 'line',

data: listValue02,

showAllSymbol: true,//示折线图上所有小标签

symbolSize: 5,//标记的大小

},

{

name: zhuYearList[0],

type: 'bar',//设置为柱状图

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) {

//移除重复的数据

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 表示是否显示左边的那个小圆圈

if (params[i].value != 0) {

tip = tip + params[i].marker + params[i].seriesName.substring(0, 4) + '年' + ':' + params[i].value + '
';

}

}

return tip;

}

一些参数的说明:

tooltip:提示框组件

trigger: 'axis'设置这个后会有竖直的线出来

axisPointer: { type: 'line' }指示器类型

formatter: function (params) {return formatterTip(params);}//提示框自定义

legend:里面可以定义折线图上面那2排的颜色，显示的样子

color:定义了线条，柱状图的颜色，颜色值的顺序你要跟你上面的totalYearList存储的顺序要一直

grid:设置折线图距离上下左右的距离

containLabel:是否将纵坐标的值也纳入grid设置的里面计算

xAxis:这里面可以定义X轴

interval://设置每个相邻之间少XXXXX个数

rotate:文字旋转角度

series: 要显示的样例表，通过设置type等来控制是否显示图标，样式等。

showAllSymbol:示折线图上所有小标签