echarts如何在每個柱狀圖上都顯示氣泡詳解(好看的柱狀圖)

lily000000發表於2017-12-15

markPoint: 圖表標註 ,如下圖,詳見官方http://echarts.baidu.com/option.html#series-bar.markPoint

這裡寫圖片描述

<script>
	var myChart = echarts.init(document.getElementById('salesVolume'));
	option = {
    title : {
        text: '近七天銷售量(單位:萬元)', 
        textStyle:{
			    	color:'#75fcd7',
			    	fontSize: 20,
			    	fontWeight: 'normal',
			    	align: 'left',
			    	fontFamily:"微軟雅黑"
		}
    },
    grid:{
	//	top:40,
	    x:50,
//	    y:20,
        bottom:20,
	    borderWidth:80
	},//柱狀圖的大小
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 座標軸指示器,座標軸觸發有效
		     type : 'shadow'        // 預設為直線,可選為:'line' | 'shadow'
		}
    },
    legend: {
        data:['近七天銷售量(單位:萬元)']
    },

    xAxis : [  
        {
        	axisTick:{
                show:false  //刻度消失
           },
        	splitLine:{show: false},
            type : 'category',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisLine: {
            	show: true,
            	lineStyle: {
            		color:'#7192ca',
            		width:2
            	}
            },
             
            data : ['11-15','11-16','11-17','11-18','11-19','11-20','11-21']
        },
        
    ],
    yAxis : [
        {   
        	axisTick:{
                show:false  //刻度消失
           },
        	splitLine:{show: false},//去除網格線    	
            type : 'value',
            nameTextStyle:{
            	color:'#fff'
            },
            axisLabel : {
                formatter: '{value}',
                textStyle: {
                    color: '#fff',
//                  fontSize:16
                }
            },
           axisLine: {
            	show: true,
            	lineStyle: {
            		color:'#7192ca',
            		width:2
            	}
            },
            
        }
    ],
    series : [
        {
            name:'銷售量',
            type:'bar',
             barWidth : 30,
            itemStyle: {
		        	 emphasis: {
                       barBorderRadius: [10, 10, 10, 10]
                   },//圓角
            normal: {
                color: function(params) {
                     // build a color map as your need.
                    var colorList = ['#ec635a','#ed719e','#c36ff6','#736af6','#7993f7','#86d4fb','#91fce7'];
                    return colorList[params.dataIndex]  //柱狀圖的顏色
                }
            }
        },
        data:[5, 10, 15, 20, 25, 30, 50],
        markPoint : {
         	symbol:'pin',//標記型別
            symbolSize: 40,//圖形大小
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1,            // 標註邊線線寬,單位px,預設為1
                    label: {
                       	show: true
                    }
                   }
                  },
                data : [//配置項
                    {value:'5',xAxis: 0, yAxis: 5},
                    {value:'10',xAxis:1, yAxis: 10},
                    {value:'15',xAxis:2, yAxis: 15},
                    {value:'20',xAxis:3, yAxis: 20},
                    {value:'25',xAxis:4, yAxis: 25},
                    {value:'30',xAxis:5, yAxis: 30},
                    {value:'50',xAxis:6, yAxis: 50},                   
                ]
            },
           
        },
       
    ]
};
 myChart.setOption(option);
 window.onresize = function(){
    myChart.resize();
}//元件隨著頁面的縮放而縮放
</script>
複製程式碼

效果圖

這裡寫圖片描述

相關文章