vue eacharts多列柱状图示例
var option6 = { backgroundColor:'', color:["red","orange"], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '2%', right: '4%', bottom: '16%', top:'16%', containLabel: true }, legend: { data: ['较大风险', '重大风险'], right: 10, top:12, textStyle: { color: "#fff" }, itemWidth: 12, itemHeight: 10, }, xAxis: { type: 'category', data: [1,2,3,4,5], axisLine: { lineStyle: { color: 'white' } }, axisLabel: { textStyle: { fontFamily: 'Microsoft YaHei' } }, }, yAxis: { type: 'value', // max:auto, axisLine: { show: false, lineStyle: { color: 'white' } }, splitLine: { show: false, lineStyle: { color: 'rgba(255,255,255,0.3)' } }, axisLabel: {} }, dataZoom: [ { show: true, realtime: true, start: 50, end: 100, textStyle: { color: '#fff' } }, { type: 'inside', realtime: true, start: 50, end: 100, textStyle: { color: '#fff' } } ], series: [{ name: '较大风险', type: 'bar', barWidth: '10%', itemStyle: { barBorderRadius: 3, }, data:[6,4,3,2,6] }, { name: '重大风险', type: 'bar', barWidth: '10%', itemStyle: { barBorderRadius: 3, }, data: [1,3,4,5,7] }], }; var myChart6 = echarts.init(document.getElementById('ec6')); myChart6.setOption(option6);