echarts引用本地文件，动态传数据时只要显示坐标轴

最新推荐文章于 2023-06-11 00:20:17 发布

原创最新推荐文章于 2023-06-11 00:20:17 发布 · 3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

出错记录

echarts

本文详细介绍了如何在开发过程中正确引用本地ECharts文件的方法，包括在.jsp文件中直接引用.js文件及配置主题，以及在.js文件中进行路径配置的具体步骤。

引用本地文件进行开发

引用本地文件进行开发时在“.jsp”中，正常引用就好

首先是引用echarts.js

<script type="text/javascript" src="/assets/global/plugins/echarts-2.2.7/build/dist/echarts.js">
</script>

当使用了主题时要这样写来引用主题文件，但是”macarons”就不用啦~

<script type="text/javascript" src="/assets/global/plugins/echarts-2.2.7/doc/example/theme/blue.js">
</script>

在”.js”中做路径配置时，要这样写，重点是那些“../../../”呀！

require.config({
        paths : {
            echarts : '../../../assets/global/plugins/echarts-2.2.7/build/dist',
            theme : '../../../assets/global/plugins/echarts-2.2.7/doc/example',
        }
    });

中间的那个参数是加载主题的，不用可以不写哦

    require([ 'echarts', 'theme/theme/blue', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
    ], function(ec, theme) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = ec.init(document.getElementById('main'), theme);
        var option = {
            tooltip : {
                trigger : 'axis'
            },
            toolbox : {
                show : true,
                padding : 20,
                feature : {
                    restore : {
                        show : true
                    },
                    saveAsImage : {
                        show : true
                    }
                }
            },
            calculable : true,
            xAxis : [ {
                show : true,
                type : 'category',
                data : datax,
            } ],
            yAxis : [ {
                show : true,
                type : 'value',
            } ],
            series : [ {
                name : $("#metaDataActive").find("option:selected").text(),
                type : 'bar',
                data : datay,
                barMaxWidth : 50,
            } ]
        };
        // 为echarts对象加载数据
        myChart.setOption(option);
        window.onresize = myChart.resize;
    });