饼状图在html里面制作,单饼状图.html

单饼状图

.demo {

margin: 50px auto;

width: 500px;

height: 300px;

}

body {

background: #82b9fd;

}

var main4 = new HxChartPie('main4');

main4.option.color = ['#e6e6e6', '#2ba1f9', '#5f7aff', '#0154ba', '#ff9600', '#1e7e00', '#7b0099', '#bc0000', '#ea4800', '#007774', '#703d12', '#b27c54', '#999999'];

main4.option.series.label = {

color: 'black'

}

main4.putData('人为原因', 30);

main4.putData('导向系统', 22);

main4.putData('轿厢', 20);

main4.putData('控制系统', 15);

main4.putData('曳引系统', 19);

main4.putData('电气系统', 12);

main4.putData('安全保护装置', 12);

main4.putData('门系统', 12);

main4.putData('外部原因', 12);

main4.trim();

main4.option.legend.show = false;

main4.option.series.labelLine = {

show: false,

length: 5,

length2: 0

};

// main4.option.series.emphasis = {

// label: {

// color: 'black'

// }

// }

main4.option.series.itemStyle.borderColor = '#82b9fd';

main4.option.series.itemStyle.borderWidth = 3;

main4.init();

一键复制

编辑

Web IDE

原始数据

按行查看

历史