Echarts：配置信息

---

官网配置详情

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;
  }
},

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  // 数据对应的坐标轴
	}
]