Echarts：配置信息

---

官网配置详情

title(标题组件)

标题组件，包含主标题和副标题。

legend(图例组件)

图例组件。
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: {show: true,  // 控制图例是否显示orient: "horizontal", // 图例朝向 horizontal水平默认 vertical 垂直type: 'scroll',  // 分页pageIconColor: "#333", //翻页按钮颜色right: "center",  // 图例组件离容器右侧的距离 可以是像素(20)、百分比(20%)、内置值（left right center）itemHeight: 9, // 图例图标的高度 默认14itemWidth:9, // 图例图标的宽度 默认25itemGap: 25, // 每个图例之间的间距 默认10data: 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  // 数据对应的坐标轴}
]