自适应echarts 双曲线图-CSDN博客

本文介绍了如何在项目中安装和引用ECharts，通过设置容器宽高来配置图表，并提供了实现ECharts图自适应的代码示例，特别强调了新建的esresize.js文件在实现自适应过程中的作用。

1.安装echarts

npm install echarts -S

2.引用方式
全局

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

局部在script 标签中

import echarts from "echarts";
import { EleResize } from "@/assets/js/esresize";

3.设置容器给出宽高

 <div class="contain" id="joinCompareEcharts" style="width:1200px;height:800px"></div>

4.代码如下
在这里插入图片描述

export default {
  data() {
    return {
    successArray:[10,80,80,10,90,20],
    failArray:[80,10,20,40,50,10],
    dateTime:[1,2,3,4,5,6],
     //   曲线图
    curveOption: {
        backgroundColor: "#fff",
         title: {
          text: "新增入库单数",
          left: "25px",
          top: "15px",
          textStyle: {
            color: "#999",
            fontSize: 12,
            fontWeight: "400",
          },
        },
        color: ["#73A0FA", "#73DEB3"],
        tooltip: {
          padding:15,
          trigger: "axis",
          backgroundColor: "#fff",
          borderWidth: "1", //边框宽度设置1
          borderColor: "#F7F7F7", //设置边框颜色
          color: "black",
          textStyle: {
            color: "black", //设置文字颜色
            fontWeight:700
          },
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
            lineStyle: {
              type: "dashed",
            },
          },
        },
        grid: {
          top: "20%",
          bottom: "6%",
          left: "3%",
          right: "3%",
          containLabel: true,
        },
        legend: {
          data: ["对接失败", "对接成功"],
          orient: "horizontal",
          show: true,
          right:30,
          top:0,
          icon: "circle", 
          itemWidth: 10,  // 设置宽度
          itemHeight: 10, // 设置高度
          itemGap: 20 // 设置间距
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
             splitLine: {
            show: false,
          },
         splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle:{
                color:'#535353',
            }

          },
            axisLabel: {
              margin: 20,
              interval:0,//X轴刻度间距
              textStyle: {
                fontSize: 14,
                color: "rgba(#999)",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#939ab6",
                opacity: 0.15,
              },
            },
            data:[],
          },
        ],
        yAxis: [
          {
            type: "value",
            offset: 15,
            min: 0,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
                color: "#999",
              },
            },
        splitLine: {
            show: true,
           lineStyle: {
              color: "#F3F4F4",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
         
          },
        ],
        series: [
          {
            name: "对接失败",
            type: "line",
            z: 3,
            showSymbol: false,
            smoothMonotone: "x",
            lineStyle: {
              width: 3,
              color:'#5764FF'
            },
            areaStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#AFBBFF", // 0% 处的颜色
                    //   color: "#E0EBFF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                       color: "#fff", // 0% 处的颜色
                    },
                  ],
                },
              },
            },
            smooth: true,
            data: [],
          },
          {
            name: "对接成功",
            type: "line",
            showSymbol: false,
            smoothMonotone: "x",

            lineStyle: {
              width: 3,
              color:'#06C86F'
            },
             areaStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#D2FFED", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                       color: "#fff", // 0% 处的颜色
                    },
                  ],
                },
              },
            },
            smooth: true,
            data:[],
          },
        ],
      }
}
    },
    mounted(){
    },
    methods:{
     // 曲线图
    curveEcharts() {
       this.curveOption.xAxis[0].data=this.dateTime
       this.curveOption.series[0].data=this.failArray
       this.curveOption.series[1].data=this.successArray
      var myChart2 = echarts.init(document.getElementById("joinCompareEcharts"));
      myChart2.setOption(this.curveOption);
       window.onresize = myChart2.resize;
      let listener = function () {
        myChart2.resize();
      };
      EleResize.on(document.getElementById("joinCompareEcharts"), listener);
    },
    
  }

6.echarts图自适应
新建一个esresize.js文件,我把他放在assets 下的 js文件夹中

var EleResize = {
    _handleResize: function (e) {
        var ele = e.target || e.srcElement
        var trigger = ele.__resizeTrigger__
        if (trigger) {
            var handlers = trigger.__z_resizeListeners
            if (handlers) {
                var size = handlers.length
                for (var i = 0; i < size; i++) {
                    var h = handlers[i]
                    var handler = h.handler
                    var context = h.context
                    handler.apply(context, [e])
                }
            }
        }
    },
    _removeHandler: function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners
        if (handlers) {
            var size = handlers.length
            for (var i = 0; i < size; i++) {
                var h = handlers[i]
                if (h.handler === handler && h.context === context) {
                    handlers.splice(i, 1)
                    return
                }
            }
        }
    },
    _createResizeTrigger: function (ele) {
        var obj = document.createElement('object')
        obj.setAttribute('style',
            'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
        obj.onload = EleResize._handleObjectLoad
        obj.type = 'text/html'
        ele.appendChild(obj)
        obj.data = 'about:blank'
        return obj
    },
    _handleObjectLoad: function (evt) {
        this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
        this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
    }
}
if (document.attachEvent) { // ie9-10
    EleResize.on = function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners
        if (!handlers) {
            handlers = []
            ele.__z_resizeListeners = handlers
            ele.__resizeTrigger__ = ele
            ele.attachEvent('onresize', EleResize._handleResize)
        }
        handlers.push({
            handler: handler,
            context: context
        })
    }
    EleResize.off = function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners
        if (handlers) {
            EleResize._removeHandler(ele, handler, context)
            if (handlers.length === 0) {
                ele.detachEvent('onresize', EleResize._handleResize)
                delete ele.__z_resizeListeners
            }
        }
    }
} else {
    EleResize.on = function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners
        if (!handlers) {
            handlers = []
            ele.__z_resizeListeners = handlers

            if (getComputedStyle(ele, null).position === 'static') {
                ele.style.position = 'relative'
            }
            var obj = EleResize._createResizeTrigger(ele)
            ele.__resizeTrigger__ = obj
            obj.__resizeElement__ = ele
        }
        handlers.push({
            handler: handler,
            context: context
        })
    }
    EleResize.off = function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners
        if (handlers) {
            EleResize._removeHandler(ele, handler, context)
            if (handlers.length === 0) {
                var trigger = ele.__resizeTrigger__
                if (trigger) {
                    trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
                    ele.removeChild(trigger)
                    delete ele.__resizeTrigger__
                }
                delete ele.__z_resizeListeners
            }
        }
    }
}
export { EleResize }