echart常用基础柱状图

附图:
constructionBarOption = {
    title: {
        text: '价格(万元)',
        x: 15,
        y: 30,
        textStyle: {
            fontSize: '12',
            fontWeight: 'normal',
            color: '#999'
        }
    },
    tooltip: {
        trigger: 'item',
        padding: 10,
        axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
        },
        formatter: '{b}
{a}:{c}'
}, dataZoom: { /*滚动条*/ show: true, y: 300, realtime: true, start: 30, end: 60, height: 10, handleColor: '#1a8edc', handleSize: 5, fillerColor: '#a5cdea' }, grid: { x: 45, x2: 40, y: 60, y2: 40, borderWidth: '1', //边框线 borderColor:'#E0EBFF' }, xAxis: [{ type: 'category', // name: '价格', nameTextStyle: { //x轴标题 color: '#999' }, splitLine: false, axisLabel: { //x轴文字 textStyle: { color: '#999' } }, axisTick: { //刻度 show: false }, axisLine: { //x轴线 textStyle: { color: '#666' }, lineStyle: { width: 2, color: '#76AFF4' } }, data: ['工程造价费用', '分部分项目费用', '措施项目费用', '其他项目费用', '规费'] }], yAxis: [{ type: 'value', // name: '频率', nameTextStyle: { color: '#999' }, splitLine: { lineStyle: { color: ['#E0EBFF'], width: 1 } }, axisLine: { lineStyle: { width: 2, color: '#76AFF4' } }, axisLabel: { textStyle: { color: '#999' } }, axisTick: { show: false } }], series: [{ name: '价格', type: 'bar', itemStyle: { normal: { // barBorderRadius: [2, 2, 2, 2], barBorderColor: 'rgba(0,0,0,0)', areaStyle: { type: 'default' }, color: '#76AFF4' } // emphasis: { //鼠标悬停时 // barBorderRadius: [2, 2, 2, 2] //圆角 // } }, barWidth: 30, data: [3800,3000,1500,300,400] }] };

你可能感兴趣的:(前端-echart)