目录
vue按需引入echarts5
功夫小子1234567890
2021年10月14日 12:07
收录于文集
共18篇

因为一个项目需要用到echarts5这个js库来绘制折线和柱状图。vue有vue-echarts这个插件来方便引入echart。但是本着学习的目的，所以就没有用插件，而是直接引入echarts5.js。但是没想到坑确实多，所以就来记录一下。

先说一下我的版本，我是echarts5版本，所以echarts4及其以下就不需要看了，因为echarts5的接口已经改变，所以如果大家需要参考，最好看一下版本，以免出错。

安装 

直接npm下载，当然我们国内因为某种原因可能比较慢，所以要么有科学上网的能力，要么就是用淘宝的cnpm镜像。

1，全局引入

全局引入就非常简单，直接在main.js里直接

代码块
JavaScript
自动换行
复制代码
//用import引入echarts
import echarts from 'echarts'
//绑定在vue的原型链上
Vue.prototype.$echarts = echarts;
复制成功

2，按需引入

项目代码结构

可以看到我的echarts的引入是在外面单独写一个js文件，然后引入进main.js中

代码块
JavaScript
自动换行
复制代码
// echart.js
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
import Vue from 'vue'
// 引入柱状图,折线图图表，散点图图表后缀都为 Chart
import { BarChart,LineChart,ScatterChart} from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  DatasetComponentOption,
  TransformComponent
} from 'echarts/components';

// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  ScatterChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
//绑定在原型链上
Vue.prototype.$echarts = echarts
//导出echarts
export default echarts
复制成功

官方引入教程。

https://echarts.apache.org/handbook/zh/basics/import

代码块
JavaScript
自动换行
复制代码
//main.js中引入echart.js
import echarts from "./Echarts/echarts.js"
复制成功

组件中引用

代码块
HTML
自动换行
复制代码
<template>
  <div ref="Dom" style="width: 300px; height: 400px;">

  </div>
</template>

<script>
  export default{
      mounted() {
        //获取Dom节点
        let chartDom = this.$refs.Dom;
        //初始化echarts实例
        let myChart = this.$echarts.init(chartDom);
        //绘制图标
        let option;
        option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
        };
        option && myChart.setOption(option);
      }
  }
</script>

<style>
</style>
复制成功

代码块
JavaScript
自动换行
复制代码
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});
复制成功

注意呀，官方的实例是利用id或者class名来引用的，而我是利用vue里的ref，要注意两者的区别。

vue官方对ref的说明

最终效果

注意，用来显示echarts的容器最好height和width最好设置为死的，不要设置为100%。

代码块
HTML
自动换行
复制代码
<template>
  <div ref="Dom" style="width: 300px; height: 400px;">

  </div>
</template>
复制成功

发现echart并没有按照百分比适应屏幕，其原因echart是执行太快，css的100%还没来得及反应，js就已经执行完了，所以把百分比转成像素单位，其解决方法是延迟echart的初始化

本文为我原创，未经授权禁止转载
cv13578459