柱状图---03

option = {
grid: {
left: ‘6%’,
right: ‘20px’,
bottom: ‘30px’,
top:’8%’,
containLabel: true,
},
tooltip: {
trigger: ‘axis’,
backgroundColor: ‘rgba(30,73,116,0.8)’,
borderColor:”#06B1C5”,
borderWidth: 1,
axisPointer: {
type: ‘shadow’,
label: {
backgroundColor: ‘#52FFFF’
}
},
textStyle: {
color: ‘#a9d2ff’,
fontStyle: ‘normal’,
fontFamily: ‘微软雅黑’,
fontSize: 12,
},
formatter: function (params) {
params[0].marker = <span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:rgb(6,177,197);\"></span>
params[1].marker = <span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:rgb(205,173,39);\"></span>
return <div>${params[0].name}</div>+params[0].marker+<span style=\"margin-right: 1.5vw"\>${params[0].seriesName}</span><span style=\"color:#52FFFF"\>${params[0].value}</span>+<br/>+params[1].marker+<span style=\"margin-right: 1.5vw"\>${params[1].seriesName}</span><span style=\"color:#52FFFF"\>${params[1].value}</span>
},
},
legend: {
data: [‘管控’, ‘预警’],
right:’20’,
itemWidth: 15,
itemHeight :5,
textStyle: {
color: “#577A94”,
}
},
xAxis: [
{
type: ‘value’,
splitNumber: 5,
axisLabel: {
textStyle: {
color: ‘#577A94’,
fontStyle: ‘normal’,
fontFamily: ‘微软雅黑’,
fontSize: 12,
}
},
axisLine:{
show: true,
lineStyle:{
color: ‘#2D313C’,
}
},
axisTick:{
show: false
},
splitLine: {
show: false,
lineStyle: {
color: ‘#2D313C’,
}
}

    }<br />    ],<br />    yAxis: {<br />        type: 'category',<br />        data: ['日本', '德国','老挝','法国','英国','越南','新加坡','缅甸','印度','美国'],<br />        axisLabel: { _//坐标轴刻度标签的相关设置。<br />            _textStyle: {<br />                color: '#577A94',<br />                fontStyle: 'normal',<br />                fontFamily: '微软雅黑',<br />                fontSize: 12,<br />            },<br />            _// rotate:-50,<br />            _interval:0, _// 横坐标全显示<br />        _},<br />        axisTick:{_//坐标轴刻度相关设置。<br />            _show: false,<br />        },<br />        axisLine:{_//坐标轴轴线相关设置<br />            _lineStyle:{<br />                color: '#2D313C',<br />            }<br />        },<br />        splitLine: { _//坐标轴在 grid 区域中的分隔线。<br />            _show: false,<br />        }<br />    },<br />    series: [<br />        {<br />            name: '管控',<br />            type: 'bar',<br />            data: [432, 443, 500, 615, 641, 681,730,780,820,910],<br />            barWidth: 5,<br />            showBackground: true,<br />            backgroundStyle:{<br />                color:"#19203C",<br />            },<br />            _// barGap:0.5,//柱间距离<br />            _itemStyle: {<br />                normal: {<br />                    show: true,<br />                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{<br />                        offset: 0,<br />                        color: '#3777F5'<br />                    }, {<br />                        offset: 1,<br />                        color: '#06B1C5'<br />                    }]),<br />                    borderWidth: 0,<br />                }<br />            },<br />        },<br />        {<br />            name: '预警',<br />            type: 'bar',<br />            data: [182, 234, 290, 549, 317, 440,470,480,550,580],<br />            barWidth: 5,<br />            showBackground: true,<br />            backgroundStyle:{<br />                color:"#19203C",<br />            },<br />            _// barGap:0.5,//柱间距离<br />            _itemStyle: {<br />                normal: {<br />                    show: true,<br />                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{<br />                        offset: 0,<br />                        color: '#3876F6'<br />                    }, {<br />                        offset: 1,<br />                        color: '#CDAD27'<br />                    }]),<br />                    borderWidth: 0,<br />                }<br />            },
    }<br />    ]<br />};