Echarts基础学习 5-柱形图实战

任务要求

• 实现原型图

• 持续滚动

分析（思路）

根据原型图可以分析一下内容

• 柱形图，横向，堆叠，最外侧位有border-radius，两组数据
• x轴和y轴掉换
• 鼠标悬浮有提示信息，tooltip
• 有滚动条，持续滚动，dataZoom

如果你不能分析出使用了哪些配置项，可以直接在官网示例——折线图，查看各个案例，分析其代码的配置项。

实践

在官网示例中找到 带圆角的堆积柱状图 将示例代码copy到你的项目中，可以选择完整代码或者部分代码。

<template>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px; height: 400px"></div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'

import * as echarts from 'echarts'
const YData = ref([
  '大运动（女）',
  '大运会（男）',
  '奥运资格赛（男）',
  '奥运资格赛（女）',
  'CUBAL一级联赛（女）',
  'CUBAL一级联赛（男）',
  '世界杯（男）',
  '世界杯（女）'
])

let series = [
  {
    data: [120, 200, 150, 80, 70, 110, 130, 142],
    type: 'bar',
    stack: 'a',
    name: '男',
    barWidth: 15,
    itemStyle: {
      color: '#8319ef'
    }
  },
  {
    data: [10, 46, 64, 21, 10, 31, 20, 33],
    type: 'bar',
    stack: 'a',
    name: '女',
    itemStyle: {
      color: '#8319ef61'
    }
  }
]
// 判断是否为最外层数据，并设置 border-radius -------------------start

const stackInfo = {}
for (let i = 0; i < series[0].data.length; ++i) {
  for (let j = 0; j < series.length; ++j) {
    const stackName = series[j].stack
    if (!stackName) {
      continue
    }
    if (!stackInfo[stackName]) {
      stackInfo[stackName] = {
        stackStart: [],
        stackEnd: []
      }
    }
    const info = stackInfo[stackName]
    const data = series[j].data[i]
    if (data && data !== '-') {
      if (info.stackStart[i] == null) {
        info.stackStart[i] = j
      }
      info.stackEnd[i] = j
    }
  }
}
for (let i = 0; i < series.length; ++i) {
  const data = series[i].data
  const info = stackInfo[series[i].stack]
  for (let j = 0; j < series[i].data.length; ++j) {
    // const isStart = info.stackStart[j] === i;
    const isEnd = info.stackEnd[j] === i
    const topBorder = isEnd ? 20 : 0
    const bottomBorder = 0
    data[j] = {
      value: data[j],
      itemStyle: {
        borderRadius: [bottomBorder, topBorder, topBorder, bottomBorder]
      }
    }
  }
}
// 判断是否为最外层数据，并设置 border-radius -------------------end

var option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: YData.value,
    axisTick: {
      show: false
    },

    axisLabel: {
      width: 50,
      // 标签换行
      overflow: 'break',
      align: 'right',
      formatter: function (params) {
        return params
      }
    }
  },
  dataZoom: [
    {
      type: 'slider',
      backgroundColor: 'rgba(245,245,245)',
      backgroundColor: 'transparent',
      brushSelect: false,
      width: 7,
      show: true, //flase直接隐藏图形
      yAxisIndex: [0],
      //left: 'center', //滚动条靠左侧的百分比
      //bottom: 13,
      startValue: 0, //滚动条的起始位置
      endValue: 6, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
      maxValueSpan: 4, // 显示数据的条数(默认显示10个)

      handleStyle: {
        color: '#fff',
        borderColor: '#E8E8E8'
      },
      fillerColor: '#E8E8E8',
      borderColor: 'transparent',
      showDetail: false,

      dataBackground: {
        areaStyle: {
          opacity: 0
        },
        lineStyle: {
          color: 'transparent'
        }
      }
    },
    {
      //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
      type: 'inside',
      yAxisIndex: [0], //控制哪个轴，如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。此处控制第二根轴
      zoomOnMouseWheel: false, //滚轮是否触发缩放
      moveOnMouseMove: true, //鼠标移动能否触发平移
      moveOnMouseWheel: true //鼠标滚轮能否触发平移
    }
    // {
    //   yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
    //   show: false, // 是否显示滑动条，不影响使用
    //   type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
    //   startValue: 0, // 从头开始。
    //   endValue: 3 // 展示到第几个。
    // }
  ],
  // 调整图表在坐标系的位置，便于类目轴标签 和 右侧滚动条显示
  grid: [{ left: '16%', bottom: '16%' }],
  legend: {
    show: true,
    bottom: '4%'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },

  series: series
}
let timer
onMounted(() => {
  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
  timer = setInterval(() => {
    if (option.dataZoom[0].endValue >= YData.value.length) {
      // 需要YData.value.length 设置成实际的数据长度
      option.dataZoom[0].endValue = 5
      option.dataZoom[0].startValue = 0
    } else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
    }
    myChart.setOption(option)
  }, 2000)
})
onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style scoped lang="less"></style>