Echarts 常用属性

 自己做个记录，也希望能帮助到需要帮助的人。

    // 标题
	title: {
		text: "" // 标题 支持 /n 换行
		textStyle: {} // 主标题的样式
		subtext: "" // 副标题 支持 /n 换行
		zlevel: 1 // 用于 Canvas 分层 不同的 zlevel 值 放在不同的 Canvas 中
		z: 1 // 显示的层级 比 zlevel 的优先级低 但是不会创建新的 Canvas
		top: 'auto' // 距离上侧距离
		left: 'auto' // 距离左侧距离
		right: 'auto' // 距离右侧距离
        buttom: 'auto' // 距离下侧距离
	}

	// 图例
	legend: {
		show: true // 是否显示图例
        orient: 'horizontal / vertical' // 图例布局朝向 默认 horizontal 横向 vertical 纵向
        top: 'auto' // 距离上侧距离
		left: 'auto' // 距离左侧距离
		right: 'auto' // 距离右侧距离
        buttom: 'auto' // 距离下侧距离
        itemGap: 10 // 图例每项之间的间隔
	}

	// 提示框
	tooltip: {
		show: true // 是否显示提示框
        trigger: 'item / axis  / none' // item 单个触发 主要用与散点图
        							   //  axis 同一个Y轴的全部触发  														                              
                                       //  none 都不触发

        axisPointer: { // 坐标指示器
            type: 'line / shadow / none / cross'
            							/**
            							* line 直线指示器
            							* shadow 阴影指示器
            							* none 无指示器
            							* cross 十字准星指示器
            							*/
        }
        position: 'left / right' // 提示框展示的位置
        formatter: function(params){
            // 自定义提示框内容
        }
	}

	// 导出图表
	toolbox: {
		feature: { 
            saveAsImage: { title: "导出图表" } 
        },
        right: "50",
	}
    
    // 坐标指示器
	axisPointer: {
		show: true // 显示坐标轴 默认不显示
        link: [{ xAxisIndex: "all" }] // 不同轴的 axisPointer 可以进行联动
	}
        
    // 在一个div展示两个图
	grid: [
		{ bottom: "55%" }, // 第一个图的位置
        { top: "53%" } // 第二个图的位置
	]
        
    // X轴
	xAxis: [
		{
            type: "value / category / time / log",
            									/**
            									* value 数据轴
            									* category 类目轴
            									* time 时间轴
            									* log 对数轴
            									*/
            gridIndex: 0, // X轴所在 grid 的索引
            data: []
        }
        {
        	type: "category",
            gridIndex: 1, // X轴所在 grid 的索引
        	dat: []
        }
	]
        
    // Y轴
	yAxis: [
		{
            type: "value / category / time / log",
            									/**
            									* value 数据轴
            									* category 类目轴
            									* time 时间轴
            									* log 对数轴
            									*/
            name: '名称' // Y 轴上面显示的名称
            axisLabel: { // Y 轴展示的刻度 可以拼接单位
            	formatter: "{value}"
        	}
        	gridIndex: 0
        }
        {
        	name: '名称'
            position: "right" // 可以设置名称展示位置
            gridIndex: 1
            min: 0 // 坐标轴刻度最小值
            max: 100 // 坐标轴刻度最大值
        }
	]
        
    // 数据展示区域
	series: [
		{
            name: '折线图'
            type: 'line'
            smooth: true // 折线图设置平滑曲线
			showSymbol: false // 是否显示折线上面的圆点
            lineStyle: {} // 线条样式
        	itemStyle: {} // 全盘的样式
            areaStyle: { // 设置区域填充样式
              color: {
                type: "linear", // type：设置颜色的类型，可以是字符串或者数组。如果是字符串，示使用单一颜色填充整个区域；如果是数组，则表示使用渐变颜色填充整个区域。
                x: 0, // 表示渐变颜色的起始位置的x坐标，取值范围为0-1。
                y: 0, // 表示渐变颜色的起始位置的y坐标，取值范围为0-1。
                x2: 0, // 表示渐变颜色的结束位置的x坐标，取值范围为0-1。
                y2: 1, // 表示渐变颜色的结束位置的y坐标，取值范围为0-1。
                colorStops: [
                  { offset: 0, color: "#d3efe2" }, // 0%处颜色
                  { offset: 1, color: "white" }, // 100%处颜色
                ],
                global: false, // 应该是范围为全局
              },
            },
            // 指定相应坐标轴 与 gridIndex 相对应
            xAxisIndex: 0 // 在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: 0 // 在单个图表实例中存在多个 y轴的时候有用。
			data: [] // 数据
        }
        {
            name: '柱状图'
            type: 'bar'
            stack: 'total' // 数据堆叠 在同个类目轴上系列配置相同的 stack 值可以堆叠放置。
            // 指定相应坐标轴 与 gridIndex 相对应
            xAxisIndex: 1 // 在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: 1 // 在单个图表实例中存在多个 y轴的时候有用。
            data: [] // 数据
            position:"inside";  // 自适应在柱状图的中间位置
            // 柱形图**外部**的上  下   左   右位置
            position："top  bottom left right";
            // 柱形图**内部**的上          下                 左             右位置
            position: "insideTop  insideBottom  insideLeft insideRight";    
            // 这里的x,y 是相对柱形图的原点坐标来定位的，（其实就是每条柱状图的底部的中心点标）
            position：(x,y);
            // (x,y)的两种形式 :1.绝对像素值
            position:(10,10);
            //  2.相对的百分比
            positon:(20%,30%);
        }
		{
            name: '散点图'
            type: 'scatter'
            data: [] // 数据
        }
		{
            type: "lines",
            coordinateSystem: "cartesian2d", // 坐标系
            polyline: true, // 是否支持多线段
            effect: {
              // 线程特效的配置
              show: true, // 是否显示特效
              trailLength: 0.2, // 特效尾迹的长度
              period: 10, // 光点移动速度
              symbolSize: [7, 20], // 线两端标记大小
              symbol: "circle", // 特效图标标记
              color: "#8cf3c1", // 设计标记颜色
            },
            // 设置流动圆点的样式 normal 风格 opacity 透明度 curveness 边的曲线
            lineStyle: { normal: { width: 1, opacity: 0, curveness: 1 } },
            zlevel: 1, // 相当于 Echarts 的层级 z相比zlevel优先级更低，而且不会创建新的Canvas ，zlevel 层级不一样会放置在不同的 Canvas 上面
            data: [
              // 流动光点的数据
              {
                coords: [
                  ["202301", "23943"], // 起点
                  ["202302", "25283"],
                  ["202303", "28428"],
                  ["202304", "27373"],
                  ["202305", "26655"],
                  ["202306", "28378"], // 终点 
                    / polyline 为 true 的话 数据可以有多个 为 false 的话 数据只能有两个
                ],
              },
            ],
          },
	]
	dataZoom: [
		{// 第一个 dataZoom 组件
            show: true, // 显示滑动条
            realtime: true, // 拖拽时是否实时的更新系列的视图
            start: 0 // 起点
            end: 100 // 终点
            startValue: 0, // 数据窗口范围的起始数值
            endValue: 11, // 数据窗口范围的结束数值
            height: 20 // 滑动条高度
            bottom: '5%' // 距离底部
            xAxisIndex: [0, 1], // 表示这个 dataZoom 组件控制 第一个 和 第二个 xAxis
          },
          {// 第二个 dataZoom 组件
            / inside 有滑动条可以拖拽可以通过滚轮滑动  slider 只可以用滑动条
            type: "inside", // 数据缩放组件会以滑块的形式显示在图表的内部
            zoomLock: true // 只能通过滚轮来进行缩放
            realtime: true,
            start: 0 // 起点
            end: 100 // 终点
            startValue: 0,
            endValue: 11,
            height: 20 // 滑动条高度
            bottom: '5%' // 距离底部
            xAxisIndex: [0, 1], // 表示这个 dataZoom 组件控制 第一个 和 第二个 xAxis
          },
	]