d3.json("data/sales_product.json", function (error, data) {
    // console.log(data);
    var myChart = echarts.init(document.getElementById('data_product'));
   
    var color = [
        "#00C6FB",
        "#5781FD",
        "#4DB1CB",
        //  "#3EBD7C",
        //  "#F7A925",
        //  "#bda29a",
        //  "#ca8622",
        //  "#749f83",
        //  "#6e7074",
        //  "#546570",
        //  "#c4ccd3"
    ];

    option = {
        tooltip: {},
        series: [{
            name: '销售额', // 图表的名称
            type: 'treemap', // 图表的类型树状图
            roam: false, // 是否允许鼠标缩放和平移，这里设置为false，表示不允许
            nodeClick: false, // 是否允许点击节点进行交互，这里设置为false，表示不允许
            breadcrumb: false, // 是否显示导航路径，这里设置为false，表示不显示
            // 分别设置图表的左边距、右边距、上边距和下边距，这里都设置为0。
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            itemStyle: {
                borderColor: '#062e62' // 定义节点的样式，这里设置了边框颜色为'#062e62'
            },
            // 定义节点标签的样式，这里设置了字体大小为8，颜色为白色
            label: {
                fontSize: 8,
                color: '#fff',
            },
            // 用于定义树状图的层级样式
            levels: [{// 定义了多个层级的样式
                color: color, // 设置节点的颜色
                itemStyle: {// 定义节点的样式
                    normal: {// 正常状态下的样式
                        borderWidth: 0, // 边框宽度，这里设置为0，表示无边框
                        borderColor: '#062e62', // 设置边框颜色
                        gapWidth: 5 // 设置节点之间的间隔宽度
                    }
                }
            },
                {
                    //colorSaturation: [0.35, 0.6],
                    colorAlpha: [1, 0.5], // 节点颜色的透明度，这里设置为[1, 0.5]，表示正常状态下节点的颜色透明度为1，鼠标悬停时透明度为0.5。
                    upperLabel: {// 定义上层节点标签的样式
                        normal: {// 定义正常状态下的样式
                            color: '#00C6FB', // 设置标签颜色
                            fontSize: 10, // 设置标签字体大小
                            show: true, // 是否显示标签，这里设置为true，表示显示
                            height: 15 // 设置标签高度
                        }
                    },
                    itemStyle: {// 定义节点的样式
                        normal: {// 定义正常状态下的样式
                            borderWidth: 5, // 设置边框宽度
                            borderColor: '#062e62', // 设置边框颜色
                            gapWidth: 1, // 设置节点之间的间隔宽度
                        },
                        emphasis: {// 定义鼠标悬停时的样式
                            borderColor: '#ccc' // 设置边框颜色
                        }
                    }
                }
            ],
            leafDepth: 2, // 树的叶子节点深度，其值为2
            data: data// 数据源
        }]
    };
    myChart.setOption(option)


})