目录
官网配置详情
title(标题组件)
标题组件，包含主标题和副标题。
legend(图例组件)
图例组件。
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: {
show: true, // 控制图例是否显示
orient: "horizontal", // 图例朝向 horizontal水平默认 vertical 垂直
type: 'scroll', // 分页
pageIconColor: "#333", //翻页按钮颜色
right: "center", // 图例组件离容器右侧的距离 可以是像素(20)、百分比(20%)、内置值（left right center）
itemHeight: 9, // 图例图标的高度 默认14
itemWidth:9, // 图例图标的宽度 默认25
itemGap: 25, // 每个图例之间的间距 默认10
data: tlList, // 图例数组
textStyle: {
color: "#333", // 图例文本颜色
fontSize: 12, // 图例文本大小
width: 180, // 图例总体宽度
overflow: "truncate", // 超出隐藏
fontWeight: "bold", // 图例文本类型
},
},
tooltip(提示框组件)
提示框组件
tooltip: {
trigger: 'axis', // 触发类型 item数据项触发主要用于散点图、饼图，axis坐标轴触发主要用于柱状图、折线图
axisPointer: {
type: 'cross' // 控制鼠标悬浮展现形式，shadow柱子，cross刻度线并且同时显示Y轴的刻度线
},
backgroundColor: '#fff', // 悬浮框背景色
borderColor: '#000', // 悬浮框边框颜色
borderWidth: 1, // 悬浮框边框宽度
textStyle: { // 悬浮框文字样式
color: '#000', // 文本颜色
fontSize: 12 // 文本大小
},
formatter: function (params) { // 自定义鼠标悬浮数据
let result = params[0].name + '<br/>';
params.forEach(function (item) {
result += '<br/>' + item.marker + item.seriesName + ' : ' + item.value + (item.data.dw == null ? '' : item.data.dw)
})
return result;
},
position: function (point, params, dom, rect, size) { // 防止鼠标悬浮内容超出画布
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5;
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
}
},
toolbox(内置工具栏)
工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
toolbox: {
show: true,
feature: {
dataZoom: { // 区域缩放
yAxisIndex: 'none'
},
dataView: { readOnly: false }, // 数据展示
magicType: { type: ['line', 'bar'] }, // 图表类型切换
restore: {}, // 重置
saveAsImage: {} // 保存
}
},
dataZoom(区域缩放)
dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
dataZoom: [
{ // 总体设置
type: 'inside',
start: 0,
end: 100
},
{ // X轴设置
type: 'slider',
show: true,
start: 94,
end: 100,
handleSize: 8
},
{ // Y轴设备
type: 'slider',
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 12,
height: '70%',
handleSize: 8,
showDataShadow: false,
left: '93%'
}
],
xAxis(X轴)
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
xAxis: {
type: 'category', // 值类型，如果设置了值类型，并且没有给定data，会自动从series中提取
data: xAxisData // X轴的值
},
yAxis(Y轴数据)
yAxis: [
{
type: 'value', // 值类型
name: dwData[i], // Y轴名称
position: "right", // Y轴位置
offset: (i - 1) * 40, // 坐标轴偏移量
axisLine: { // 坐标轴线相关设置
show: true, // 显示坐标轴线
},
axisLabel: { // Y轴刻度设置
show: true, // 是否显示刻度
formatter: '{value}', // 标签内容格式化器
}
}
]
series(图表数据)
图表数据
series: [
{
name: '名字',
data: [12,31,23,45], // 数据列表
type: 'line', // 绘图方式
symbol: 'circle', // 图例样式：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
symbolSize: [8, 8], // 图例大小
label: { // 是否显示每个点的详情
show: false, //开启显示
position: 'top', //在上方显示
formatter: '{c}',//显示百分号
textStyle: { //数值样式
color: 'black',//字体颜色
fontSize: 10//字体大小
}
},
yAxisIndex: legendData[i].dw // 数据对应的坐标轴
}
]