我是个web开发的小白现在大一学的Java用HBuilderX抄的代码吧在Echarts的实例上复制下来的运行到网页里一片空白我不知道哪里有错误

@孙先生ya 2021-01-30 02:35:01

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>各专业报名情况</title>
<script src="Content/echarts.common.min.js"></script>
</head>
<body>
<div id="divEcharts" style="width:800px;height:500px;"></div>
<script type="text/javascript">
option = {
backgroundColor: '#2c343c',

title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},

tooltip: {
trigger: 'item'
},

visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '各专业报名情况',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: 80, name: 'WEB 开发工程师'},
{value: 20, name: 'UI 设计师'},
{value: 25, name: '大数据软件工程师'},
{value: 32, name: '新媒体运营'},
{value: 18, name: '移动软件工程师'},
{value: 26, name: '系统运维工程师'},
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},

animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
</script>
</body>
</html>

...全文

350 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

Asphyxia& 2021-02-05

打赏
举报

你得调用你js中的option才行

越来越好。 2021-02-01

打赏
举报

你注意看楼上的代码，他在代码的最后一步有一个初始化并setOption的操作。

@孙先生ya 2021-01-30

打赏
举报

我应该是目录那有问题吧

@孙先生ya 2021-01-30

打赏
举报

你这个是怎么出来的

Stephen_112 2021-01-30

打赏
举报

这黑漆麻乌的

Stephen_112 2021-01-30

打赏
举报

其次呢，你这代码缺内容：在保证echarts.common.min.js 存在的前提下：应该这么写


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>各专业报名情况</title>
<script src="Content/echarts.common.min.js"></script>
</head>
<body>
<div id="divEcharts" style="width:800px;height:500px;"></div>
<script type="text/javascript">
var option = {
    backgroundColor: '#2c343c',

    title: {
        text: 'Customized Pie',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },

    tooltip: {
        trigger: 'item'
    },

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series: [
        {
            name: '各专业报名情况',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
                {value: 80, name: 'WEB 开发工程师'},
                {value: 20, name: 'UI 设计师'},
                {value: 25, name: '大数据软件工程师'},
                {value: 32, name: '新媒体运营'},
                {value: 18, name: '移动软件工程师'},
                {value: 26, name: '系统运维工程师'},
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                color: 'rgba(255, 255, 255, 0.3)'
            },
            labelLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
            },
            itemStyle: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
};

var ec = echarts.init(document.getElementById('divEcharts'));
ec.setOption(option);
</script>
</body>

只能帮你到这里了！