console 命令行工具 X clear

console

// 不同档次酒店受疫情影响程度
let negative_test_data = [
    {key: 'RevPAR同比变化', values:[{x:'经济型', y:-0.89}, {x:'三星及同档次', y:-0.9}, {x:'四星及同档次', y:-0.81},{x:'五星及同档次', y:-0.81}]},
    {key: '餐饮收入同比变化', values:[{x:'经济型', y:-0.82}, {x:'三星及同档次', y:-0.80}, {x:'四星及同档次', y:-0.61},{x:'五星及同档次', y:-0.64}]},
    {key: '总收入同比变化', values:[{x:'经济型', y:-0.82}, {x:'三星及同档次', y:-0.86}, {x:'四星及同档次', y:-0.67},{x:'五星及同档次', y:-0.65}]}
];

let chart;
nv.addGraph(function () {
    chart = nv.models.multiBarChart()
        .duration(300)
        .margin({ bottom: 100, left: 70 })
        .rotateLabels(0)
        .groupSpacing(0.1)
        .showControls(false)
        ;

    // chart.reduceXTicks(false).staggerLabels(false);

    chart.xAxis
        .axisLabelDistance(35)
        // .showMaxMin(true)
        // .tickFormat(d3.format(',.6f'))
        ;

    chart.yAxis
        // .axisLabel("同比变化率")
        // .axisLabelDistance(-5)
        .tickFormat(d3.format(',.1%'))
        ;

    d3.select('#chart1 svg')
        .datum(negative_test_data)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

<link href="http://nvd3-community.github.io/nvd3/build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8">

</script>
<script src="http://nvd3-community.github.io/nvd3/build/nv.d3.js">
</script>

<body>
	<div id="chart1" class='with-3d-shadow with-transitions'>
		<svg></svg>
	</div>
</body>

text {
    font: 12px sans-serif;
}

svg {
    display: block;
}

html,
body,
#chart1,
svg {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}