>#### 餅圖結合柱狀圖 ~~~ const source = [ ['出入口', '入場', '離場', '黑名單車輛'], ['東出入口', 338, 110, 40], ['北出入口', 416, 145, 33], ]; const colorArr = ['#49CCFFee', '#20D3ABee', '#FDD56Aee']; const colorAlpha = ['#49CCFF88', '#20D3AB88', '#FDD56A88']; const title = '餅圖'; const piedata = [{ name: '入場', value: 1834, itemStyle: { normal: { borderWidth: 5, shadowBlur: 20, borderColor: colorAlpha[0], shadowColor: colorArr[0], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorArr[0], }, { offset: 1, color: colorAlpha[0], }, ]) } } }, { name: '離場', value: 325, itemStyle: { normal: { borderWidth: 5, shadowBlur: 20, borderColor: colorAlpha[1], shadowColor: colorArr[1], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorArr[1], }, { offset: 1, color: colorAlpha[1], }, ]) } } }, { name: '黑名單車輛', value: 123, itemStyle: { normal: { borderWidth: 5, shadowBlur: 20, borderColor: colorAlpha[2], shadowColor: colorArr[2], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorArr[2], }, { offset: 1, color: colorAlpha[2], }, ]) } } } ]; myChart.resize({ height: 450, width: 800 }) // 圖表配置 option = { dataset: { source: source }, grid: { left: 350, right: 30, top: 115, bottom: 70 }, title: [{ text: title, subtext: '餅圖結合柱狀圖', left: 'center', top: '10', subtextStyle: { fontSize: 14, fontWeight: 'normal', color: '#fff', padding: [10, 0] }, textStyle: { fontSize: 16, fontWeight: 'bolder', color: '#fff', padding: [10, 0] } }], toolbox: { feature: { saveAsImage: {} } }, backgroundColor: "#0f375f", tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, padding: 16, }, legend: { show: true, left: 293, top: 75, itemWidth: 12, itemHeight: 12, textStyle: { color: '#fff', fontWeight: 'bolder', }, }, color: ['#73DDFF', '#73ACFF', '#FDD56A'], yAxis: { type: 'category', axisLine: { show: false, }, axisTick: { show: false }, axisLabel: { color: '#fff', fontWeight: 'bolder', }, }, xAxis: { type: 'value', axisLine: { show: false, }, axisTick: { show: false }, splitNumber: 3, axisLabel: { color: '#fff', fontWeight: 'bolder', }, splitLine: { lineStyle: { type: 'dashed' } } }, series: [{ type: 'bar', name: source[0][1], barWidth: 30, stack: true, encode: { y: 0, x: 1 }, itemStyle: { normal: { borderWidth: 2, shadowBlur: 20, borderColor: colorAlpha[0], shadowColor: colorArr[0], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorArr[0], }, { offset: 1, color: colorAlpha[0], }, ]) } }, label: { normal: { show: true, color: '#fff', fontWeight: 'bolder', }, }, }, { type: 'bar', name: source[0][2], barWidth: 30, stack: true, encode: { y: 0, x: 2 }, itemStyle: { normal: { borderWidth: 2, shadowBlur: 20, borderColor: colorAlpha[1], shadowColor: colorArr[1], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorArr[1], }, { offset: 1, color: colorAlpha[1], }, ]) } }, label: { normal: { show: true, color: '#fff', fontWeight: 'bolder', }, }, }, { type: 'bar', name: source[0][3], barWidth: 30, stack: true, encode: { y: 0, x: 3 }, itemStyle: { normal: { borderWidth: 2, shadowBlur: 20, borderColor: colorAlpha[2], shadowColor: colorArr[2], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorArr[2], }, { offset: 1, color: colorAlpha[2], }, ]) } }, label: { normal: { show: true, color: '#fff', fontWeight: 'bolder', }, }, }, { type: 'pie', z: 100, radius: ['30%', '50%'], center: [160, '55%'], data: piedata, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c}" }, label: { show: true, fontSize: 12, formatter: "{b}\n{c}輛", fontWeight: 'bolder', color: '#fff' }, } ] }; ~~~ >#### 效果圖  <hr>