“携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情”

Vue项目中使用Echarts---全局 / 按需引入

npm下载

npm install echarts --save

按需引入

创建文件Echarts/echarts.js

import * as echarts from 'echarts/core'
import { RadarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { LegendComponent } from 'echarts/components'

echarts.use([RadarChart, CanvasRenderer, LegendComponent])

// 绑定在原型链上
Vue.prototype.$echarts = echarts

// 导出 echarts
export default echarts

在src/main.js中引入

• import '@/Echarts/echarts'

全局引入

import * as echarts from 'echarts'

在 mounted 钩子函数定义使用中

获取DOM节点

• 局部

  • const myChart = this.$echarts.init(this.$refs.myChart)

• 全局

  • const myChart = echarts.init(this.$refs.myChart)

定义 option并写入echarts配置项

• myChart.setOption(option)

补充

按需引入注意点：

引入柱状图、折线图、饼状图、雷达图图表，图表后缀为 Chart

import { BarChart, LineChart, RadarChart, PieChart } from 'echarts/charts';

引入提示框、标题、直角坐标系、数据集、内置数据转换器组件，后缀为Component

import {
    TitleComponent,
    TooltipComponent,
    GridComponent,          
    DatasetComponent,
    TransformComponent,
    LegendComponent
} from 'echarts/components';

标签自动布局，全局过渡动画等特性

import { LabelLayout, UniversalTransition } from 'echarts/features';

引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步

import { CanvasRenderer } from 'echarts/renderers';

自适应

• window.onresize = myChart.resize

解决Vue在同一页面引入多个echarts组件无法自适应，resize失效的问题，lodash实现节流的基本使用

解决Vue在同一页面引入多个echarts组件无法自适应，resize失效的问题

window.onresize()方法只会对最后一个组件里的图表产生效果，是组件加载顺序导致的，所以将window.onresize监听放到父组件去执行

父组件：

<BarChart ref="bar" />
    
<PieChart ref="pie" />

mounted() {
    this.$nextTick(() => {
      window.onresize = () => {
        this.$refs.bar.resetCharts()
        this.$refs.pie.resetCharts()
      }
    })
  }

使用节流的写法

安装npm i lodash import _ from 'lodash

window.addEventListener(
        'resize',
        _.debounce(() => {
          console.log(2)
          this.$refs.bar.resetCharts()
          this.$refs.pie.resetCharts()
        }, 300)
      )

子组件：

methods: {
    resetCharts() {
      // 重置图表大小
     this.$echarts.init(this.$refs.myChart).resize()
    }
  }

更多请参考 Echarts官方文档