echars common attribute configuration

echars common attribute configuration

 // 设置option配置和数据项
    let option = {
      // 图例的颜色
      color: [],
      // 图表的标题设置
      title: {
        // 图表标题
        text: "ECharts 入门示例",
        // 是否显示标题，默认是true，显示标题
        show: true,
        // 可以给标题添加链接，默认是重新打开一个网页
        link: "/user",
        // 设置链接打开的方式，默认是blank,重新打开一个页面，还有self,在当前页面打开
        target: "blank",
        // 文字的设置
        textStyle: {
          // 设置字体的颜色，默认是#333
          color: "blue",
          // 字体风格，normal,正常 italic 斜体 oblique 斜体
          fontStyle: "normal",
          fontSize: "26", //不要带单位
          fontWeight: "bold"
        },
        // 副标题文本
        subText: "副文本标题",
        // 标题的水平方向的对齐方式 left right auto center,默认auto
        textAlign: "left",
        // 标题的垂直方向的对齐方式 top bottom auto center,默认auto
        textVerticalAlign: "auto",
        // 是否触发事件
        triggerEvent: false,
        // 标题的内边距
        padding: "10",
        // grid组件离容器左侧的距离，可以是具体的像素值，也可以是百分比，也可以是方位名词,left right center
        left: "10"
      },

      // 提示框组件
      tooltip: {
        //   鼠标悬停时显示内容
        trigger: "axis",
        // 对信息提示的格式化
        formatter: function(params) {
          let tip = "";
          // x轴的内容
          tip += params[0].name + "月份</br>";
          if (params != null && params.length > 0) {
            for (let i = 0; i < params.length; i++) {
              //   marker是前面的图例，seriesName是图例的文字，value 是代表的值
              tip +=
                params[i].marker +
                params[i].seriesName +
                "：" +
                params[i].value +
                "w" +
                "</br>";
            }
          }
          return tip;
        }
      },

      // 图例的设置
      legend: {
        // 图例的名字
        data: ["销量"],
        // 图例的大小
        itemWidth: 20,
        itemHeight: 4,
        // 图例的位置
        bottom: "-5px",
        // 图例的形状
        icon: "rect"
      },

      // 直角坐标系绘制网格， ECharts 3 中可以存在任意个 grid 组件, ECharts 2只能存在一个grid组件
      grid: {
        // 是否显示直角坐标系网格，默认是false
        show: true,
        // grid 区域是否包含坐标轴的刻度标签。
        containLabel: false,
        // 网格背景色，默认是透明色，使用此属性，show必须为true
        backgroundColor: "rgba(128, 128, 128, 0.5)",
        // 网格的边框色
        borderColor: "red"
      },

      // 直角坐标系中grid组件的x轴设置
      xAxis: {
        // 是否显示x轴
        show: false,
        // 坐标轴类型,value:数值轴,适用连续数据,category:类目轴,离散数据类型,需要设置data设置类目轴数据,time:时间轴,连续的时序数据
        type: "category",
        // 是否从原点开始，false表示从原点开始
        boundaryGap: false,
        // 类目轴，需要通过data设置类目轴数据
        data: this.echartsXData,
        // 刻度线
        axisTick: {
          // 是否显示刻度线
          // show: false,
          // 刻度线与文字是否对齐，true是对齐
          alignWithLabel: false,
          // 刻度线是否朝内，true朝内，默认朝外
          inside: true
        },
        // 坐标轴最小值
        min: 0,
        // 坐标轴最大值
        max: 20,
        // 坐标轴分割成几段，默认是5段
        splitNumber: 7,
        // 坐标轴线的设置
        axisLine: {
          // 是否显示箭头，字符串或者数组，下面代表左侧不显示，右侧显示箭头
          symbol: ["none", "arrow"],
          // 设置箭头的大小
          symbolSize: [5, 5]
        }
      },

      // 直角坐标系中grid组件的y轴设置
      yAxis: {
        xAxis: {
          // 是否显示x轴
          show: false,
          // 坐标轴类型,value:数值轴,适用连续数据,category:类目轴,离散数据类型,需要设置data设置类目轴数据,time:时间轴,连续的时序数据
          type: "category",
          // 是否从原点开始，false表示从原点开始
          boundaryGap: false,
          // 类目轴，需要通过data设置类目轴数据
          data: this.echartsXData,
          // 刻度线
          axisTick: {
            // 是否显示刻度线
            // show: false,
            // 刻度线与文字是否对齐，true是对齐
            alignWithLabel: false,
            // 刻度线是否朝内，true朝内，默认朝外
            inside: true
          },
          // 坐标轴最小值
          min: 0,
          // 坐标轴最大值
          max: 20,
          // 坐标轴分割成几段，默认是5段
          splitNumber: 7,
          // 坐标轴线的设置
          axisLine: {
            // 是否显示箭头，字符串或者数组，下面代表左侧不显示，右侧显示箭头
            symbol: ["none", "arrow"],
            // 设置箭头的大小
            symbolSize: [5, 5]
          }
        }
      },

      series: [
        {
          // 提示文字的内容
          name: "销量",
          // 图表的类型，line 折线图 bar 柱形图 pie饼图 scatter:散点图
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
          // 线条是否光滑
          smooth: true,
          // 折线上小圆点的大小
          symbolSize: 6,
          // 折线下方区域的设置
          areaStyle: {
            opacity: 0.4,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#2666e6" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff" // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        }
      ]
    };