暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

Echarts中Option 【Color-Title-Tooltip组件】属性设置

IT那活儿 2022-11-02
911

点击上方“IT那活儿”公众号,关注后了解更多内容,不管IT什么活儿,干就完了!!!

Echarts中Option常用属性设置

test() {
      var myChart = echarts.init(document.getElementById("main"));
      let option = {

1. 全局调色盘
color: ["#c23531"],
2. 系列自己的调色盘
series: [
            {
              type: "bar",
              // 此系列自己的调色盘
              color: ["#dd6b66"],
              // ...
            },
            {
              type: "pie",
              // 此系列自己的调色盘
              color: ["#37A2DA"],
              // ...
            },
          ],

3. Title:标题组件
title: {
          x: "left", // 'left' | 'right' | 'center' | '100px'
          y: "4%", // 'top' | 'bottom' | 'center' | '100px'
          // 标题
          show: true, //是否显示
          text: "标题内容",
          textStyle: {
            color: "#fff", // 主标题文字的颜色
            fontStyle: "normal", // 主标题文字字体的风格
            fontWeight: "normal", // 主标题文字字体的粗细
            fontFamily: "sans-serif", // 主标题文字的字体系列
            fontSize: 18, // 字体大小
            lineHeight: "30", // 行高
            textBorderColor: "transparent", // 文字本身的描边颜色
            textBorderWidth: 0, // 文字本身的描边宽度
            textShadowColor: "transparent", // 文字本身的阴影颜色
            textShadowBlur: 0, // 文字本身的阴影长度
            textShadowOffsetX: 0, // 文字本身的阴影 X 偏移
            textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移
          },
          subtext: "副标题内容", // 副标题文本
          subtextStyle: {
            color: "red",
            fontSize: "16",
          }, //副标题样式
          textAlign: "auto", //水平对齐
          textVerticalAlign: "auto", // 垂直对齐
          triggerEvent: false, // 是否触发事件
          padding: 5, // 标题内边距
          itemGap: 10, //主副标题之间的间距
          left: 10, // 距离 left top right bottom
          x: "center", // 水平安放位置,默认为左对齐
          y: "4%", // 垂直安放位置,默认为全图顶端
          backgroundColor: "pink", // 标题背景色
          borderColor: "#ccc", // 标题的边框颜色
          borderWidth: 5, // 标题的边框线宽
          borderRadius: 2, // 圆角半径
          shadowBlur: 10, //图形阴影的模糊大小
          shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
          shadowOffsetX: 5, // 阴影水平方向上的偏移距离
          shadowOffsetY: 5, //阴影垂直方向上的偏移距离
        },

4. Tooltip:提示框组件
tooltip: {
          trigger: "axis", //触发类型
          triggerOn: "click", //提示框触发的条件
          showContent: true, //是否显示提示框浮层
          alwaysShowContent: true, //是否永远显示提示框内容
          showDelay: 0, //浮层显示的延迟,单位为 ms
          hideDelay: 100, //浮层隐藏的延迟,单位为 ms
          enterable: false, //鼠标是否可进入提示框浮层中
          confine: false, //是否将 tooltip 框限制在图表的区域内
          transitionDuration: 0.4, //提示框浮层的移动动画过渡时间,单位是 s
          position: ["50%", "50%"], //提示框浮层的位置,默认不设置时位置会跟随鼠标的位置
          formatter: "{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器
          backgroundColor: "transparent", //标题背景色
          borderColor: "#ccc", //边框颜色
          borderWidth: 0, //边框线宽
          padding: 5, //图例内边距
          textStyle: mytextStyle, //文本样式
          axisPointer: { // 鼠标放在
            type: "cross", //默认为line,line直线,cross十字准星,shadow阴影
            crossStyle: {
              color: "#fff",
            },},},

      };
      myChart.setOption(option);
    },



本文作者:池思敏(上海新炬王翦团队)

本文来源:“IT那活儿”公众号

文章转载自IT那活儿,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论