提前安装引入echarts
效果图
dom实例
<div id="rightCharterwang" style="height: 28vh"></div>配置项，将数据换成从接口请求回来的数据（这里是写死的假数据）
const rightCharterwang = () => {let namedata = ['a','b','c','d','e','ffffff','g','hhhhhhhhhhhhhhhhhhhh','i','g','k','l','m','n']const chartBox = echarts.init(document.getElementById('rightCharterwang'))const option = {title: {text: ''},//显示悬浮窗体// tooltip: {// trigger: 'axis'// },// 纵向// legend: {// type: 'scroll',// orient: 'vertical',// right: 10,// top: 20,// bottom: 20,// data: namedata// },// 横向legend: {type: 'scroll',top: 10,data: namedata},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7']},yAxis: {type: 'value',min: 0,max: 25,interval: 5},series: [{name: 'a',type: 'line',smooth: true,data: [12, 13, 10, 13, 9, 2, 21]},{name: 'b',type: 'line',smooth: true,data: [22, 18, 19, 23, 2, 3, 3]},{name: 'c',type: 'line',smooth: true,data: [15, 23, 20, 15, 19, 3, 4]},{name: 'd',type: 'line',smooth: true,data: [13, 23, 3, 14, 15, 16, 17]},{name: 'e',type: 'line',smooth: true,data: [8, 9, 11, 20, 12, 16, 13]},{name: 'ffffff',type: 'line',smooth: true,data: [8, 9, 11, 10, 12, 17, 13]},{name: 'g',type: 'line',smooth: true,data: [18, 19, 9, 11, 12, 15, 13]},{name: 'hhhhhhhhhhhhhhhhhhhh',type: 'line',smooth: true,data: [18, 19, 9, 13, 1, 14, 3]},{name: 'i',type: 'line',smooth: true,data: [18, 3, 9, 15, 1, 2, 0]},{name: 'j',type: 'line',smooth: true,data: [22, 19, 9, 17, 1, 0, 3]},{name: 'k',type: 'line',smooth: true,data: [23, 19, 0, 19, 1, 3, 3]},{name: 'l',type: 'line',smooth: true,data: [18, 0, 9, 21, 1, 3, 3]},{name: 'm',type: 'line',smooth: true,data: [0, 19, 9, 22, 1, 3, 3]},{name: 'n',type: 'line',smooth: true,data: [0, 0, 6, 9, 18, 13, 3]}]}option && chartBox.setOption(option)window.addEventListener('resize', function () {chartBox.resize()})
}rightCharterwang()分页实现 就是配置legend，将type设置scroll并且配置图例的名字数组， orient: 'vertical',设置为纵向并调整位置，默认是横向
