Echarts基本设置总结及二次渲染问题

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 px
  position: [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 '
' + param.title + '
'; // 自定义的 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, // 显示legend
      smooth: 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();
});