【前端】Echarts自适应分辨率和缩放功能

Lucky小维

于 2024-02-27 14:49:30 发布

阅读量637

点赞数 7

分类专栏：前端文章标签：前端 echarts javascript

本文链接：https://blog.csdn.net/weixin_44055864/article/details/136322413

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

版本

yarn add echarts@4.9.0
yarn add resize-detector@0.3.0

mixins-resize.js

import { addListener, removeListener } from 'resize-detector';
import _ from 'lodash';

export default {
  mounted() {
    const { onResize } = this;
    this.__resizeHandler = _.debounce(() => {
      if (typeof onResize === 'function') onResize();
    }, 100);

    this.$nextTick(() => {
      addListener(this.$el, this.__resizeHandler);
    });
  },
  beforeDestroy() {
    removeListener(this.$el, this.__resizeHandler);
  }
}

dataZoom.js

export const echartOptions = {
  dataZoom: [
    {
      type: 'slider', //滑动条型数据缩放组件
      start: 90, //数据窗口的起始位置百分比
      end: 100, //数据窗口的结束位置百分比
      height: 6, //数据缩放组件的高度
      bottom: 20, //数据缩放组件距离底部的距离
      realtime: false, //是否实时显示，这里是 false，表示拖动结束时才触发数据变化
      backgroundColor: '#EDF0F5', //数据缩放组件的背景色
      handleSize: 12, //滑块的大小
      //滑块的图标
      handleIcon:
        'image://data:image/png;base64,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',

      dataBackground: {
        //数据区域的背景配置
        lineStyle: {
          //数据区域边界线的样式配置，这里设置为透明
          opacity: 0,
        },
        areaStyle: {
          //数据区域填充样式配置，这里设置为透明
          opacity: 0,
        },
      },
      selectedDataBackground: {
        //选中数据区域的背景配置
        lineStyle: {
          //选中数据区域边界线的样式配置，这里设置为透明
          opacity: 0,
        },
        areaStyle: {
          // 选中数据区域填充样式配置，这里设置为透明
          opacity: 0,
        },
        brushStyle: {
          //选中数据区域的刷子样式配置，这里设置边框颜色为红色
          borderColor: '#f00',
        },
      },
      // fillerColor: ' #A3A1FB', //数据区域的填充颜色 紫色
      textStyle: {
        color: 'transparent', //文本颜色，这里设置为透明
      },
    },
  ],
}

使用

<template>
  <div class="mod-demo-echarts">
    <el-row :gutter="20">
      <el-col :span="17">
        <el-card>
          <div id="lucky_chart" style="min-height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { deepClone } from '@/views/common'
import { echartOptions } from '@/views/common/dataZoom.js'
import ResizeMixins from '@/views/common/mixins-resize.js'
export default {
  mixins: [ResizeMixins],
  data() {
    return {
      chartLine: null,
      myChart: null,
      chartPie: null,
      chartScatter: null,
    }
  },
  mounted() {
    this.initLuckyChart()
  },

  methods: {
    initLuckyChart() {
      let dataZoom = deepClone(echartOptions.dataZoom)
      let xLabel = ['8:05', '8:10', '8:15', '8:25', '8:30', '8:35', '8:40', '8:45', '8:55', '9:00', '9:05', '9:10'] //x轴数据
      let dataValue = [120, 130, 140, 135, 134, 115, 156, 115, 112, 215, 134, 142] //y轴数据1
      let dataValue1 = [1.0, 3.0, 2.0, 1.0, 3, 1, 2, 3.2, 4.5, 5.0, 4.3, 3] //y轴数据2
      let dataValue2 = [3, 6, 7, 15, 8, 5, 2, 5, 4, 2, 10, 3] //y轴数据3

      let colors = ['#a5c5d4', '#91CC75', '#EE6666'] //颜色
      let option = {
        dataZoom: dataZoom,
        color: colors,
        tooltip: {
          //悬浮放上面的提示
          trigger: 'axis', //坐标轴触发
          axisPointer: {
            type: 'line', //直线指示器
          },
        },
        grid: {
          right: '20%', //echarts离容器左侧的距离
        },
        toolbox: {
          //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
          feature: {
            dataView: { show: true, readOnly: false }, //数据视图
            restore: { show: true }, //重置
            saveAsImage: { show: true }, //下载
          },
        },
        legend: {
          //图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
          data: ['浊度', 'PH', '水温'], //就是图表上面正中间那3，点击某个某个就能隐藏
        },
        xAxis: [
          {
            type: 'category', //类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据
            boundaryGap: false, //false从0开始,最少x会放0位置
            axisTick: {
              //坐标轴刻度|和数据是对齐的，加上这个
              alignWithLabel: true,
            },
            // prettier-ignore
            data: xLabel, //x轴数据
          },
        ],
        yAxis: [
          //直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
          {
            type: 'value', //适用于连续数据
            name: '浊度（ntu）', //坐标轴名称
            position: 'left', //左边
            alignTicks: true, //开启该配置项自动对齐刻度
            min: 0, //初始
            max: 1000, //结束值
            interval: 200, //间距   如果没这3，会自适应数据
            axisLine: {
              show: false, //y轴|  是否显示
              lineStyle: {
                color: colors[0], //颜色
              },
            },
            splitLine: {
              //隐藏纵轴的横线
              show: true, //展示
              lineStyle: {
                color: '#DCDFE6 ', //虚线颜色
                type: 'dashed', //虚线
              },
            },
            axisLabel: {
              //纵轴文字,就是0 200 400 600 800 1000
              show: true,
              formatter: '{value} ',
            },
          },
          {
            type: 'value', //适用于连续数据
            name: 'PH',
            position: 'right', //右边
            alignTicks: true, //开启该配置项自动对齐刻度
            min: 0, //初始
            max: 14, //结束值
            interval: 3, //间距   如果没这3，会自适应数据
            splitLine: {
              show: false, //y轴|  是否显示
              lineStyle: {
                color: '#1160a0',
                type: 'solid', //实体线
              },
            },
            axisLine: {
              //纵轴文字,就是0 3 6 9 12 14
              show: false,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: '{value} ',
            },
          },
          {
            type: 'value',
            name: '水温（°C）',
            show: true, // 添加该配置来隐藏水温纵轴
            position: 'right',
            alignTicks: true,
            min: 0,
            max: 100,
            interval: 20,
            offset: 80, //向右偏移80
            axisLine: {
              show: false, //y轴|  是否显示
              lineStyle: {
                color: colors[2],
              },
            },
            splitLine: {
              //隐藏纵轴的横线
              show: false,
              lineStyle: {
                color: '#DCDFE6 ',
                type: 'dashed',
              },
            },
            axisLabel: {
              //纵轴文字
              formatter: '{value} ',
            },
          },
        ],
        series: [
          //数据
          {
            name: '浊度',
            type: 'line', //折线
            symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
            smooth: true, //是否平滑
            color: '',
            areaStyle: {
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#bed4e5',
                    },
                    {
                      offset: 0.6,
                      color: '#aac8d9',
                    },
                    {
                      offset: 1,
                      color: '#9dbec9',
                    },
                  ],
                  false
                ),
              },
            },
            data: dataValue,
          },
          {
            name: 'PH',
            type: 'line',
            yAxisIndex: 1, //默认是0就左边那个y轴，1是右边第一个
            data: dataValue1,
          },
          {
            name: '水温',
            type: 'line',
            symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
            smooth: true,
            yAxisIndex: 2,
            areaStyle: {
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#c1a3aa',
                    },
                    {
                      offset: 0.6,
                      color: '#b19aa3',
                    },
                    {
                      offset: 1,
                      color: '#a78c95',
                    },
                  ],
                  false
                ),
              },
            },
            data: dataValue2,
          },
        ],
      }

      this.myChart = this.$echarts.init(document.getElementById('lucky_chart'))
      this.myChart.setOption(option)
    },
    onResize() {
      this.myChart && this.myChart.resize()
      // this.$refs.swiper1 && this.$refs.swiper1.resize();
    },
  },
}
</script>