echarts 柱状图及折线图常用设置

echarts 柱状图及折线图基础效果功能设置

记录一下 下次直接使用

option = {
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
    // formatter: '{b}<br/>{a0}:{c0}<br/>{a1}:{c1}%'
  },
  // color: ['#A6FFC2', '#A6FFC2'],
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      boundaryGap: true, // 两边是否留空白
      axisTick: {
        alignWithLabel: true // 文字居中
      },
      axisLabel: {
        show: true, //文字显示
        interval: 0 //使x轴文字显示全
      },
      splitLine: {
        show: false, // 显示轴线
        lineStyle: {
          type: 'dashed' // 轴线样式
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisTick: {
        alignWithLabel: true // 文字居中
      },
      splitLine: {
        show: true, // 显示轴线
        lineStyle: {
          type: 'dashed' // 轴线样式
        }
      }
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      data: [
        10,
        52,
        {
          value: 200,
          itemStyle: {
            color: '#a90000'
          }
        },
        334,
        390,
        330,
        220
      ],
      // color: '#A6FFC2', // 线条颜色
      showBackground: true, //显示背景颜色
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.01)'
      },
      barWidth: '60%', //宽度
      barMaxWidth: '30', // 最大宽度
      label: {
        show: true, //显示数值
        position: 'top', //位置
        fontSize: 12
      },
      yAxisIndex: 0
    },
    {
      name: 'Directs',
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      color: '#A6FFC2', // 线条颜色
      smooth: true,
      symbolSize: 8, //小圆点的大小
      symbol: function (value, ind) {
        if (5 == ind.dataIndex) {
          return 'circle';
        } else {
          return 'none';
        }
      },
      areaStyle: {
        color: {
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(166, 255, 194, 0)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#A6FFC2' // 100% 处的颜色
            }
          ],
          global: false // 是否添加渐变
        }
      },
      // 显示最大值
      markPoint: {
        data: [{ type: 'max', name: 'Max' }]
      }
    }
  ]
};