Echart常规配置项
数据集: dataset
js
dataset: {
// 提供一份数据。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},系列: series
把数据集（dataset）的行或列映射为系列（series）
js
series: [
{
type: 'bar',
name: '2015', //---系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
name: '2016',
data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
name: '2017',
data: [97.7, 83.1, 92.5, 78.1]
}
]坐标轴: xAxis、yAxis
js
xAxis(yAxis): {
type: 'time', //类型
name: '销售时间' //名字
axisLine: {
symbol: 'arrow',
lineStyle: {
type: 'dashed'
}
},
axisTick: {
length: 6,
lineStyle: {
type: 'dashed'
// ...
}
},
axisLabel: {
formatter: '{value} kg',
align: 'center'
// ...
}
},标题: title
js
title: {
id: '001', //---组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件
show: true, //---是否显示标题
text: '柱状图示例', //---标题文本
textStyle:{ //---主标题内容样式
color:'#bbb', //---颜色
fontStyle: 'normal', //---字体风格normal、italic、oblique
fontWeight: 'normal', //---字体粗细normal|100、bold|200、bolder|300、lighter|400
fontSize:'12', //---字体大小
lineHeight: '12', //---行高
width:'200px', //---文本显示宽度
height:'100px', //---文本显示高度
textBorderColor: '#333', //---文字本身的描边颜色。
textBorderWidth: '2px', //---文字本身的描边宽度。
textBorderType: 'solid', //---文字本身的描边类型:'solid'、'dashed'、'dotted'
},
subtext:'副标题', //-副标题文本
subtextStyle:{//---副标题内容样式
//配置和textStyle一样
},
padding:[10,0,0,0],//---标题内边距，单位px[上，右，下，左]，因为图形是放在一个容器中,因此用padding属性来定位
textAlign: 'auto', //---整体（包括 text 和 subtext）的水平对齐。'auto'、'left'、'right'、'center'
left:'20', //---组件离容器的距离left、top、right、bottom
itemGap: '10', //---主副标题之间的间距。
backgroundColor: 'transparent', //---标题背景色，默认透明rgb(128, 128, 128)
borderColor:'#442', //--标题的边框颜色。
borderWidth:'2px', //---标题的边框线宽。
borderRadius: 5, //---圆角半径，单位px，[5, 5, 0, 0]
}
//更多配置看官方文档https://echarts.apache.org/zh/option.html#title图例: legend
```js
legend: {
type:'plain',//----图例类型，默认为'plain'，当图例很多时可使用'scroll'
show: true, //---是否显示图例
top:'1%',//----图例相对容器位置,top\bottom\left\right
width: 'auto', //---图例组件的宽度。默认自适应
height = 'auto', //---图例组件的高度。默认自适应
textStyle:{ //----图例内容样式
color:'#000', //---所有图例的字体颜色
//backgroundColor:'black', //---所有图例的字体背景色
},
data: [//----图例内容
{
name:'销量',
icon:'roundRect',//----图例的外框样式'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
textStyle:{
color:'#000', //----单独设置某一个图例的颜色
//backgroundColor:'black',//---单独设置某一个图例的字体背景色
}
}
]
}
```
提示框: tooltip
js
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
backgroundColor: 'rgba(255, 255, 255, 0.8)',
position: function (pos, params, el, elRect, size) {
var obj = { top: 10 };
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
},
extraCssText: 'width: 170px'
}工具栏: toolbox
js
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
}网格: grid
直角坐标系内绘图网格
js
grid: [
{ left: '7%', top: '7%', width: '38%', height: '38%' },
{ right: '7%', top: '7%', width: '38%', height: '38%' },
{ left: '7%', bottom: '7%', width: '38%', height: '38%' },
{ right: '7%', bottom: '7%', width: '38%', height: '38%' }
]区域缩放: dataZoom
js
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
]