echarts柱狀圖Demo
阿新 • • 發佈:2018-11-09
程式碼:
var xData = ['a', 'b', 'c', 'd', 'e']; var yData = [80, 87, 51, 81, 23]; option = { backgroundColor: 'black', color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { type: 'line', lineStyle: { opacity: 0 } }, formatter:function(prams) { return "數量:" + prams[0].data } }, grid: { left: '0%', right: '0%', bottom: '0%', top: '7%', containLabel: true, z: 22 }, xAxis: [{ type: 'category', gridIndex: 0, data: xData, axisTick: { alignWithLabel:true }, axisLine: { lineStyle: { color: 'white', } }, axisLabel: { show: true, color: 'white', textStyle: { fontSize: 18 } } }], yAxis: [{ type:'value', gridIndex: 0, splitLine: { show: false }, axisTick: { show: false }, axisLine: { lineStyle: { color: 'white', } }, axisLabel: { color: 'white', formatter: '{value}', textStyle: { fontSize: 18 } } }], series: [{ name: '數量', type: 'bar', barWidth: '30%', xAxisIndex: 0, yAxisIndex: 0, label: { normal: { show: true, position: "top", textStyle: { color: "#ffc72b", fontSize: 20 } } }, itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: '#00feff' }, { offset: 0.5, color: '#027eff' }, { offset: 1, color: '#0286ff' } ] ) } }, data: yData, zlevel: 11 }, ] };