- echarts知識點:
axisTick: { show:false, //隱藏x軸刻度 }, axisLine: { show: false, //隱藏x軸 }, //展示echarts圖表中的數據,然後以柱形圖或是其他形式的圖形顯示 series: [ { type: 'bar', data: [81, 78.9, 64.6, 63.6, 62, 61.4, 58.6, 57.3, 55.8, 38.4], barWidth: '34px', label: { normal: { show: true, position: 'top', formatter: (value) => value.value + '%', }, }, itemStyle: { normal: { color: '#3E7AFF', //改變圖形顏色 barBorderRadius: [5, 5, 0, 0], //改變圖形的形狀,變成圓弧形 }, }, }, ],
- 示例:
var index = 0; var colorList = ['#f36c6c', '#e6cf4e', '#20d180', '#0093ff']; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { show: false }, grid: { left: 100 }, toolbox: { show: true, feature: { saveAsImage: {} } }, xAxis: { type: 'value', //隱藏圖表中的分割線 splitLine: { show: false }, //隱藏x軸下方的數據展示 axisLabel: { show: false }, //隱藏x軸中的刻度 axisTick: { show: false }, //隱藏x軸 axisLine: { show: false } }, yAxis: { type: 'category', inverse: true, axisLine: { show: false }, axisTick: { show: false }, axisPointer: { label: { show: true, margin: 30 } }, data: ['杭州', '寧波', '溫州', '湖州', '嘉興'], axisLabel: { margin: 100, fontSize: 14, align: 'left', color: '#333', //y軸旁邊的序號樣式 rich: { a1: { color: '#fff', backgroundColor: colorList[0], width: 30, height: 30, align: 'center', borderRadius: 2 }, a2: { color: '#fff', backgroundColor: colorList[1], width: 30, height: 30, align: 'center', borderRadius: 2 }, a3: { color: '#fff', backgroundColor: colorList[2], width: 30, height: 30, align: 'center', borderRadius: 2 }, b: { color: '#fff', backgroundColor: colorList[3], width: 30, height: 30, align: 'center', borderRadius: 2 } }, formatter: function(params) { if (index == 5) { index = 0; } index++; if (index - 1 < 3) { return [ '{a' + index + '|' + index + '}' + ' ' + params ].join('\n') } else { return [ '{b|' + index + '}' + ' ' + params ].join('\n') } } } }, series: [{ z: 2, name: 'value', type: 'bar', data: [3.66, 2.86, 1.82, 1.8, 1.53].map((item, i) => { itemStyle = { color: i > 3 ? colorList[3] : colorList[i] } return { value: item, itemStyle: itemStyle }; }), label: { show: true, position: 'right', color: '#333333', fontSize: 14, offset: [10, 0] } } ] };
示例圖形如下: