option = { xAxis: { type: 'category', data: ['玉米', '大豆', '油麦菜', '土豆', '韭菜'], axisTick: { show: false }, axisLabel: { show: true, interval: 0, textStyle: { color: 'rgba(0,0,0,0.75)', // X轴文字颜色 padding: [0, 0, 0, 0], fontSize: 12 } } }, legend: { textStyle: { color: 'rgba(0,0,0,0.75)' }, data: [ { name: '销售金额', itemStyle: { color: '#1F94D4', borderWidth: 10 } }, { name: '销量', itemStyle: { color: '#E6BB56', } } ] }, tooltip: { show: true, trigger: 'item', formatter: function (params) { console.log(params, params.data) return ( '

销售金额: ' + params.data.total + '元
' + '销量: ' + params.data.saleNumber + 'Kg
' + '

' ) } }, yAxis: [ { type: 'value', // name: '(元)', nameTextStyle: { color: 'rgba(255,255,255,0.40)', padding: [0, 0, 0, -25] // 四个数字分别为上右下左与原位置距离 }, splitLine: { // show: false // 不显示网格线 lineStyle: { type: 'dashed', color: '#344a53' } }, axisLabel: { formatter: '{value}元', color: '#000' } }, { type: 'value', min: 0, axisLabel: { show: true, interval: 'auto', formatter: '{value}Kg ' }, splitLine: { show: false // 不显示网格线 }, axisTick: { show: false // 不显示坐标轴刻度线 } } ], series: [ { name: '销售金额', barGap: '20px', barWidth: '20px', data: [ { value: 1000, total: 1000, saleNumber: 1200 }, { value: 800, total: 800, saleNumber: 1500 }, { value: 700, total: 1000, saleNumber: 2000 }, { value: 1200, total: 1200, saleNumber: 1700 }, { value: 1400, total: 1400, saleNumber: 2200 } ], type: 'bar', yAxisIndex: 0, itemStyle: { // 柱子颜色渐变 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#1F94D4' // 0% 处的颜色 }, { offset: 1, color: 'rgba(31,148,212,.5)' // 100% 处的颜色 } ], false ) } }, { name: '销量', barGap: '0px', barWidth: '20px', data: [ { value: 1200, total: 1000, saleNumber: 1200 }, { value: 1500, total: 800, saleNumber: 1500 }, { value: 1800, total: 1000, saleNumber: 1800 }, { value: 1700, total: 1200, saleNumber: 1700 }, { value: 2200, total: 1400, saleNumber: 2200 } ], type: 'bar', yAxisIndex: 1, showBackground: true, backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' }, itemStyle: { // 柱子颜色渐变 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#E6BB56' // 0% 处的颜色 }, { offset: 1, color: 'rgba(230,187,86,.5)' // 100% 处的颜色 } ], false ) } } ] }

Echarts在线免费图表