Echart常规配置项

Echart常规配置项

数据集: dataset

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）

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

xAxis(yAxis): {
    type: 'time', //类型
    name: '销售时间' //名字
    axisLine: {
      symbol: 'arrow',
      lineStyle: {
        type: 'dashed'     
      }
    },
    axisTick: {
      length: 6,
      lineStyle: {
        type: 'dashed'
        // ...
      }
    },
    axisLabel: {
      formatter: '{value} kg',
      align: 'center'
      // ...
    }
  },

标题: title

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

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

toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  }

网格: grid

直角坐标系内绘图网格

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

dataZoom: [
        {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter'
        },
        {
            id: 'dataZoomY',
            type: 'slider',
            yAxisIndex: [0],
            filterMode: 'empty'
        }
    ]