vue echarts 5版本按需引入

vue echarts 5版本按需引入

1.先安装依赖

npm install echarts --save

2.1全局引入main.js中配置（不推荐使用，会导致包过大，冗余多）

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //挂载在原型，组件内使用直接this.$echarts调用

2.2组件内按需引入 ( 推荐使用 )

这种方式很简单，新建一个lib/echarts.js文件 在需要引入图表的组件引入,例如如下引入柱状图。

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入各种图表，图表后缀都为 Chart
import { BarChart, PieChart,LineChart,RadarChart,ScatterChart,PictorialBarChart } from "echarts/charts";  //这里我引用两个类型的图表
// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  // GeoCoComponent
} from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  PieChart,
  LineChart,
  RadarChart,
  ScatterChart,
  PictorialBarChart,

  CanvasRenderer

]);

export default echarts;

3.局部引入为例，在组件中使用示例

<template>
    <div class="view-content">
        <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
    </div>
</template>
 
<script>
   import echarts  from '@/lib/echarts'
    export default {
        name: 'Echarts',
        data() {
            return {
            }
        },
        mounted() {
            this.drawLine();
        },
        methods: {
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart'))
                // 绘制图表配置
                let option = {
                    tooltip: {},
                    xAxis: {
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                };
                // 窗口大小自适应方案
                myChart.setOption(option);
                setTimeout(function() {
                    window.onresize = function() {
                        myChart.resize();
                    }
                }, 200)
            }
        }
    }
</script>
<style lang="scss" scoped>
</style>

4.效果

以上效果是官方的默认效果，当然这样子应用到项目中显然不符合需求，要做的更加炫酷更加科技感，就需要经过一番配置
官网示例链接