Eecharts常用语法属性

    option = {
        // 显示悬浮样式(鼠标滑入)
         tooltip: { 
           trigger: 'axis', // 显示的类型  item/适合饼状图 axis/适合坐标系
           formatter: '{b}<br/>显示的值: {c}' // 悬浮数据的样式,具体参考官网
        },
        // 显示图标顶部的图例组件,需要配合series一起使用,里面的数据需要添加name
         legend: { 
           icon: 'square', // 左边颜色区域的形状
           top: '3%' //  距离图表顶部的距离,其他方向类似
        },
        // 图表在画布上占据的面积  (直角坐标系)
          grid: { 
           left: '3%', // 离画布顶部3%的距离,其他类似
           containLabel: true //grid 区域是否包含坐标轴的刻度标签 --没碰到具体场景
        },
        // X轴相关设置,常用于柱状图和折线图,y轴配置差不多
        xAxis: { 
            type: 'category',  // 坐标轴类型,通常和value类型成对出现
            show: true, // 是否显示轴线
            data: [], // x轴上的数据,当类型为category时显示为刻度上的标签,为value一般使用series中的数据
            axisLabel:{ // 坐标轴刻度标签相关的配置
                show: true, // 是否显示轴线
                rotate: 45, // 标签旋转的度数 负数表示顺时针旋转
                margin:10, // 标签到轴线的距离
                color: 'red', // 标签文字的颜色
                fontSize: 12, // 字体大小
                align: 'center', // 文字在刻度内对齐的方式
                overflow: "truncate", // 文字超出截断显示ellipsis配置的文本,建议参考官网
            },
            axisPointer: { // 坐标轴指示器配置项(同tooltip)
               show: true, // tooltip相关配置会导致指示器直接显示,详情参考官网
               type: "none", // 指示器的类型,柱形的线行的和无
            }
        },
        // 数据配置,多条并行数据直接在数组中添加一组数据
        series:[ 
            // 折线图
            {
                type: 'line', // 图形的种类
                label: { // 标签文字相关配置
                   show: true, // 在图表上显示文本标签
                   position: "top", // 设置标签文字在连接点的位置
                   distance: 5, // 标签文字距离连接点的距离
                   rotate: 10, // 标签文字旋转
                   offset: [0, 0], // 标签文字的偏移量
                   color: 'red', // 标签文字颜色
                   fontSize: 20, // 文字大小
                },
                 symbol: "circle", // 设置折线连接点的样式
                 symbolSize: 5, // 设置连接点的大小
                 showSymbol: true, // 是否显示连接点
                 itemStyle: { // 折线图形相关配置,
                   color: "red", // 折线图形的颜色
                 },
                 lineStyle: { // 折线相关的配置
                  color: "rgba(255, 0, 0, 1)", // 折线的颜色,和itemStyle一同设置颜色时,折线以该条为准
                   width: 1, // 折线的粗细
                   type: "dashed", // 折线的类型
                   cap: "round", // 折线末端的样式,折线很宽的时候比较明显
                   opacity: 0.1, // 透明度
                },
                areaStyle: { // 折线区域面积配置
                  color: "rgba(1, 47, 255, 1)", // 区域内的颜色
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // 渐变色的写法
                    {
                      offset: 0, // 0%处的颜色
                      color: 'rgba(50, 215, 227, .2)'
                    },
                    {
                      offset: 1, // 100%处的颜色
                      color: 'rgba(58,77,233,.1)'
                    }
                  ])
                },
                data: [], // 数据,单个数据可以设置不同的样式,参考官网
            },
            // 柱状图
            {
                type: "bar", 
                colorBy: "data", // 可以设置柱体为不同颜色
                showBackground: true, // 显示柱体的背景
                backgroundStyle: {
                   color: 'rgba(180, 180, 180, 1)' // 柱体背景的颜色
                   borderRadius: 10, // 背景的圆角
                },
                label: { // 标签文字
                  show: true, // 是否显示标签
                  rotate: 20, // 文字旋转角度,负值为顺时针
                  offset: [0, 0], // 文字的偏移量
                  color: 'red', // 颜色
                  position: 'top', // 标签显示的位置
                },
                itemStyle: { // 柱体的颜色,优先级比colorBy高
                  color: "rgba(23, 1, 1, 1)",
                  borderColor: 'red', // 柱体的线条,线条相关参考官网
                  opacity: 0.4, // 柱体透明度
                },
                emphasis: { // 是否启用高亮效果,需要叠加形式的柱状图才能看到效果
                focus: 'series', // 聚焦类型
                disabled: true, // 关闭高亮
                },
                barGap:'0%', // 不同系列柱子之间的距离
            },
            // 饼状图
            {
                type: "pie", 
                minAngle: 10, // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
                avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            }
        ]
    }