echarts按需引入支持echarts图片下载echarts随着浏览器窗口变化

在本地项目里创建/js/lib/eCharts.js文件，文件内容如下

/*按需引入 eCharts*/
import * as eCharts from 'echarts/core' // 引入核心库
import { BarChart, LineChart, PieChart, GaugeChart } from 'echarts/charts' // 引入图表类型
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components' // 引入配套组件
import { CanvasRenderer } from 'echarts/renderers' // canvas 渲染器
// 注册必须的组件
eCharts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  CanvasRenderer,
  LineChart,
  GaugeChart,
  PieChart,
  LegendComponent
])

export default eCharts

在vue文件里写

<!-- 目录填报情况 -->
<template>
  <div class="card-view">
    <div class="situation-lay">
      <div class="news-head">
        <span>
          <span style="padding-left: 0.1rem;">资源统计情况概况</span>
        </span>
      </div>
      <div class="echarts-box">
        <div ref="main" id="main" style="width: 100%; height: 400px; "></div>
        <div class="btn-view">
          <el-tooltip class="item" effect="dark" content="数据视图" placement="bottom">
            <el-button icon="el-icon-tickets" type="text" @click="showCard = true"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="保存为图片" placement="bottom">
            <el-button icon="el-icon-download" type="text" @click="pictureDownload()"></el-button>
          </el-tooltip>
        </div>
        <div class="card-view" v-show="showCard">
          <div class="card-title">
            数据视图
          </div>
          <div class="form-view">
            <el-form ref="form" :model="form" size="mini" label-width="120px">
              <el-form-item label="无条件共享:">
                <span>{{ form.name1 }}</span> 条
              </el-form-item>
              <el-form-item label="有条件共享:">
                <span>{{ form.name1 }}</span> 条
              </el-form-item>
              <el-form-item label="不共享:">
                <span>{{ form.name1 }}</span> 条
              </el-form-item>
            </el-form>
          </div>
          <div class="card-btn">
            <el-button type="primary" size="mini" @click="showCard = false">关闭</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

局部引入 import eCharts from ‘@/js/lib/eCharts’

<script>
var myChart
import eCharts from '@/js/lib/eCharts'
export default {
  name: 'LeftCatalogECharts',
  data() {
    return {
      showCard: false,
      dataList: [
        { value: 335, name: '无条件共享' },
        { value: 310, name: '有条件共享' },
        { value: 234, name: '不共享' }
      ],
      form: {
        name1: 0
      }
    }
  },
 
  mounted() {
    let _this = this
    setTimeout(function() {
      _this.init()
    }, 100)
    兼容不用的浏览器 窗口的大小 
    window.addEventListener('resize', function() {
      _this.$nextTick(_this.myChartLeft.resize())
    })
 
  },
  methods: {
     //接收动态数据
      echartsInit(list) {
      this.dataList = list
      let _this = this
      setTimeout(function() {
        _this.init()
      }, 100)
    },
    init() {
      let _dataList = this.dataList
      // 基于准备好的dom，初始化echarts实例
      myChart = eCharts.init(document.getElementById('main'))
      myChart.resize({
        width: `${this.$refs.main.offsetWidth}`,
        height: '400'
      })
      // 指定图表的配置项和数据
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          data: this.dataList.name,
          left: 'left',
          textStyle: {
            fontSize: 13,
            width: 120,
            rich: {
              a: {
                align: 'left',
                color: '#333333',
                padding: [0, 0, 0, 0]
              },
              b: {
                align: 'right',
                color: '#333333',
                padding: [0, 0, 0, 5]
              }
            }
          },
          formatter: function(name) {
            let _index = 0
            _dataList.forEach((item, i) => {
              if (item.name === name) {
                _index = i
              }
            })
            let arr
            if (name === '无条件共享') {
              arr = ['{a|' + name + '}', '{b|( ' + _dataList[_index].value + ' )}']
            } else {
              arr = ['{a|' + name + '}', '{b|( ' + _dataList[_index].value + ' )}']
            }
            return arr.join('')
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '60%'],
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                shadowColor: '#333333'
              },
              itemStyle: {
                show: true,
                shadowColor: '#333333'
              }
            },
            data: this.dataList
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true)
    },
    pictureDownload() {
      //导出图片
      var img = new Image()
      img.src = myChart.getDataURL({
        type: 'png',
        pixelRatio: 1, //放大2倍
        backgroundColor: '#fff'
      })
      img.onload = function() {
        var canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        var ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0)
        var dataURL = canvas.toDataURL('image/png')
        var a = document.createElement('a')
        // 创建一个单击事件
        var event = new MouseEvent('click')
        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
        a.download = '目录共享方式统计.png'
        // 将生成的URL设置为a.href属性
        a.href = dataURL
        // 触发a的单击事件
        a.dispatchEvent(event)
      }
    }
  }
}
</script>

样式代码

<style lang="scss" scoped>
.card-view {
  .situation-lay {
    width: 100%;
    .center {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .news-head {
      width: 100%;
      height: 0.4rem;
      line-height: 0.4rem;
      font-size: 0.18rem;
      & > span:before {
        content: '';
        border-left: solid 3px #166bf2;
        position: relative;
      }
    }
    .echarts-box {
      position: relative;
      .btn-view {
        position: absolute;
        top: 0.02rem;
        right: 0.1rem;
      }
      #main {
        width: 100%;
        height: 4rem;
        border: $effect-border-edging;
      }
      .card-view {
        position: absolute;
        width: calc(100% - 0.02rem);
        top: 0.02rem;
        left: 0.01rem;
        right: 0.01rem;
        height: 3.99rem;
        background: #ffffff;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        .card-title {
          padding: 0.1rem 0.2rem;
          color: rgb(0, 0, 0);
          width: calc(100% - 0.4rem);
        }
        .form-view {
          width: calc(100% - 0.4rem);
          padding-top: 0.3rem;
          height: 2.6rem;
          border: $effect-border-edging;
          & span {
            color: $color-red-base;
          }
          /deep/.el-form-item {
            margin-bottom: 0;
          }
        }
        .card-btn {
          height: 0.4rem;
          padding: 0.1rem 0.2rem;
          width: calc(100% - 0.4rem);
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>