>#### 分組顯示 ~~~ var equipment = ['華為', '中興', '愛立信', '索尼', 'www.remulu.com', 'www.edir.cn']; var project = ['華為', '中興', '烽火', '阿爾卡特', '三星', 'tplink', '惠普', '戴爾']; var colorList = [ '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', ]; option = { toolbox: { feature: { saveAsImage: {} } }, backgroundColor: "#0f375f", title: { text: '餅圖,分組顯示', left: 'center', top: '10px', textStyle: { color: '#ffffff' } }, tooltip: { formatter: function (param) { if (param.data.type === null) { return param.data.name + ':' + param.value + '個'; } else { return param.data.type + ':' + param.value + '個'; } }, }, legend: { data: ['話務', '傳輸'], top: '10%', show: true, textStyle: { color: '#f2f2f2', fontSize: 14, }, }, series: [{ name: '招標方式', type: 'pie', radius: ['40%', '55%'], itemStyle: { normal: { color: function (params) { return colorList[params.dataIndex]; }, }, }, label: { normal: { formatter: function (params) { if (params.value != 0) return params.data.type + ':' + params.value + '個'; else return ''; }, show: true, }, }, data: [{ value: 135, name: '傳輸', type: equipment[0], }, { value: 200, name: '傳輸', type: equipment[1], }, { value: 100, name: '傳輸', type: equipment[2], }, { value: 50, name: '傳輸', type: equipment[3], }, { value: 300, name: '傳輸', type: equipment[4], }, { value: 90, name: '傳輸', type: equipment[5], }, { value: 310, name: '話務', type: project[0], }, { value: 234, name: '話務', type: project[1], }, { value: 35, name: '話務', type: project[2], }, { value: 100, name: '話務', type: project[3], }, { value: 40, name: '話務', type: project[4], }, { value: 400, name: '話務', type: project[5], }, { value: 100, name: '話務', type: project[6], }, { value: 20, name: '話務', type: project[7], }, ], },], }; ~~~ >#### 效果圖  <hr>