echarts相关属性设置（1）折线图篇

option =

{
  tooltip: {
    trigger: 'axis', 
    // axisPointer: {
    //   type: 'cross',
    //   label: {
    //     backgroundColor: '#6a7985',
    //   },
    // },
    position(pos: any, params: any, dom: any, rect: any, size: any) { // 鼠标移入时显示的框子的定位
      // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
      return {
        top: -10,
        [['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]]: 10,
      };
    },
  },
  dataZoom: [　　//x轴是否可以滑动
    {
      type: 'inside',
      start: 50, //从50%开始显示
      end: 100,　//到100%的位置　
      filterMode: 'empty',
    },
  ],
  color: ['#d77b09', '#54f0fd', '#296f04'],　　//想要设置折线图的文字颜色（还是图小图标一起改动？），必须要在这里写
  legend: {
    data: ['名称1', '名城2', {　　//这里可以单独设置图例的配置
      name: '名城3',
      textStyle: {
        fontSize: 8,
        fontWeight: 'bolder',
        color: '#296f04',
      },
    }],
    itemWidth: 6, //图例小图标的宽度，宽度和高度都为0时，小图标不显示
    itemHeight: 6, //图例小图标的高度
    textStyle: {
      fontSize: 8, // 设置图例中文字大小
      color: ['#d77b09', '#54f0fd', '#296f04'],　　//设置图例文字的颜色，如果是有折线图，必须再在外面写个color，如果这里和外面写了都没效果，就单独设置图标中的data设置
    },
    itemGap: 0,
    top: -6,
 
  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {},
  //   },
  // },
  grid: {　　//这个是用来设置echarts图标的位置和其他设置
    left: '-5%',
    // right: '4%',
    bottom: '11%',
    width: '110%',
    top: '20%',
    containLabel: true,　//一般都带上这个，否则x,y轴的刻度值会被截取掉
  },
  xAxis: [　　//x轴的设置
    {
      type: 'category',
      boundaryGap: true, //是否将x轴的刻度显示在中间位置，false表示从0这个位置开始（最边上）
      data: data,　　//x轴的数据
      axisTick: {　　//是否显示刻度线
        show: false,
      },
      axisLabel: {　　//相关轴上的刻度值的设置，show:false，表示不显示轴上的刻度值
        textStyle: { //刻度值的字体样式设置
          color: '#e9ecee',
        },
        fontSize: 8,
        margin: 2,　　//刻度值离轴线多远的距离
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      // min: 0, 
      // max: 300, //设置轴的最大值和最小值，一般不规定，可自适应
      show: false,　　//设置Y轴不显示（轴线不显示）
      splitNumber: 4, // 控制刻度标签的数量
      axisTick: {    //轴线的小刻度线
        show: false, // y轴的小刻度线。这里是不显示
      },
      axisLabel: {  //设置刻度值
        show: false, //不显示刻度值，如果不显示，下面的刻度值设置就可以不用写了
        textStyle: {
          // color: '#e9ecee',
        },
        fontSize: 8,
        margin: 5,
      },
      axisLine: { //设置轴线的配置
        show: false,
        lineStyle: { //轴线的线条颜色
          color: '#9999ae',
        },
      },
      splitLine: {　　//设置网格线，写在哪个轴就是哪个轴的网格线
        show: false,
        lineStyle: {
          type: 'dotted',
          // color: ['#aaa', 'red'],    //设置网格线的颜色，可单独设置
          color: '#4c4a74',
        },
      },
    },
  ],
  series: [
    {
      name: '名称1',
      type: 'line',
      stack: '总量',
      symbol: 'none', //取消折线上的小圆点
      smooth: true,  //使线条顺滑
      itemStyle: { //折线的样式设置
        normal: {
          lineStyle: { //折线线条的设置
            color: '#d77b09',
          },
        },
      },
      areaStyle: { //折线的区域样式设置
        normal: {
          color: new LinearGradient( //区域颜色设置
            0, 0, 0, 1,
            [
              { offset: 0, color: '#00c9ff' },
              { offset: 1, color: '#0065ff' },
            ],
          ),
        },
      },
      data: data,
    },
    {
      name: '名称2',
      type: 'line',
      stack: '总量',
      smooth: true,
      symbol: 'none',
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#54f0fd',
          },
        },
      },
      areaStyle: {
        normal: {
          color: new LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#00c9ff' },
              { offset: 1, color: '#0065ff' },
            ],
          ),
        },
      },
      data: data,
    },
    {
      name: '名称3',
      type: 'line',
      stack: '总量',
      smooth: true,
      itemStyle: {
        normal: {
          color: '296f04', //折线上的小圆点颜色设置
          lineStyle: {
            color: '#296f04',
            // width: 1,  //折线的线条宽度
          },
        },
      },
      areaStyle: {
        normal: {
          color: new LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#00c9ff' },
              { offset: 1, color: '#0065ff' },
            ],
          ),
        },
      },
      label: { //在折线上显示相对应的数值
        normal: {
          show: true,
          position: 'top', //数值的位置
          distance: 0,　　//数值距离折线的距离
          fontSize: 8,  //数值的字体大小
          color: '#296f04', //数值的颜色
        },
      },
      data: data,
    },
 
  ],
};