123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- //军事训练情况--参训人次
- var myChart1 = echarts.init(document.getElementById('left2_3'), 'vintage');
- var names = ['优良','及格', '未及格'];
- var values = [547, 50,20];
- // 计算总数
- var total = values.reduce((p, v) => {
- return p + v;
- }, 0);
-
- var colorList = [
- "#f0422a",
- "#00f0ff",
- "#e6923e",
- ];
- var data = [];
- for (var i = 0; i < names.length; i++) {
- data.push({
- name: names[i],
- value: values[i],
- });
- }
- data.reverse();
- // 公用调整
- var itemStyle = {
- normal: {
- color: function (params) {
- return colorList[params.dataIndex];
- },
- },
- };
- var leftCenter = ['45%', '50%'];
- var radius1 = ['0', '35%']; // 饼图
- var radius3 = ['40%', '41%']; // 线圈
- // 公用调整-end
-
- option = {
- title: {
- text: '参训人次',
- bottom:35,
- left: 75,
- textStyle: {
- color: '#fff',
- fontSize: 12,
- },
- },
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c}人 ({d}%)",
- },
- series: [
- {
- name: "参训人次",
- type: 'pie',
- zlevel: 3,
- radius: radius1,
- center: leftCenter,
- // itemStyle: itemStyle,
- itemStyle: {
- normal: {
- color: function (params) {
- return colorList[params.dataIndex];
- },
- },
- },
- labelLine: {
- show: false,
- normal: {
- length: 5,
- length2: 0,
- lineStyle: {
- color: 'transparent',
- },
- },
- },
- label: {
- normal: {
- formatter: (params) => {
- return '●';
- },
- textStyle: {
- color: '#00f0ff',
- fontSize: 12,
- },
- },
- },
- data: data,
- },
- {
- // 最外圆圈
- type: 'pie',
- zlevel: 1,
- silent: true, //取消高亮
- radius: radius3,
- center: leftCenter,
- itemStyle: {
- normal: {
- color: function (params) {
- return colorList[params.dataIndex];
- },
- },
- },
- labelLine: {
- show: false,
- normal: {
- length: 10,
- length2: 0,
- lineStyle: {
- color: 'transparent',
- },
- },
- },
- label: {
- show: true,
- textStyle: {
- color: '#00f0ff',
- fontSize: 12,
- fontWeight:'bolder'
- },
- },
- data: data,
- },
- ],
- };
- myChart1.setOption(option);
|