多Y轴曲线 - 日理万妓 2023-01-20 09:38 74阅读 0赞 echarts的链接地址 [https://www.makeapie.com/editor.html?c=xPq8II7iqp][https_www.makeapie.com_editor.html_c_xPq8II7iqp] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70][] 此代码不是上图代码是封装的 //引用 creatChart(result, "CombinationCurve", ReaTName) //封装的 data【数据】el【id】 ReaTName【标题】 function creatChart(data, el, ReaTName, options) { options = Object.assign({}, { // 曲线上偏移 chartGridTop: 50, // 曲线高度 chartGridHeight: 180, // 曲线默认颜色 echartColor: [], // 曲线类型 chartType: 'line' }, options) var overviewTitle = ReaTName; //标题 // console.log("传过来"+overviewTitle) const timeArr = [] // 时间轴 // y轴二维数组数据点 // Tags缓存、 // console.log("女司机:"+data[0]) const Tags = data[0].Tags // 展示曲线数量 const curvesCount = Tags.length // 创建一个曲线点数组 const yAxisArr = new Array(curvesCount) for(let i = 0; i < curvesCount; i++) { // 每条曲线创建一个数组存储数据 yAxisArr[i] = [] } data.forEach((arr) => { timeArr.push(arr.Time.substr(11, 5)) arr.Tags.forEach((ele, index) => { yAxisArr[index].push(ele.Value) }) }) // 拼接曲线格式 // 曲线series数组 const makeGridDataArr = [] // 曲线legend数组 const legendArr = [] // 直角坐标系内绘图网格grid数组 const makeGridArr = [] // 拼接x坐标轴数组 const makeXAxisArr = [] // 拼接y坐标轴数组 const makeYAxisArr = [] // 临时变量曲线显示下标 let axisIndex = -1 // 临时变量当前单位 let unit = '' //组件 用于区域缩放 const YxAxisIndex=[] // 获取展示单位的数组 const unitArr = [...new Set(Tags.map(item => item.Unit))] // 获取y轴数据 unitArr.forEach((item, index) => { let name = '' switch(item) { case '℃': name = '单位(℃)' break case '%': name = '单位(%)' break } makeYAxisArr.push( makeYAxis(index, { name: name }) ) YxAxisIndex.push(index) // console.log(YxAxisIndex) }) Tags.forEach((tag, index) => { legendArr.push(tag.Name) const currentUnit = tag.Unit if(currentUnit !== unit) { axisIndex++ unit = currentUnit makeGridArr.push( makeGrid( options.chartGridTop + (options.chartGridHeight + 25) * axisIndex, options.chartGridHeight ) ) makeXAxisArr.push( makeXAxis(axisIndex, axisIndex === unitArr.length - 1) ) } const arr = makeGridData( axisIndex, axisIndex, options.chartType, tag.Name, yAxisArr[index], { smooth: true, color: options.echartColor[index], lineStyle: { width: 4 } } ) makeGridDataArr.push(arr) }) const chart = echarts.init(document.getElementById(el)) const option = { // backgroundColor: 'rgba(255, 0, 0, 0)', animation: false, // 标题组件,包含主标题和副标题 title: { x: 'center', text: overviewTitle, //标题 textStyle: { //文字颜色 color: '#00C7E1', //字体风格,'normal','italic','oblique' fontStyle: 'normal', //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400... fontWeight: 'bold', //字体系列 fontFamily: 'sans-serif', //字体大小 fontSize: 18 }, }, tooltip: { // 移动端展示方式 trigger: 'axis', transitionDuration: 0, confine: true, bordeRadius: 4, borderWidth: 1, backgroundColor: 'rgba(255,255,255,0.9)', //提示框的背景颜色(0.9为透明度) textStyle: { fontSize: 12, aligin: 'center' }, formatter: function(params) { //数据单位格式化 var relVal = params[0].name; //x轴名称 relVal += "<div style='width:120px'>" for(var i = 0, l = params.length; i < l; i++) { if(params[i].value) { relVal += "<span style='display:inline-block;margin-right:5px;float:left;border-radius:10px;width:10px;height:10px;background-color:" + params[i].color + ";'>" + '<span style="display:block;padding-left:15px;margin-top:-4px;color:#333">' + params[i].seriesName + ' : ' + params[i].value + '</span>' + "</span>" + '<br>'; } } relVal += "</div>" return relVal; } }, // 坐标轴指示器(axisPointer)的全局公用设置 axisPointer: { type: 'shadow', link: { xAxisIndex: 'all' } }, // 直角坐标系内绘图网格 grid: makeGridArr, legend: { data: legendArr, textStyle: { fontSize: 12, // color: '#b3d7ff' }, bottom: 70 }, xAxis: makeXAxisArr, yAxis: makeYAxisArr, // dataZoom 组件 用于区域缩放 dataZoom: [{ type: 'slider', // xAxisIndex: [0,1], xAxisIndex:YxAxisIndex, realtime: true, // 移动端展示方式 handleSize: '140%' }], // 每个系列通过 type 决定自己的图表类型 series: makeGridDataArr } chart.setOption(option) // 直角坐标系内绘图网格 function makeGrid(top, height, opt) { return echarts.util.merge({ left: 70, right: 60, top: top, height: height }, opt || {}, true ) } // X轴生成器 function makeXAxis(gridIndex, axisLabelFlag = true, opt) { return echarts.util.merge({ type: 'category', gridIndex: gridIndex, axisLine: { lineStyle: { // color: '#b3d7ff' //color: '#b0bad4' //网格线的颜色 } }, // 统一时间轴数据 data: timeArr, axisLabel: { show: axisLabelFlag } }, opt || {}, true ) } // Y轴生成器 function makeYAxis(gridIndex, opt) { return echarts.util.merge({ type: 'value', nameLocation: 'middle', nameGap: '40', // min:50, gridIndex: gridIndex, axisTick: { show: false }, axisLabel: { show: true } }, opt || {}, true ) } // 数据生成器 function makeGridData( xAxisIndex, yAxisIndex, chartType, chartName, chartData, opt ) { return echarts.util.merge({ type: chartType, name: chartName, xAxisIndex: xAxisIndex, yAxisIndex: yAxisIndex, data: chartData }, opt || {}, true ) } } 数据格式 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70 1][] [https_www.makeapie.com_editor.html_c_xPq8II7iqp]: https://www.makeapie.com/editor.html?c=xPq8II7iqp [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70]: /images/20221021/46707777a4c3442696db1885a84acf79.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/d4f44788f14c4fc19c6d136d01c031e1.png
还没有评论,来说两句吧...