option = { backgroundColor: '#0c1e55', //背景颜色 title: { text: '大声道', //表头 x: 'center', top: "20", textStyle: { //文字颜色 color: '#ffff', //字体风格 fontStyle: 'normal', //字体粗细 fontWeight: 'bold', //字体系列 fontFamily: 'sans-serif', //字体大小 fontSize: 18 }, }, tooltip: { trigger: 'axis', // transitionDuration: 0, // confine: true, // bordeRadius: 51, borderWidth: 1, //提示框边框的大小 borderColor: '#333', //提示框边框的颜色 backgroundColor: 'rgba(255,255,255,0.9)', //提示框的背景颜色（0.9为透明度） textStyle: { fontSize: 12, //提示框的字体大小 color: '#333', //提示框里的字体颜色 aligin: 'center', }, }, color: ['red', '#12C3C3', '#FBCD14'], //颜色配置 legend: { data: ['叠翠园', '北岳北'], // right:'30',//标签头居右距离 bottom: '70', // top:'20', //标签头居上距离 textStyle: { // color: [ '#','#'], // 标签头提示文字的颜色 color: '#ffff' }, icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形 // triangle三角形 emptyDiamond 空心菱形 //emptyCircle 空心圆型 emptyRectangle 空心长方形 emptyTriangle 空心三角形 }, // dataZoom: [{ // type: 'slider', // realtime: true, // //拖拉 // handleSize: '100%', //滑动条两侧的大小 // start: 0, //开始位置 // end: 50, //结束位置 // bottom: 25, //居下的距离 // textStyle: { // color: '#1bb4f6' // 滑动条的文字颜色 // }, // }], dataZoom: [ { type: "slider", show: true, zoomLock: true, // orient: "vertical", // filterMode: "none", // right: "2%", start:100, end: 60, bottom: 25, //居下的距离 // width: 10, height:10, textStyle: { color: "#FFF", fontSize: 9, }, fillerColor: "rgba(21, 220, 247, 1)", brushSelect: false, handleIcon: "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z", // 画一个圆形 handleSize: "100%", handleStyle: { color: "rgba(21, 220, 247, 1)", borderWidth: 0, }, backgroundColor: "rgba(38, 108, 252, 0.1)", //两边未选中的滑动条区域的颜色 borderColor: "transparent", filterMode: "filter", }, ], // dataZoom: [{ // type: 'slider', // slider表示有滑动块的，inside表示内置的 // show: true, // 是否显示dataZoom，在完全自定义的时候需要用到 // xAxisIndex: [0], // dataZoom控制的图标的是哪条x轴，因为会有多轴一图，可以控制多轴 // yAxisIndex: [1,0], // dataZoom控制的图标的是哪条y轴，因为会有多轴一图，可以控制多轴 // start: 10, // 和startValue不要弄混，这里是百分比 // end: 50, // 和endValue不要弄混，这里是百分比 // startValue: 0, // 滑块左端对应的x值 // endValue: 500, // 滑块右端对应的x值 // height: 10, // dataZoom整体高度 // filterMode: 'none', // 过滤模式，有filter, weakFilter, empty, none四个值，过滤会把整个数据段隐藏，而none则只是移动坐标轴 // left: 0, // right: 0, // top: 0, // bottom: 25, // dataZoom相对图标的位置 // animation:true, // 设置动画效果 // throttle: 100, // 设置视图刷新的频率，ms // showDetail: false, // showDataShadow: false, // borderColor: '#0000', // dataZoom边框颜色 // fillerColor: '#ffffff4c', // 滑块颜色 // handleSize: '0%', // brushSelect: false // 是否允许拖动滑块长度改变视图范围，不允许就是固定范围 // }], grid: { left: '3%', //整个曲线居左的距离 right: '4%', //整个曲线居右左的距离 bottom: '20%', //整个曲线居下左的距离 height: '70%', //整个曲线的高 containLabel: true }, toolbox: { show: true, feature: { // dataZoom: {}, dataView: { readOnly: true }, magicType: { type: ['line', 'bar', 'pie'] }, restore: {}, textStyle: { color: '#1bb4f6', // 左上角切换的颜色 }, // saveAsImage: {} } }, optionToContent: function(opt) { let axisData = opt.xAxis[0].data; //坐标数据 let series = opt.series; //折线图数据 let tdHeads = '时间'; //表头 let tdBodys = ''; //数据 series.forEach(function(item) { //组装表头 tdHeads += `${item.name}`; }); let table = `${tdHeads} `; for (let i = 0, l = axisData.length; i < l; i++) { for (let j = 0; j < series.length; j++) { //组装表数据 tdBodys += ``; } table += `${tdBodys}`; tdBodys = ''; } table += '

${ series[j].data[i]}

${axisData[i]}

'; return table; }, xAxis: { type: 'category', boundaryGap: false, data: ['10月1日', '10月2日', '10月3日', '10月4日', '10月5日', '10月6日', '10月7日'], axisLine: { lineStyle: { color: '#BA55D3', //设置X轴的颜色 width: 1.5, //设置X轴的粗细 } }, axisLabel: { show: true, textStyle: { color: '#00FF00' //Y轴的数据字体颜色 }, }, }, yAxis: [{ name: "亿元", //左侧单位 nameTextStyle: { color: "#ebf8ac" //左侧单位文字 }, type: 'value', axisLine: { lineStyle: { color: '#FFFF', //设置Y轴的颜色 width: 1.5, //设置Y轴的粗细 } }, axisLabel: { show: true, //formatter: "{value} %", //左侧单位添加后缀 textStyle: { color: '#00FF00' //Y轴的数据字体颜色 }, }, splitLine: { show: true, lineStyle: { color: '#FFC125' //网格线的颜色 } } }, { type: "value", name: "同比", nameTextStyle: { color: "red" }, position: "right", splitLine: { show: false }, axisTick: { show: false }, axisLine: { lineStyle: { color: 'red', //设置Y轴的颜色 width: 1.5, //设置Y轴的粗细 } }, axisLabel: { show: true, formatter: "{value} %", //右侧Y轴文字显示 textStyle: { color: "red" } } }, ], series: [{ name: '叠翠园', type: 'line', smooth: true, //圆滑的曲线 data: [180, 92, 81, 174, 210, 280, 210], symbolSize: 1, // color: '#BA55D3', yAxisIndex: 1, //下标以右侧同比数据参考 lineStyle: { width: 5 //改变线条的粗细 }, label: { show: true, //是否显示 // position: 'top', //位置 // distance: 15, //高度 // color: '#DB5E6A', //颜色 // fontWeight: 'bolder', //加粗 // fontSize: 20, //字体大小 }, }, { name: '北岳北', type: 'line', smooth: true, data: [340, 382, 391, 334, 390, 390, 410], // symbolSize: 1, // label: { // show: true, //是否显示 // position: 'top', //位置 // distance: 15, //高度 // // color: '#DB5E6A', //颜色 // fontWeight: 'bolder', //加粗 // // fontSize: 20, //字体大小 // }, } ] };

曲线图例自定义dataZoom