总销量echarts 柱状配置项内容和展示

2000

      option = {
    title: {
        text: '总销量',
        textStyle: {
          color: '#666',
          fontSize: '15'
        },
        subtext: '2000',
        subtextStyle: {
          color: '#333',
          fontSize: '25'
        },
        x: 'center'
    },
    tooltip: {
        triggerOn: 'none',
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为："line" | "shadow"
        }
    },
    legend: {
        data:['最新成交价', '预购队列']
    },
    grid: { containLabel: true },
    dataZoom: {
        show: false,
        start: 0,
        end: 100
    },
    xAxis: [
        {
            type: 'value',
            scale: true,
            show: false,  
            max: 100,
            min: 0,
            boundaryGap: [0.2, 0.2]
        },
        {
            type: 'time',
            scale: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            nameTextStyle: {
              color: '#fff'  
            },
            max: '2018-03-05',
            min: '2018-03-01',
            boundaryGap: [0.2, 0.2],
            axisPointer: {
                value: '2016-10-7',
                snap: true,
                lineStyle: {
                    color: '#004E52',
                    opacity: 0.5,
                    width: 2,
                    type: 'dashed'
                },
                label: {
                    show: true,
                    formatter: function (params) {
                        return echarts.format.formatTime('dd', params.value);
                    },
                    margin: 0,
                    color: '#333',
                    backgroundColor: 'rgba(0,0,0,0)',
                    fontSize: 18,
                    padding: [-20,5,0,5]
                },
                handle: {
                    show: true,
                    color: '#004E52',
                    margin: 0,
                    size: 40,
                    icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADCklEQVR4Xu1bQXbaMBCdMYssyxHSE9QlB2hygjYbIKuKE5ScoOkJQk9gZRXIJuQEJQfAcU+Q9AZ02/dg8kRinsGSLcvm4ZTx1hr9ma+RNDOSEPb8wz23H5gA9oASDPji+hixQXEXRPA3ku2oRJe5or648RHhXbLhQ9C+zxU0NHCeAi0xHCDit81+ieBHKDsXrgplybXE6AIRvqcx6Wcou30XTHcCeqMJAnxKKQNwHwadYxdl8mRaW8BkAvJYN/3fxmjk6bINzEwP8MX1oQfeVwRaufRUdk+UojbKHInhrzyjbP6XwBzP4eAqkqczE46RgJa4EQB0iQjNpPA06CxlrAjojVY7hI2hpjZlMIlgBoDnoWxLXf9aApTxiBToBMoo40pCFZhE2NORkCJAuX0DvcdtjMYuCVDYc1q8j+TZU1KPFAGm/T0WqmI0ihJRFSZROl7QEfCIiIf/owcAQTSVnY+ZHnCUs3DFbmSOyl4iQRWyNpAeio62rr09Zvb0VX3H3hTjpDwgjwAiOg9ld6A6UOsFACS95SmeYy0x7CPiZRUEVIlZAQEwW8DiNJJnE5NxKknywLvd3EJdyVBbWVWYpQlYGUE0IUCV+SWDjCYC+YC4lVwAKsCsjgDX4dyxHBPwGsk6L4I7HsDS8OwB7AEvyRxPgVcGCgdCpSfhjjvgNaDoGkBAvwHQWFHZ8YDmwFMTAT8kGxX2gDktTrLC3joToELyBnprZTkmoOgUYA/gKcBrAC+CvAtkVH94G6wxAxwHcCDEkSCHwpwLcDLE2SCnw1wQSTDABREuiBQ8F+CKEFeEuCLEFaF9qwipU6DVgwTTDcsa10FWqm3eeCWgP2HQXbsCqDkcHY4B8HPci80FpTqSob+oRXfToPsl83hcV0aqo4EuOum2dO1l6aPeuhe4gNVQ5moadMSmXloCfHHb9PDfWPckpoaGWahEd3M6ELp3A5kPJpZvBnDR3zxitkCsRZPl0T55A9NbAaWk9ZshtTbUwipLJWy3bmsCLHHfXDMm4M0NWcUK770HPAP09+pf1xg/wAAAAABJRU5ErkJggg=='
                }
            },
            splitLine: {
                show: false
            }
        }
    ],
    yAxis: [{
                min: 0,
                max: 5,
                boundaryGap: ['20%', '20%'],
                axisLine: {
                  show: false
                },
                offset: 30,
                axisTick: {
                  show: false
                },
                data: ['新明锐', '科迪亚克', '易锐', '野帝', '速派']
            },{
                min: 0,
                max: 5,
                boundaryGap: ['20%', '20%'],
                axisLine: {
                  show: false
                },
                offset: 30,
                axisTick: {
                  show: false,
                //   length: 1
                },
                data: ['2000', '1000', '3000', '4000', '3000']
            }],
    series: [{
 	    type: 'bar',
		data: [100, 100, 100, 100, 100],
		itemStyle: {
		    normal: {
		        color: '#ccc'
		    }
        },
        barWidth: '20',
        barGap: '-100%'
	},{
 	    type: 'bar',
		data: [20,30,10,20,10],
		itemStyle: {
		    normal: {
		        color: '#0c0'
		    }
        },
        barWidth: '20'
	}]
};