Echarts滚动条显示七天数据及tooltip浮层配置

初初用到Echarts滚动条，各种查找配置项真是相当折磨的，

于是我们先这样... 再这样... 再这样... 成图...

滚动条dataZoom部分配置

  dataZoom: 
        [
          { // 外部滚动条
          type: 'slider',
          show: true,
          bottom: 32,
          right:63,
          left: 'auto',
          fillerColor: '#ddd', // 滚动条颜色
          showDetail: false, // 滚动条左右详情数字隐藏
          // 滚动条左右缩放手柄样式
          handleStyle: {
            color: '#ddd',
            borderColor: '#ddd',
          },
          // 无移动手柄
          moveHandleSize: 0,
          // 滚动条中无阴影无颜色
          dataBackground: {
            lineStyle: {opacity: 0},
            areaStyle: {opacity: 0}
          },
          selectedDataBackground: {
            lineStyle: {opacity: 0},
            areaStyle: {opacity: 0}
          },
          // 滚动条不缩短伸长
          brushSelect: false,
          // 从头开始，最多显示7条数据
          startValue: xData.length - 7,
          endValue: xData.length - 1,
          maxValueSpan: 6,
          minValueSpan: 6,
          height: 8, // 滚动条宽度
          zoomLock: true, // 平移也缩放
        },
        {
          type: 'inside' // 内部可鼠标拖动
        }
      ],

 浮层tooltip部分配置

 tooltip:{ // 浮层
        borderColor:'transparent', // 浮层背景边框色设置透明
        trigger:'axis',
        showContent: true,
        padding:8,
        textStyle: {
          color: '#FFF',
          fontSize: 16
        },
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        confine: true, // 提示框显示在页面内
        formatter: (params)=> { // 浮层需要显示内容，把params打印出来看看，用解构，find，reduce的方法获取
          return params.reduce((acc, cur) => {
            const {color, seriesName, value} = cur;
            return [...acc, `<div style="margin-top:-18px;display:flex;justify-content:start;align-items:center;">
              <span style="display:inline-block;width:4px;height:4px;background-color:${color};margin-right:8px;"></span>
              <span style="text-align:left;width:80px;">${seriesName}</span>
              <span style="text-align:right;">${value}张</span>
              </div>`
            ]
          },
          [`<div style="text-align:left;">${params[0].name}</div>`]
          ).join('</br>');
        },
      },

总体代码书写

<template>
  <div>
    <div id="mainBar" style="width: 600px; height: 400px;border:1px solid #eee;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    var xData = ['8-1', '8-2', '8-3', '8-4', '8-5', '8-6', '8-7', '8-8', '8-9'];
    var lData = ['银票','商票','财司票'];
    var option = {
      color:['#ff9900', '#ffd555', '#5b8ff9', '#9ac5ff', '#c6e6ff', '#91cc75'], // 柱条色
      grid: {
        top:80,
        bottom:43,
      },
      title: {
        show:true,
        text:'会滚的Echarts图',
        textStyle:{
          color:'#333',
          fontWeight:'normal',
          fontSize:20,
          lineHeight:10,
          width:50,
          height:10
        },
        z:5,
        left:20,
        top:20
      },
      tooltip:{ // 浮层
        borderColor:'transparent', // 浮层背景边框色设置透明
        trigger:'axis',
        showContent: true,
        padding:8,
        textStyle: {
          color: '#FFF',
          fontSize: 16
        },
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        confine: true, // 提示框显示在页面内
        formatter: (params)=> { // 浮层需要显示内容，把params打印出来看看，用解构，find，reduce的方法获取
          return params.reduce((acc, cur) => {
            const {color, seriesName, value} = cur;
            return [...acc, `<div style="margin-top:-18px;display:flex;justify-content:start;align-items:center;">
              <span style="display:inline-block;width:4px;height:4px;background-color:${color};margin-right:8px;"></span>
              <span style="text-align:left;width:80px;">${seriesName}</span>
              <span style="text-align:right;">${value}张</span>
              </div>`
            ]
          },
          [`<div style="text-align:left;">${params[0].name}</div>`]
          ).join('</br>');
        },
      },
      xAxis: {
        axisTick: {show: false}, // 刻度线隐藏
        type: 'category',
        data: xData, //x轴数据
        nameTextStyle: {
          fontSize: 16,
          color: '#ccc'
        },
        axisPointer: { // 点击图出现竖线
          type:'shadow',
          show: true,
          shadowStyle:{color: '#eee'},
          z:0
        },
        axisLine: { // x轴线样式
          show: true,
          lineStyle: {
            type: 'solid',
            color: '#ddd'
          }
        },
        axisLabel: { // x轴文字颜色
          show: true,
          padding: [10,0,0,0],// x轴标签文字离x轴距离
          textStyle: {
            fontSize: 10,
            color: '#ccc'
          },
          interval: 0, // x轴间隔几个显示
          // formatter: (params)=> { // x轴文字可以通过substr，条件判断，模板字符串进行展示，rich修改样式
          //   console.log('xAxis', params);
          // }
        }
      },
      yAxis: {
        type: 'value',
        show: true,
        axisTick: {show: false},
        splitLine: { // y轴横刻度线样式
          lineStyle: {
            color: '#eee',
            type: 'dashed'
          }
        },
        axisLine: {show: false},
      },
      dataZoom: 
        [
          { // 滚动条
          type: 'slider',
          show: true,
          bottom: 32,
          right:63,
          left: 'auto',
          fillerColor: '#ddd', // 滚动条颜色
          showDetail: false, // 滚动条左右详情数字隐藏
          // 滚动条左右缩放手柄样式
          handleStyle: {
            color: '#ddd',
            borderColor: '#ddd',
          },
          // 无移动手柄
          moveHandleSize: 0,
          // 滚动条中无阴影无颜色
          dataBackground: {
            lineStyle: {opacity: 0},
            areaStyle: {opacity: 0}
          },
          selectedDataBackground: {
            lineStyle: {opacity: 0},
            areaStyle: {opacity: 0}
          },
          // 滚动条不缩短伸长
          brushSelect: false,
          // 从头开始，最多显示7条数据
          startValue: xData.length - 7,
          endValue: xData.length - 1,
          maxValueSpan: 6,
          minValueSpan: 6,
          height: 8, // 滚动条宽度
          zoomLock: true, // 平移也缩放
        },
        {
          type: 'inside'
        }
      ],
      legend: {
        show: true,
        icon: 'roundRect', // 图例圆角
        data: lData,
        top: 20,
        itemHeight: 8, // 图例大小
        itemWidth: 8,
        right: 20, // 图例离右侧距离
        textStyle: {
          fontSize: 15,
          color: '#ccc'
        }
      },
      series: [
        {
          name: '银票',
          type: 'bar',
          barGap: '0.5',
          barCategoryGap: '1',
          barWidth: 8,
          itemStyle: {borderRadius: [2, 2, 0, 0]},
          data: [70,2,3,4,5,23,7,8,9]
        },{
          name: '商票',
          type: 'bar',
          barGap: '0.5',
          barCategoryGap: '1',
          barWidth: 8,
          itemStyle: {borderRadius: [2, 2, 0, 0]},
          data: [170,2,3,4,5,6,7,14,9]
        },{
          name: '财司票',
          type: 'bar',
          barGap: '0.5',
          barCategoryGap: '1',
          barWidth: 8,
          itemStyle: {borderRadius: [2, 2, 0, 0]},
          data: [211,2,3,4,5,6,4,12,1120]
        }
      ]
    };
    echarts.init(document.getElementById("mainBar")).setOption(option);
  },
}
</script>

在下愚见：

① Echarts配置项很多，找到也不一定看得懂，最好的是一边查找一边实操的敲代码行，实时获取效果；

② 各类同类型的示例图；

③ 查找文章，都是亲测出来的，上手见效果； 实实在在实现几个图表，确实各方面理解就提升了。