option设置

var dom = document.getElementById("echart"); 

获取实例容器，一般是一个具有高宽的div元素。

var myChart = echarts.init(dom); 

创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。

tooltip

var option = {tooltip: {trigger: "axis",axisPointer: {type: 'cross'},backgroundColor: 'rgba(245, 245, 245, 0.8)',borderWidth: 1,borderColor: '#ccc',padding: 10,textStyle: {color: '#000'},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'}}

1. trigger 触发类型。可选类型’item’、‘axis’ 、 ‘none’
2. axisPointer 坐标轴指示器配置项。
   (注意： tooltip.axisPointer 中诸配置项的优先级低于轴上的 axisPointer 的配置项。)
3. backgroundColor 提示框浮层的边框颜色。
4. borderWidth、borderColor、padding提示框浮层的边框宽 边框颜色 提示框浮层内边距，单位px。
5. textStyle 提示框浮层的文本样式。
6. position 提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。

// 绝对位置，相对于容器左侧 10px, 上侧 10 pxposition: [10, 10]// 相对位置，放置在容器正中间position: ['50%', '50%']

回调函数如下：
(point: Array, params: Object|Array., dom: HTMLDomElement, rect: Object, size: Object) => Array
参数：
point: 鼠标位置，如 [20, 40]。
params: 同 formatter 的参数相同。
dom: tooltip 的 dom 对象。
rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。

返回值：
可以是一个表示 tooltip 位置的数组，数组值可以是绝对的像素值，也可以是相 百分比。
也可以是一个对象，如：{left: 10, top: 30}，或者 {right: ‘20%’, bottom: 40}。

如下示例：

  position: function (point, params, dom, rect, size) {// 固定在顶部return [point[0], '10%'];}

或者：

  position: function (pos, params, dom, rect, size) {// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。var obj = {top: 60};obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;return obj;}

**inside** 鼠标所在图形的内部中心位置，只在 trigger 为'item'的时候有效。
**top** 鼠标所在图形上侧，只在 trigger 为'item'的时候有效。
**left** 鼠标所在图形左侧，只在 trigger 为'item'的时候有效。
**right** 鼠标所在图形右侧，只在 trigger 为'item'的时候有效。
**bottom** 鼠标所在图形底侧，只在 trigger 为'item'的时候有效 

7. extraCssText 额外附加到浮层的 css 样式。

axisPointer

axisPointer: {link: {xAxisIndex: 'all'},label: {backgroundColor: '#777'}
},

1. link 属性，不同轴的 axisPointer 可以进行联动，在这里设置。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。
2. label 坐标轴指示器的文本标签样式设置。

toolbox

工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

toolbox: {show: true,showTitle: false, // 隐藏默认文字，否则两者位置会重叠feature: {saveAsImage: {show: true,title: 'Save As Image'},dataView: {show: true,title: 'Data View'},},tooltip: { // 和 option.tooltip 的配置项相同show: true,formatter: function (param) {return return '<div>' + param.title + '</div>'; // 自定义的 DOM 结构},backgroundColor: '#222',textStyle: {fontSize: 12,},extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // 自定义的 CSS 样式}
},

legend

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
type选项：
plain：普通图例。缺省就是普通图例。
scroll：可滚动翻页的图例。当图例数量较多时可以使用。

  legend: {top: "6%",data: label,textStyle: {color: "#fff" // 图例文字颜色},type: "scroll",}

grid

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴

  grid: {left: "2%",right: "5%",bottom: "3%",containLabel: true}

1. containLabel 区域是否包含坐标轴的刻度标签。
2. containLabel 为 false 的时候：
   grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
   这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。
3. containLabel 为 true 的时候：
   grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
4. grid 还有以下常用属性：backgroundColor、borderColor、borderWidth…

其他设置

  xAxis: {type: "category",boundaryGap: false, // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。//类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。//非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。axisLabel: {  // 坐标轴刻度标签的相关设置。show: true, // 是否显示刻度标签。textStyle: { // 字体样式。color: "#fff"},interval: count // 坐标轴刻度标签的显示间隔，在类目轴中有效。// 默认会采用标签不重叠的策略间隔显示标签。// 可以设置成 0 强制显示所有标签。// 如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。},splitLine: { // 坐标轴在 grid 区域中的分隔线。//网格线lineStyle: {type: "dashed", //设置网格线类型 dotted：虚线   solid:实线color: "gray"  // 分隔线颜色，可以设置成单个颜色。// 也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。},show: true // 隐藏或显示},axisLine: { // 坐标轴轴线相关设置。lineStyle: {color: "#fff" // 坐标轴线线的颜色。}},data: this.newTime},yAxis: {type: "value",splitLine: {lineStyle: {type: "dashed",color: "gray"},show: true //隐藏或显示},axisLabel: {show: true,textStyle: {color: "#fff" // 设置坐标轴上的字的颜色}},axisLine: {lineStyle: {color: "#fff" // 设置xy轴的线的颜色}},minInterval: 0.005},series: [{data: arr[item],type: "line", // 显示类型name: item, // 显示legendsmooth: true, // 是否平滑曲线显示。symbolSize: 1, // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。connectNulls: true, // 将断点连接itemStyle: {color: "#32CD32" // 颜色设置}}]
};
myChart.setOption(option, true); // 设置为true，解决echarts二次渲染时出错
window.addEventListener("resize", function() {myChart.resize();
});