将echarts封装为js文件

笨笨624

于 2022-08-17 17:03:46 发布

阅读量941

点赞数

分类专栏：前端文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_68252492/article/details/126375075

版权

本文介绍如何在项目中创建一个echarts.js文件，通过import导入echarts库，将图表实例封装为函数，允许传入自定义数据。在需要使用图表的页面引入此文件并传递数据，即可方便地展示echarts图表。

摘要由CSDN通过智能技术生成

在项目目录下新建一个文件夹，新建echarts.js文件，import * as echarts from 'echarts'导入echarts组件，将图表例子封装到函数中，设置形参，在要使用的页面中引入echarts.js文件，将data中的数据当做实参传给形参，便可在页面中展示echarts图表。

import * as echarts from 'echarts';
export function chart(lineDataX, lineDataY) {
    var myChart = echarts.init(document.getElementById('piping'));
    myChart.setOption({
        xAxis: {
            name: "流量",
            data: lineDataX
        },
        yAxis: {    
            name: "m/s"
        },
        series: [
            {
                barWidth: '12px',
                type: 'bar',
                data: lineDataY,
                showBackground: true,
                backgroundStyle: {
                    color: '#6C8097'
                },
                itemStyle: {
                    color: '#159AFF',
                    opacit