echarts柱状图两组数据 | 您所在的位置:网站首页 › 柱形图两组数据 › echarts柱状图两组数据 |
//同比环比 var myChart= echarts.init(document.getElementById('bar_chart')); var xAxisData = ['全部','轿车','SUV','MPV']; var data1 = [1.03,0.44,0.88,0.67]; //同比 var data2 = [-0.4,-0.56,-0.67,-0.53];//环比 option = { legend: { itemWidth:15, itemHeight:4, fontSize:12, data: ['同比', '环比'], right: 55, top:10, orient: 'vertical', }, tooltip: {}, // 设置图标距离上下左右的距离 grid: { top: 75, left:10, right:50, }, xAxis: { type: 'category', //x轴文字配置 axisLabel: { show: true, inside:false, // align:'left', margin:20, textStyle: { color: '#1a1a1a', fontSize: '14' } }, axisTick: { show: false }, //去掉x轴刻度线 data:[], axisLine: { show: true, length:2, lineStyle:{ color:"#B5B2B5" }, } }, yAxis: { //y轴不显示 show:false, inverse: false,//是否反向坐标 axisLine: { show: false, }, // y轴刻度不显示 axisLabel : { formatter: function(){ return ""; } }, splitLine:{ show:false }, splitArea: {show: false} }, series: [ { name: '同比', type: 'bar', barGap: '-100%', barWidth: '15%', stack: 'one', data: [], itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 formatter: '{c}%',//每一项加% textStyle: { //数值样式 color: '#1a1a1a', fontSize: 12 } }, barBorderRadius: 100, color: new echarts.graphic.LinearGradient( 0, 1, 0, 0, [{ offset: 0, color: '#f89741' }, { offset: 1, color: '#fa6206' } ] ) } }, }, { name: '环比', type: 'bar', barWidth: '15%', stack: 'one', data: [], itemStyle: { normal: { label: { show: true, //开启显示 position: 'bottom', //在上方显 formatter: '{c}%',//每一项加% textStyle: { //数值样式 color: '#1a1a1a', fontSize: 12 } }, barBorderRadius: 100, color: new echarts.graphic.LinearGradient( 0, 1, 0, 0, [{ offset: 0, color: '#0c7be3' }, { offset: 1, color: '#42d3f7' } ] ) } }, }, ] }; myChart.setOption(option); |
CopyRight 2018-2019 实验室设备网 版权所有 |