前言


一、Echarts安装

npm install echarts --S
or
yarn add echarts --S
or 淘宝安装速度快
cnpm install echarts --save

二、Echarts引入

全量引入(可优化CDN引入,减少打包构建时间

// 引入echarts
import echarts from "@/const/echarts";
 
// 挂载vue实例vue2
Vue.prototype.$echarts = echarts

// vue3
// app.config.globalProperties.$echarts = echarts

Vue2 直接使用this.$echarts
Vue3 可以生命周期使用this.$echarts,也可 setup 使用 getCurrentInstance 获取

import { getCurrentInstance } from 'vue'
const echarts = getCurrentInstance().appContext.config.globalProperties.$echarts;

相比这种,咱更喜欢直接在组件内直接引入使用,不过这种全局引入可以使用CDN引入方式优化(可参考CDN引入方法

下面咱重点说下按需引入

按需引入(加快资源加载,体积小)

1、在常量定义文件夹或者公共代码目录新建 echarts.ts文件

即在src/const/目录新建echarts.ts文件然后引入当前项目需要组件等,当前文章以饼状图和柱状图为例配置如下

// 引入 echarts 核心模块核心模块提供了 echarts 使用必须要的接口
import * as echarts from "echarts/core";

// 引入柱状图和饼状图图表图表后缀都为 Chart,具体为 图标名称+Chart (注意图标名称首字母大写
import {
    BarChart,
    PieChart
} from "echarts/charts";

// 引入提示框,标题直角坐标系数据集,内置数据转换器组件组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    ToolboxComponent,
    LegendComponent,
} from "echarts/components";
// 标签自动布局全局过渡动画特性
import { 
    // LabelLayout,
    // UniversalTransition
} from "echarts/features";

// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    ToolboxComponent,
    LegendComponent,
    CanvasRenderer,

    BarChart,
    PieChart,
]);

// 导出
export default echarts;

如果有些不知道是否需要引入,且遗漏的,在页面上会出现以下错误,根据错误一个个配置即可
这里插入图片描述

2、引入新建的 /const/echarts.ts

vite构建为例需先配置 /@

resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url))
  }
},

然后再在需要使用组件或者页面直接引入

import echarts from "@/const/echarts";

3、然后根据官网提供的使用方法就可使用啦

import echarts from "@/const/echarts";
var myChart = echarts.init(html); // html为某个html节点
...
myChart.setOption(option); // option对应图标配置参数信息

最后页面即可显示对应配置的图标

在这里插入图片描述

在这里插入图片描述

"toolbox": {
    show: true,
    feature: {
        saveAsImage: {
            title: "saveAsImage", show: true, name: props.title
        },
        myFull: {
            // 全屏
            show: true,
            title: "zoom",
            icon: `image: //${fullscreen}`, // fullscreen为放大图标,可使用import引入对应资源或者直接配置为可访问url
            onclick: (e) => {
                html.style.setProperty("background-color", "#f6fdff");
                // 全屏查看
                if (html.requestFullScreen) {
                    // HTML W3C 提议
                    html.requestFullScreen();
                } else if (html.msRequestFullscreen) {
                    // IE11
                    html.msRequestFullScreen();
                } else if (html.webkitRequestFullScreen) {
                    // Webkit
                    html.webkitRequestFullScreen();
                } else if (html.mozRequestFullScreen) {
                    // Firefox
                    html.mozRequestFullScreen();
                }
                // 退出全屏
                if (html.requestFullScreen) {
                    document.exitFullscreen();
                } else if (html.msRequestFullScreen) {
                    document.msExitFullscreen();
                } else if (html.webkitRequestFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (html.mozRequestFullScreen) {
                    document.mozCancelFullScreen();
                }
            },
        }
    },
}

总结

原文地址:https://blog.csdn.net/weiCong_Ling/article/details/130710021

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_16927.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注