eCharts 使用笔记

配置网格距离canvase外层盒子距离

grid: { 
          left: "1%",
          top: "18%",
          right: "4%",
          bottom: "5%",
          containLabel: true  // 这常用于『防止标签溢出』的场景
        },

X轴设置

xAxis: {
          name: "学生",
          boundaryGap: true,  // 坐标轴两边留白策略,为true时不以0刻度开始
          nameTextStyle: {  // 设置name的样式
            color: "#feb00a",
            fontSize: 18
          },
          axisLabel:{    //x轴文字
            // 设置文字叠放
            interval: 0,
            formatter:function(value)
            {
              return value.split("").join("\n");
            },
            textStyle: {   // 文字样式
              color: "#fff",
              fontSize: 18
            }
          },
        dataZoom: [       // 轴坐标数据可滚动
            {
              type: "slider",
              show: true,
              height: 10, // 滚动条高度
              startValue: 0,  // 数据下标为0时开始
              endValue: 39,   // 数据下标为39时结束
              handleSize: 8,
              handleStyle: {
                color: "#7171c3"
              },
            }
          ],
        axisLine: {   // x轴的线
            lineStyle: {  // 线的样式
              color: "#6b6b97",
              width: 3  // 线宽3px
            }
          },
          axisTick: {    // x轴刻度
            alignWithLabel: true,  //在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐如图一
            lineStyle: {
              color: "#6b6b97",
              width: 3
            }
          },
}

图一

Y轴

yAxis: {
      max: 100,   // 最大值
      splitLine: {   // 控制网格线是否显示
            show: false
       },
      axisLabel:{    //y轴文字
            show:true,
            margin: 15,   // 文字到刻度线的距离
            textStyle: {
              color: "#fff",
              fontSize: 20
            }
          },
          nameGap: 25 // 坐标轴名称与坐标轴的距离
}

series设置内容区域

series: [{
      data: data, // 设置y轴的值
      // 设置一条平行于x轴的水平线
            markLine: {
                lineStyle: {
                   type: "dashed", // 类型：虚线
                    color: "#7171c3"
                  },
                data: [
                    {
                        name: "y轴为60的水平线",
                        yAxis: 60
                }
              ]
            },
            itemStyle: {
              // 设置不同图形颜色，回调函数返回json里的data就是value值
              color: function (dt) {
                var y1 = 60,
                  y2 = 80;
                if (dt.data >= y1 && dt.data < y2) {return "#7e7af8"}
                if (dt.data < y1) {return "#ec1228"}
                if (dt.data >= y2) {return "#fed323"}
              }
            },
}]

图二

收藏网站 echarts回调函数的使用