const xData = ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'] const yData = [1899, 1922, 1949, 1969, 1989, 1999, 1999, 2001, 2010, 2020, 2023, 2025] const yRate = [0.52, 0.31, 1.22, 1.04, 0.539, 0.87, 0.45, 0.53, 0.74, 0.71, 0.33, 0.33] const legendData = { 企业数量: true, 增长速率: 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: { data: xData, axisLine: { show: false // 隐藏X轴轴线 }, axisTick: { show: false // 隐藏X轴轴线 }, axisLabel: { show: true, margin: 14, fontSize: 12, textStyle: { color: '#758396' // X轴文字颜色 } } }, yAxis: [ { 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 }, { type: 'value', 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' }, formatter: '{value} %' }, interval: Math.ceil(Math.ceil(Math.max(...yRate) - (Math.min(...yRate) > 0 ? '0' : Math.min(...yRate))) / 5), max: Math.ceil(Math.ceil(Math.max(...yRate)) / 5) * 5 } ], series: [ { name: nameData[0], type: 'bar', barWidth: 26, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(24,144,255,1)' }, { offset: 1, color: 'rgba(24,144,255,0)' } ]) } }, data: yData, z: 10, zlevel: 0 }, { // 分隔 name: nameData[0], type: 'pictorialBar', itemStyle: { normal: { color: '#fff' } }, symbolRepeat: 'fixed', symbolMargin: 6, symbol: 'rect', symbolClip: true, symbolSize: [26, 4], symbolPosition: 'start', symbolOffset: [0.2, 5], data: yData, width: 2, z: 0, zlevel: 1 }, // { // name: '', // type: 'bar', // barGap: '-110%', // 设置外框粗细 // data: [100, 100, 100, 100, 100, 100, 100], // barWidth: 16, // itemStyle: { // normal: { // color: 'transparent', // 填充色 // // barBorderRadius: 0, //圆角半径 // label: { // // 标签显示位置 // show: false, // position: 'top' // insideTop 或者横向的 insideLeft // } // } // }, // z: 0 // }, { name: nameData[1], type: 'line', yAxisIndex: 1, smooth: false, // 平滑曲线显示 showAllSymbol: false, // 显示所有图形。 symbolSize: 5, symbolColor: '#eee', symbol: 'circle', lineStyle: { width: 3, color: '#DA3535' }, itemStyle: { color: '#DA3535', shadowColor: '#DA3535', shadowBlur: 10, borderColor: '#DA3535', borderWidth: 2 }, data: yRate, z: 15, zlevel: 2 } ] }

Echarts在线免费图表