echars常用属性配置

国内echars 地址

echarts网站国内镜像：https://www.isqqw.com/echarts-doc/zh/option.html
echarts社区，包含大量echarts示例资源：https://www.isqqw.com/

echars常用属性配置

   // 设置option配置和数据项
   let option = {
      // 图例柱形图等的颜色
      color: ['#ff0000'],
      // color:['红色',]
      // 图表的标题设置
      title: {
        // 是否显示标题，默认是true，显示标题
        show: true,
        // 图表标题
        text: "ECharts 入门示例",
        // 可以给标题添加链接，默认是重新打开一个网页
        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", // 文字显示的多少。left 全显示， center 文字只显示一半 right 只显示最后一点文字
        // 标题的垂直方向的对齐方式 top bottom auto center,默认auto
        textVerticalAlign: "auto",
        // 是否触发事件
        triggerEvent: false,
        // 标题的内边距
        padding: "10",
        // grid组件离容器左侧的距离，可以是具体的像素值，也可以是百分比，也可以是方位名词,left right center
        left: "10", // center 时文字居中显示
      },

      // 提示框组件
      tooltip: {
        // 触发类型 item | axis | none
        // item 数据项图形触发，如散点图、饼图等无类目轴的图表中使用
        // axis 坐标轴触发，如柱形图、折线图等类目轴的图表中使用
        trigger: 'axis',
        // 坐标指示器配置
        axisPointer: {
          // 指示器类型 shadow line cross none
          type: 'shadow'
        },
        // 提示框浮层的位置 默认跟随鼠标的位置 string | Array[left, top] | Function
        position: function (point, params, dom, rect, size) {
          // point: 鼠标位置，如 [20, 40]。
          // params: 同 formatter 的参数相同。
          // dom: tooltip 的 dom 对象。
          // rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
          // size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。
          return [point[0] + 50, 20];
        },
        // 提示框文字格式化
        formatter: function (params) {
          // seriesName 系列名称，option.series[0].name的值
          // name 数据名，类目名
          // data 传入的原始数据
          // dataIndex 数据在传入的 data 数组中的 index
          // value 传入的数值
          // marker 对应的图例标记
          // color 数据图形的颜色
          // seriesType 系列类型
          // seriesIndex 系列在传入的 option.series 中的 index
          let tip = "";
          // x轴的内容
          tip += params[0].name + "月份</br>";
          if (params != null && params.length > 0) {
            for (let i = 0; i < params.length; i++) {
              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",
        // 整个canvas 距离四周的边距
        top: '25',
        left: "3%",
        right: "4%",
        bottom: "1%",
      },

      // 直角坐标系中grid组件的x轴设置
      xAxis: {
        // 是否显示坐标轴线、坐标轴刻度线和坐标轴上的文字
        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,
        // x轴文字相关配置
        axisLabel: {
          show: true, // 是否显示坐标轴上的文字
          interval: 0, // 每一项都显示， 1代表隔一个显示一个
          rotate: 20, //文字倾斜程度
          color: "#3FDDFF", //文字颜色
          // 格式化文字
          formatter: function (value) {
            return value.split("").join("\n");
          }
        },
        splitLine: {
          show: false // 是否显示网格线
        },
        // 坐标轴线的设置
        axisLine: {
          show: true, // 是否显示坐标轴线
          // 轴线的样式配置
          lineStyle: {
            color: "#3FDDFF",
          },
          // 是否显示箭头，字符串或者数组，下面代表左侧不显示，右侧显示箭头
          symbol: ["none", "arrow"],
          // 设置箭头的大小
          symbolSize: [5, 5]
        }
      },

      // 直角坐标系中grid组件的y轴设置
      yAxis: {
        // 是否显示y轴
        show: false,
        // 坐标轴类型,value:数值轴,适用连续数据,category:类目轴,离散数据类型,需要设置data设置类目轴数据,time:时间轴,连续的时序数据
        type: "category",
        // y轴的名称
        name: '单位：万',
        // Y轴名称的样式
    	nameTextStyle: {
	        color: '#fff',
	        // Y轴名称的位置
	        padding: [0, 0, 5, -15]
	    },
        // 是否从原点开始，false表示从原点开始
        boundaryGap: false,
        // 刻度线
        axisTick: {
          // 是否显示刻度线
          // show: false,
          // 刻度线与文字是否对齐，true是对齐
          alignWithLabel: false,
          // 刻度线是否朝内，true朝内，默认朝外
          inside: true
        },
        // 坐标轴最小值
        min: 0,
        // 坐标轴最大值
        max: 20,
        // 坐标轴分割成几段，默认是5段
        splitNumber: 7,
        // Y轴label的设置
        axisLabel: {
          show: true,
          interval: 0, // 使y轴文字显示全
          color: '#666666',
          formatter: '{value}%'  //y轴数值，带百分号
        },
        // 坐标轴线的设置
        axisLine: {
          // 是否显示箭头，字符串或者数组，下面代表左侧不显示，右侧显示箭头
          symbol: ["none", "arrow"],
          // 设置箭头的大小
          symbolSize: [5, 5]
        }
      },
      // 用于区域缩放，一般用于数据过多
	  dataZoom: {
	    // 数据窗口范围的起始数值 可以是数组下标，也可以是数组本身的值
	    startValue: 0,
	    // 数据窗口范围的结束数值 可以是数组下标，也可以是数组本身的值
	    endValue: 5,
	    // 缩放类型 inside slider select
	    type: 'inside'
	  },

      series: [
        {
          // 提示文字的内容
          name: "销量",
          // 图表的类型，line 折线图 bar 柱形图 pie饼图 scatter:散点图
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
          // 是否显示每一个柱状图的数据
          label: {
            show: true, // 是否显示每一个柱状图的数据
            color: '#000', // 数据颜色
            fontWeigth: 'bloder',
            position: 'top', //文字位置
            // 数据格式化 {a}：系列名。{b}：数据名(x轴的数据名){c}：数据值。
            formatter: '{b}\n{c}%',
          },
          /* 柱状图相关配置 */
          colorBy: 'data', // series 同一系列的一个颜色 data 每个数据都使用不同颜色
          barWidth: 30, //柱状图的宽度
          /* 折线相关配置 */
          // 线条是否光滑
          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
            }
          }
        }
      ]
    };