(1)x轴或y轴隐藏
"xAxis": [
{
"show" : false, //数轴及数值全都隐藏
"type": "value",
"name": "销量(kg)",
"splitLine": {
"show": false
}
}
]
"axisLine":{ //只隐藏数轴
"show":false
},
(2)刻度线 网络线隐藏
"axisTick":{ //刻度线
"show":false
},
"splitLine": { //网格线
"show": false
}
(3)y轴显示%
yAxis: [
{
type: 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} %'
},
show: true
}
],
(4)***** x轴显示不全问题 ****
a. 设置x轴倾斜
axisLabel: {
interval:0, //x轴全部展示
rotate:40 //倾斜度
}
b. 字符分割
axisLabel: {
show: true,
formatter: function(params) {
let newParamsName = "";
let paramsNameNumber = params.length;
let provideNumber = 2; //一行显示几个字
let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (let p = 0; p < rowNumber; p++) {
let tempStr = "";
let start = p * provideNumber;
let end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
}
}
(5)grid调整图形位置
grid: {
x: 80, //左
y: 60, //上
x2: 80, //右
y2: 80 //下
},
(6)弹出框自定义
tooltip: {
trigger: 'item',
formatter: function (params) {
var color = params.color;//图例颜色
var htmlStr ='<div>';
htmlStr += params.name + '<br/>';//x轴的名称
//为了保证和原来的效果一样,这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
//添加一个汉字,这里你可以格式你的数字或者自定义文本内容
htmlStr += params.seriesName + ':'+params.value + '笔';
htmlStr += '</div>';
return htmlStr;
}
},
(7)工具栏
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
图片导出: var picBase64Info = myChart.getDataURL();