Echarts使用树图报错：Component series.tree not exists. Load it first.

最新推荐文章于 2024-05-06 09:49:31 发布

code_mzh

最新推荐文章于 2024-05-06 09:49:31 发布

阅读量1k

点赞数

文章标签： javascript js

本文链接：https://blog.youkuaiyun.com/code_mzh/article/details/107886988

版权

本文详细介绍如何从GitHub下载ECharts库并配置树形图表，包括下载方式、文件选择及HTML导入方法。通过实例演示了如何初始化图表、加载数据及设置选项，如触发器、布局位置、符号大小、标签样式等。

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

这是报错：
在这里插入图片描述
不用cdn就要下载好js

没别的，就是下载，github快：点击这下载

方式一：全下载

在这里插入图片描述

下载后找到echarts.js!!!

别用echarts.common.js,这是基础的，没树图！！！

方式二：觉得麻烦也可以只下载echarts.js

1.点进dist

在这里插入图片描述

2.下载echarts.js

在这里插入图片描述

然后就是导入使用了

<script type="text/javascript" th:src="@{/lib/echarts/echarts.js}" src="lib/echarts/echarts.js"></script>
<script type="text/javascript" th:inline="javascript">
    var myChart = echarts.init(document.getElementById('treeChart'));
    myChart.showLoading();
    var data =[[${treeChart}]];

    data= JSON.parse(data);
        console.log(data)
        myChart.hideLoading();

        echarts.util.each(data.children, function (datum, index) {
            index % 2 === 0 && (datum.collapsed = true);
        });

        myChart.setOption(option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',

                    data: data,

                    top: '1%',
                    left: '7%',
                    bottom: '1%',
                    right: '20%',

                    symbolSize: 12,

                    label: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 16
                    },

                    leaves: {
                        label: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    },

                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]

    });
</script>