/* * @Author: your name * @Date: 2021-10-09 11:38:06 * @LastEditTime: 2021-11-19 19:42:50 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: /data-show/src/views/Index/barometer/opt.js */ import * as echarts from "echarts"; import {bigNumberTransform} from "@/utils/gol/dataTool" let colors = ['#3172ca', '#459c97', '#ab8921'] function createData(ds = []) { let arr = []; for (let i = 0; i < ds.length; i++) { let arr1 = ds[i]; for (let j = 0; j < arr1.length; j++) { let n = arr.findIndex(ele => { return ele.name === arr1[j].key; }) if (n === -1) { let obj = { name: arr1[j].key, type: 'line', symbol: 'none', itemStyle: { color: colors[j] }, areaStyle: { normal: { opacity: 0.4, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colors[j] // 0% 处的颜色 }, { offset: 1, color: '#000' // 100% 处的颜色 }] ), } }, emphasis: { focus: 'series' }, data: [arr1[j].value] } arr.push(obj) } else { arr[n].data.push(arr1[j].value) } } } return arr; } export default function createOpt(dx = [], ds = []) { const data = createData(ds); return { grid: { left: 10, right: '5%', bottom: 10, top: 46, containLabel: true }, // dataZoom: [{ // type: 'inside', //1平移 缩放 // throttle: '50', //设置触发视图刷新的频率。单位为毫秒(ms)。 // minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目 // start: 1, //数据窗口范围的起始百分比 范围是:0 ~ 100。表示 0% ~ 100%。 // end: 50, //数据窗口范围的结束百分比。范围是:0 ~ 100。 // zoomLock: true, //如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。 // }], tooltip: { trigger: "axis", backgroundColor: "#08182F", color: "#fff", borderColor: "#3373CC", textStyle: { color: "#fff", //设置文字颜色 }, extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" }, legend: { icon: 'roundRect', textStyle: { //图例文字的样式 color: '#fff', fontSize:10 }, y: 10, x: 10, itemWidth: 10, itemHeight: 10 }, xAxis: { type: 'category', boundaryGap: false, axisTick: { show: false, }, axisLine: { show: false, lineStyle: { color: "#fff", }, }, axisLabel: { formatter: (value) => { let rex = "00:00:00"; let str = ""; if(value.indexOf(rex) === -1) { str = value.substring(10, 16) } else { str = value.substring(0, 10) } return str; } }, data: dx }, yAxis: { type: 'value', axisLine: { show: false, lineStyle: { color: "#fff", }, }, axisLabel: { formatter: (value) => { let str = bigNumberTransform(value); return str; } }, splitLine: { lineStyle: { type: "dashed", // y轴分割线类型 color: "#012b4b", }, }, }, series: data } }