首页 前端知识 Vue - ECharts自定义时间段图表

Vue - ECharts自定义时间段图表

2024-05-12 17:05:32 前端知识 前端哥 984 946 我要收藏

GitHub Demo 地址

在线预览

参考:echarts renderItem-在区间段内展示连续数据

效果图

在这里插入图片描述

跟随窗口变化刷新chart

 // 跟随窗口变化刷新chart
 var that = this
 window.addEventListener('resize', () => {
   that.myChart2.resize()
 })

柱子点击事件,点击柱形中有数据的部分生效,而对于没有数据的区域,点击无效

 var that = this
 // 柱子点击事件,点击柱形中有数据的部分生效,而对于没有数据的区域,点击无效
 this.myChart2.on('click', function(params) {
   const data = params.data
   console.log(JSON.stringify(data))
   that.dialogText = data.name + '(' + data.type + '),' + 'code: ' + data.code
   that.dialogVisible = true
 })

全部代码

<template>
  <div class="app-container">
    <div style="margin:10px" />
    <div class="chart-bg">
      <div id="myChart2" class="charts" />
    </div>

    <el-dialog :visible.sync="dialogVisible" title="提示" width="30%">
      <span>点击了:{{ dialogText }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  components: {},
  data() {
    return {
      myChart2: null,
      dialogVisible: false,
      dialogText: ''
    }
  },
  created() {},
  mounted() {
    this.init_echarts2()
    this.requestChartData2()
  },
  methods: {
    // 初始化chart
    init_echarts2() {
      var chartData = {
        xData: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-15'],
        yData: ['类型一', '类型二', '类型三', '类型四', '类型五'],
        listData: []
      }
      this.myChart2 = echarts.init(document.getElementById('myChart2'))
      this.myChart2.setOption(this.getOption2(chartData, 1))
      // 跟随窗口变化刷新chart
      var that = this
      window.addEventListener('resize', () => {
        that.myChart2.resize()
      })
      // 柱子点击事件,点击柱形中有数据的部分生效,而对于没有数据的区域,点击无效
      this.myChart2.on('click', function(params) {
        const data = params.data
        console.log(JSON.stringify(data))
        that.dialogText = data.name + '(' + data.type + '),' + 'code: ' + data.code
        that.dialogVisible = true
      })
    },
    getOption2(chartData, type) {
      var option = {
        grid: { left: '3%', right: '6%', bottom: '15%', containLabel: true },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function(params) {
            const data = params[0].data
            return data.name + '(' + data.type + ')' + '<br/>' + 'code: ' + data.code
          }
        },
        xAxis: [{ data: chartData.xData, axisLabel: { color: '#333' }}],
        yAxis: [{ data: chartData.yData, axisLabel: { color: '#333' }}],
        // dataZoom: [{}],
        dataZoom: [
          { type: 'slider', bottom: '2%' }, // 有单独的滑动条,用户在滑动条上进行缩放或漫游
          { type: 'inside', bottom: '2%' } // 内置于坐标系中,用户在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动(触屏上)来缩放或漫游坐标系
        ],
        series: [
          {
            type: 'custom',
            renderItem: function(params, api) {
              const data = chartData.listData[api.value(0)]
              const text = data.name + '(' + data.code + ')'
              const color = data.bgColor

              var categoryIndex = api.value(0)
              var start = api.coord([api.value(1), categoryIndex])
              var end = api.coord([api.value(2), categoryIndex])
              var height = 24

              return {
                type: 'rect',
                shape: echarts.graphic.clipRectByRect(
                  {
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                  },
                  {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                  }
                ),
                // 柱状图样式设置,方式二,同时设置优先级高于方式一
                // style: api.style()
                style: api.style({
                  text: text, // 文字
                  fill: 'orange', // 背景色
                  // stroke: 'black', // 边框颜色
                  stroke: color,
                  lineWidth: 2, // 边框宽度
                  textFill: 'black', // 文字颜色
                  fontWeight: 'bold',
                  fontSize: '12',
                  opacity: 1
                })
              }
            },
            encode: {
              x: [1, 2],
              y: 0
            },
            data: chartData.listData,
            // 柱状图样式设置,方式一
            itemStyle: {
              // color: 'red', // 柱图背景色
              color: 'transparent',
              borderColor: 'red',
              borderWidth: 1
            },
            label: {
              show: true, // 开启显示
              // position: 'top', // 上方显示
              position: 'inside', // 内部显示
              textStyle: {
                color: 'green',
                fontSize: 15
              }
            }
          }
        ]
      }
      return option
    },
    requestChartData2() {
      // 间隔一致,保证开始结束时间都在x轴点上
      var chartData = {
        xData: [
          '2021-12-15',
          '2022-01-01',
          '2022-01-15',
          '2022-02-01',
          '2022-02-15',
          '2022-03-01',
          '2022-03-15',
          '2022-04-01',
          '2022-04-15',
          '2022-05-01',
          '2022-05-15',
          '2022-06-01',
          '2022-06-15'
        ],
        yData: ['类型一', '类型二', '类型三', '类型四', '类型五'],
        listData: [
          { name: '类型一', type: 'type1', code: '0001', startTime: '2021-12-15', endTime: '2022-01-15' },
          { name: '类型二', type: 'type2', code: '0002', startTime: '2022-02-01', endTime: '2022-02-15' },
          { name: '类型三', type: 'type3', code: '0003', startTime: '2022-03-01', endTime: '2022-03-15' },
          { name: '类型四', type: 'type4', code: '0004', startTime: '2022-04-01', endTime: '2022-04-15' },
          { name: '类型五', type: 'type5', code: '0005', startTime: '2022-05-15', endTime: '2022-06-15' }
        ]
      }
      chartData = this.handleData(chartData)
      // console.log(JSON.stringify(chartData));

      this.myChart2.showLoading()
      setTimeout(() => {
        this.myChart2.setOption(this.getOption2(chartData, 1), true)
        this.myChart2.hideLoading()
      }, 1000)
    },
    handleData(chartData) {
      var newChartData = JSON.parse(JSON.stringify(chartData))
      const newArr = newChartData.listData.map((item, index) => {
        return {
          name: item.name,
          value: [index, item.startTime, item.endTime], // index(0,1,2)代表y轴的索引,后两位代表x轴数据开始和结束
          type: item.type,
          code: item.code,
          startTime: item.startTime,
          endTime: item.endTime,
          bgColor: this.getRandomColor()
        }
      })
      newChartData.listData = newArr
      return newChartData
    },
    // 随机生成颜色
    getRandomColor() {
      let color = ''
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      color = `rgb(${r},${g},${b})`
      return color // 所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
    },
    getRandomColor2() {
      return '#' + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16)
    }
    // color: function() { return '#' + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16); },
  }
}
</script>
<style lang="scss" scoped>
.chart-bg {
  width: 100%;
  height: 40vh;
  background: yellow;
}

.charts {
  // width: 95%;
  width: 100%;
  height: 100%;
}
</style>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8403.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!