echarts可视化自行封装一个js

最新推荐文章于 2025-07-11 10:20:42 发布

AMagic666

最新推荐文章于 2025-07-11 10:20:42 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

文章标签：互联网大数据前端数据可视化 JS

本文链接：https://blog.youkuaiyun.com/qq_37937900/article/details/82229177

本文档介绍如何将Echarts图表进行封装，以便在网页中简单调用即可实现数据可视化。只需在页面中引入封装好的JS文件，通过调用内部方法并传入参数，就能快速创建个性化的图表。对于Echarts官方提供的特殊属性或本封装未包含的功能，读者可根据实际需求参考Echarts官网进行扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装好以后在页面引用这个js然后直接调用这个js里面的方法往里面传参即可，有一些特殊的属性如果少部分跟这里不一样或这里面没有可以自行根据Echarts官网和需求写一个即可

var echartsTheme;
$(document).ready(function(){
    //setEchartsTheme("infographic");
    setEchartsTheme("shine");//设置主题
});

function setEchartsTheme(inTheme){
    echartsTheme = inTheme;
}

function echartShow(option,container){
    try{
        if(echartsOptionDefault != undefined)
            setChartsDefault(echartsOptionDefault,option);
    }catch(e){}
    if(echartsTheme==undefined && option.color==undefined){
        option["color"] = [
           "#00e2fd",
            "#e9c229",
            "#11d67c",
            "#fe6c84",
            "#fff600",
            "#7e71ff",
            "#008bfe",
            "#f89758",
            "#6e7074",
            "#546570",
            "#c4ccd3"
        ];
    }
    if(option.toolbox==undefined){
        option["toolbox"]={show : true,
                feature : {
                    dataView : {
  
  show: true, readOnly: false},
                    magicType : {
  
  show: true, type: ['line', 'bar','pie']},
                    restore : {
  
  show: true},
                    saveAsImage : {
  
  show: true}
                }
        };
    }
    var dom = document.getElementById(container);
    dom.removeAttribute("_echarts_instance_"); 
    var myChart;
    if(echartsTheme==undefined){
        myChart = echarts.init(dom);
    }else{
        myChart = echarts.init(dom,echartsTheme);
    }

    myChart.setOption(option, true);
    window.onresize = myChart.resize;
    return myChart;
}


function setChartsDefault( data, inOption ) { 
        if ( inOption == undefined ) {
            inOption=data;
        } else  if ( data.constructor == Array ) {            
            for ( var i=0; i<inOption.length; i++ ) {
                setChartsDefault( data[0], inOption[i] );
            }
            //return ;
        } else {            
            for (