let data = [ {nowValue: 335,targetValue:111, name: '直接访问1'}, {nowValue: 310,targetValue:121, name: '邮件营销2'}, {nowValue: 234,targetValue:131, name: '联盟广告3'}, {nowValue: 135,targetValue:141, name: '视频广告4'}, {nowValue: 1548,targetValue:161, name: '搜索引擎5'} ]; option = { tooltip: { trigger: 'axis', formatter:function(param){ // console.log(param) let dom = `

` dom+=`

${param[0].name}

` param.forEach(item=>{ dom+= `

${item.seriesName}

${item.value}

` }) dom += `

` return dom; }, axisPointer: { type: 'shadow'// 鼠标hover时的背景 }, }, dataZoom: [ { start: 0, end: 100 } ], grid: { bottom: 120 }, xAxis: [ { type: 'category', show: true, axisTick: { alignWithLabel: true, backgroundColor:'#333' }, data: ['A','B及B以上','C及C以上','D'] } ], yAxis: [ { type: 'value', // max: 100, min: 0, position: 'left', alignTicks: true, axisLine: { show: true, lineStyle: { color: '#333' } }, axisLabel: { formatter: '{value}' } }, // 百分比Y轴配置 { type: 'value', // max: 100, // min: 0, position: 'right', alignTicks: true, axisLine: { show: true, lineStyle: { color: '#333' } }, axisLabel: { formatter: '{value} %' } } ], legend: { // selectedMode:false,// 取消lenged点击事件 bottom:60, backgroundColor:'#fff', left: 'center', // data: ['当前值（数量）','目标值（数量）','当前值（占比）','目标值（占比）'] // 名称需要和series的name对应才会出现 lenged }, series: [ { name: '当前值（数量）', type: 'bar',//数据展示方式：line或bar barWidth: 20, yAxisIndex: 0, itemStyle: { color:'#0096fc' //柱形图颜色 }, data: data.map(m => {// 适用范围 return { value: m.nowValue, valueType:'number', name: m.name, dataInfo: m } }), lineStyle:{ width:1, }, emphasis: { lineStyle: { width: 2, // hover时的折线宽度 } } }, { name: '目标值（数量）', type: 'bar',//数据展示方式：line或bar barWidth: 20, yAxisIndex: 0, itemStyle: { color:'#ff8d1a' //柱形图颜色 }, data: data.map(m => {// 适用范围 return { value: m.targetValue, valueType:'number', name: m.name, dataInfo: m } }) }, { name: '当前值（占比）', type: 'line',//数据展示方式：line或bar barWidth: 20, yAxisIndex: 1, itemStyle: { color:'#0f67ff' //柱形图颜色 }, data: data.map(m => {// 适用范围 return { value: m.nowValue, valueType:'percent', name: m.name, dataInfo: m } }) }, { name: '目标值（占比）', type: 'line',//数据展示方式：line或bar barWidth: 20, yAxisIndex: 1, itemStyle: { color:'#ff5252' //柱形图颜色 }, data: data.map(m => {// 适用范围 return { value: m.targetValue, valueType:'percent', // 用来判断数量、占比 name: m.name, dataInfo: m } }) }, { name: '等级认定标准', symbol: 'circle', symbolSize: 10, type: 'line',//数据展示方式：line或bar lineStyle:{ type: 'dashed' }, itemStyle: { color:'#fcbb30', //柱形图颜色 }, yAxisIndex: 0, data: data.map(m=>{ return 100 }) } ], }

Echarts在线免费图表