echarts实例（常用配置项说明）

echarts图表只能在mounted生命周期函数调用，created钩子中页面还没挂载

叠堆图

<div class="chart"  v-show="!isShow" ref="myChart"></div>

// 图例参数设置，初始化
    setChart() {
      // 如果页面有切换多次渲染图表，需先销毁已渲染的图表，
      if (this.myChart != null && this.myChart != '' && this.myChart != undefined) {
        this.myChart.dispose() //销毁
      }
      this.myChart = this.$echarts.init(this.$refs.myChart)
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
          },
          confine:true , // 是否将 tooltip 框限制在图表的区域内。
          // 鼠标移入图表悬浮框数据回调处理
          formatter: function (params) {
            if(params.length>0){
              var res = ''
              res = "<div style=''>";
              for(var i=0;i<params.length;i++){
                res += '<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#F67171;margin-right:6px"></span>'+'<span>'+params[i].seriesName+'</span>'+':' + '<span>'+ params[i].value + '</span>' + '</br>';
              }
              res += "</div>"
              return res
            }
          },
          extraCssText: 'max-width:200px; overflow: hidden;text-overflow:ellipsis;white-space: normal; word-break: break-all;' // 额外附加到浮层的 css 样式

        },
        // 图列对应项
        legend: {
          data: this.legendData,
          // 在 legend 文字很多的时候对文字做裁剪并且开启 tooltip
          formatter: function (name) {
            if(name.length>5){
              return name.substring(0,5)+'...'
            }else{
              return name
            }
            // return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…'); //此版本不支持
          },
          tooltip: {
            show: true
          },
        },
        // 图表的位置（若图表左右坐标轴名展示不全，可设置图表的left，right解决）
        grid: { 
          left: '0%', 
          right: '5%',
          bottom: '3%',
          containLabel: true, // grid 区域是否包含坐标轴的刻度标签  true:防止标签溢出
        },
        
        // X轴数值配置项设置
        xAxis: {
          type: 'category',
          name: '时间',
          show: true, // 边框是否显示
          boundaryGap: true, // 坐标轴两边是否留白
          data: this.xAxisData,
          position: 'bottom', // x轴位置
          nameLocation: 'end',
          // 若X轴坐标轴图表项过多，底分辨率展示不全，可设置axisLable,坐标轴刻度标签的相关设置。
          axisLabel: { 
              interval: 0, // 强制设置坐标轴分割间隔。
              alignWithLabel: true, // 刻度线和标签对齐
              formatter: function (value) {
                if (window.screen.width == '1366') {
                  if (value.length > 3) {
                    // return value.split("").join("\n");
                    var ret = ""; //拼接加\n返回的类目项
                    var maxLength = 2; //每项显示文字个数
                    var valLength = value.length; //X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                    for (var i = 0; i < rowN; i++) {
                      var temp = ""; //每次截取的字符串
                      var start = i * maxLength; //开始截取的位置
                      var end = start + maxLength; //结束截取的位置
                      temp = value.substring(start, end) + "\n";
                      ret += temp; //凭借最终的字符串
                    }
                    return ret;
                  } else {
                    return value
                  }
                } else {
                  return value
                }
              }
            }
        },
        
        // Y轴数值配置项设置
        yAxis: {
          name: '数量',
          nameLocation: 'end',
        },
        
        // 数据源
        series: this.seriesData,
      }
      
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option)
      
      // 图例随浏览器窗口大小自适应
      window.onresize = this.myChart.resize
    },

数据源

this.seriesData.push({
   name: element.orgName,
   type: 'bar',
   stack: 'ISO',
   barWidth: 25,
   barGap: '80%' /*多个并排柱子设置柱子之间的间距*/ ,
   barCategoryGap: '50%' /*多个并排柱子设置柱子之间的间距*/ ,
   emphasis: {
       focus: 'series',
   },
   color: '#F67171',
   data: element.count,
})

导出echarts表格为图片

// 图片导出
    output(type) {
      // this.chartObject存的是echarts实例
      if (this.myChart) {
        // echarts官网文档实例方法getDataURL
        let picInfo = this.myChart.getDataURL({
          type: 'png',
          pixelRatio: 1.5, // 放大两倍下载。解决生成图片在移动端模糊问题
          backgroundColor: '#fff',
          excludeComponents: ['toolbox'], // 导出时忽略toolbox组件
        }) // 获取到的是一串base64信息

        if (type == 'PNG') {
          const elink = document.createElement('a')
          // 设置默认文件名，this.chartTitle为绘图时生成的标题
          elink.download = this.chartTitle + '.png'
          elink.style.display = 'none'
          elink.href = picInfo
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else if (type == 'SVG') {
          let mycanvas = document.querySelector('#' + this.id + ' canvas')

          //设置svg标签属性
          let svg0 = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
          svg0.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
          svg0.setAttribute('version', '1.1')
          svg0.setAttribute('height', mycanvas.height)
          svg0.setAttribute('width', mycanvas.width)
          let img3 = document.createElementNS('http://www.w3.org/2000/svg', 'image')
          // base64编码写入href
          img3.href.baseVal = picInfo
          img3.setAttribute('height', mycanvas.height)
          svg0.appendChild(img3)
          let h = svg0.outerHTML
          //给图片对象写入base64编码的svg流
          let data = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(h)))

          const elink = document.createElement('a')
          // 设置默认文件名，this.chartTitle为绘图时生成的标题
          elink.download = this.chartTitle + '.svg'
          elink.style.display = 'none'
          elink.href = data
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        }
      } else {
        this.$message({
          message: '暂未绘制图表，请先绘制图表',
          type: 'error',
        })
      }
    },

自定义鼠标悬浮事件方法

设置自定义方法时，在option下tooltip选项中不能设置formatter

      // 使用刚指定的配置项和数据显示图表。
      .......
      
      this.myChart.setOption(option)
      
      let that = this
      //在echarts 初始化完成后，调用自定义的鼠标悬浮事件方法
      this.myChart.on('mouseover', function (params) {
        let extension = document.getElementById('extension')
        if (params.componentType == 'xAxis') {
          //判断移入x轴
          console.log(params.value)
          let mousePos = that.mouseMove()
          //鼠标位置，按需求设置
          let x = mousePos.x
          let y = mousePos.y - 30
          extension.innerHTML = params.value
          //气泡样式
          // extension.style.cssText = "top:" + y + "px;left:" + x +"px;display:block;position: fixed;";
          extension.style.cssText = 'top:' + y + 'px;left:' + x + 'px;display:block;position: fixed;z-index:99'
        }
      })
      // this.myChart.on('mouseout', function (params) {
      //   //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
      //   let extension = document.getElementById("extension");
      //   if (params.componentType == "xAxis") {
      //     extension.style.cssText = "display:none";
      //   }
      // });
      // 图例随浏览器窗口大小自适应
      window.onresize = this.myChart.resize

// 获取鼠标位置坐标的方法
    mouseMove(ev) {
      ev = ev || window.event
      console.log(ev)
      return this.mousePosition(ev)
    },
    mousePosition(ev) {
      if (ev.clientX || ev.clientY) {
        return { x: ev.clientX, y: ev.clientY }
      }
    },