1. 程式人生 > >echarts柱狀圖Demo

echarts柱狀圖Demo

程式碼:

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 }, ] };