const xData = ['02月', '01月'] const yData = [1899, 1922] const dataColor = { '01月':new echarts.graphic.LinearGradient(1, 0, 0, 0, [ { offset: 0, color: '#00ffcc' }, { offset: 1, color: '#006fa3' } ]), '02月':new echarts.graphic.LinearGradient(1, 0, 0, 0, [ { offset: 0, color: '#ff8f3e' }, { offset: 1, color: '#880000' } ]) } const legendData = { 企业数量: true, } const nameData = Object.keys(legendData) option = { // backgroundColor: '#fff', // animation: true, tooltip: { backgroundColor: '#fff', borderColor: 'rgba(75, 253, 238, 0.4)', textStyle: { color: '#333' }, borderWidth: 0, formatter: (p) => { const seriesName = p.seriesName let txtCon = '' seriesName === nameData[1] && (txtCon = `

${p.name}

${p.marker} ${p.seriesName}：${p.value} %

`) seriesName === nameData[0] && (txtCon = `

${p.name}

${p.marker} ${p.seriesName}：${p.value} (家)

`) return txtCon } }, grid: { top: '15%', bottom: '15%', right: '7%' }, legend: { show: true, // selectedMode:false selected: legendData, top: '5%' }, xAxis: { type: 'value', name: '单位:(家)', nameTextStyle: { color: '#758396', fontSize: 12, padding: 10 }, splitLine: { show: true, lineStyle: { color: 'rgba(52,78,130,0.2)', width: 1, type: 'dashed' } }, axisTick: { show: false }, axisLine: { show: true, lineStyle: { color: 'rgba(52,78,130,0.2)' } }, axisLabel: { show: true, margin: 14, fontSize: 12, textStyle: { color: '#758396' } }, interval: Math.ceil(Math.ceil(Math.max(...yData)) / 5), max: Math.ceil(Math.ceil(Math.max(...yData)) / 5) * 5 }, yAxis: { data: xData, axisLine: { show: false // 隐藏X轴轴线 }, axisTick: { show: false // 隐藏X轴轴线 }, axisLabel: { show: true, margin: 14, fontSize: 12, textStyle: { color: '#758396' // X轴文字颜色 } } }, series: [ { name: nameData[0], type: 'bar', barWidth: 20, itemStyle: { normal: { color: function(p){ return dataColor[p.name] } } }, showBackground: true, backgroundStyle: { color: 'transparent', borderColor: '#093531', borderWidth: 3 }, data: yData, z: 10, zlevel: 0 }, { // 分隔 name: nameData[0], type: 'pictorialBar', itemStyle: { normal: { color: '#fff' } }, symbolRepeat: 'fixed', symbolMargin: 26, symbol: 'rect', symbolClip: true, symbolSize: [3, 20], symbolPosition: 'start', symbolOffset: [0.2, 0], data: yData, width: 2, z: 0, zlevel: 1 }, ] }

Echarts在线免费图表